第一周总结

Posted 2021-01-09 ty-smile

 安装的软件有git、npm、node.js、firekeeper、sourcetree。
 开始上手用最原始的html和CSS来制作一个网站的首页。现在总结一下：首先，整体布局的思路要清晰，提前规划好。其次，代码要规范，比如{}前加空格，:后加空格，写注释可以方便修改和他人理解。最后，细节一定要注意，比如圆角、阴影的大小、分隔线不能忘记、细小的间距也要量准确、元素是否应该对齐等。
1.我对position的两个定位进一步的了解如下：relative是相对定位，相对设置它的元素本身正常定位，在文档流中仍占位置。 absolute是绝对定位，在文档流中不占位置即脱离了文档流，只要父元素要设置position：relative；就相对于设置它的元素的父元素定位。
2.相同的样式可以用同一个类名。
3.现在知道一些伪元素的用处，像::before、::after可以在元素之前或之后添加元素并为它添加样式。比如在文字前加个小图标，也可用background-image。
4.还有伪类的理解，像:hover可以实现鼠标浮上时改变其样式。
5.除了ID选择器和class选择器外，知道像:last-child、:nth-typeof()等可以帮助单独对其父元素中某一个类来修改样式。
6.图片轮播可以利用插件swiper制作，在制作分页播放logo时，遇到了一个问题，设计稿中的前后箭头是在logo两边且不遮挡logo，而我用插件制作后箭头遮挡了logo。由于轮播的块设置了over-flow:hidden;所以箭头直接用定位的方法会导致不见。后来师傅将轮播的块外面又加了一个父元素块并将其宽度改小，然后将在大块外面的箭头再定位就好了。
7.由于屏幕的大小不定，不能给块的宽度定具体的大小。可以设置margin:0 auto;让元素居中；也可以用百分比适应不同屏幕大小。也可以先定位到中间，再减去或加上一定数值。
position绝对定位来实现居中布局。适用于块级元素不给出宽高的情况下(需要借助transtrom的tanslateX方法)。
#parent{
    position: relative;
}
#child{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

8.一般我们给的宽度和高度是元素不包含padding和margin的。
9.块里面有文字，可以不给固定宽度和高度，通过自身大小或margin、padding让其自己撑开。

 

 

10.让元素浮动后会出现边框不能撑开，margin设置值不起作用等问题。清除浮动的方法：
一 添加新元素并让其clear:both;
二 伪类清除浮动:after（作用于清楚元素的父亲）
eg：.clear {
    content: "";
    display: block;
    clear:both;
}
三 给父级div定义overflow:auto;也可以使用hidden。
11 z-index的值越大，就离我们越近。就像东西，是可以一层层叠加的，数字越大的叠在最上面。
12 rgba(0,0,0,.5) 为半透明黑色。
13 box-sizing:border-box;这个我没用过，但是还是记下来吧，设置该属性后width包含padding和border的值。
14 行内元素通过设置display:block;变成块元素，
块元素通过display：inline-block可以使其不占一整行。
text-algin: center;对行内元素起作用。
text-decoration：none；可以去除a的下划线。
15 三角形可以通过border来设置，width: 0;  height: 0;
border-left: 50px solid transparent;  border- right:50px solidtransparent； border-bottom：100px solid red；
16 <input>标签type="text"默认有轮廓，用outline：none；去除。
17记得要写成 <a href"javascript:"></a>