css

常用css：

1. text-align:center;  父元素让子元素（只有是行内元素才有效）或 文字水平居中；

2. line-height:10px;  如果只有一行文字。line-height和height一致，就可以让文字竖直方向垂直居中；

3. font-size:12px;   字体大小

4. font-weight:bold; 字体加粗；

5. font-style:italic; 字体倾斜；normal字体正常；

6. color：#fff;  字体颜色

7. width:1px; 宽度；

8. height:1px; 高度；

9. background:#fff; 背景颜色； 

10. background-image: url(" ")；背景图片；

11. background-size: px | % | cover | contain ; 图片大小 ；后边两个为全覆盖，自适应；

12. background-repeat: no-repeat; 图片是否重复；

13. border-radiud:50%;  圆角度数，单位可以是%或px ；

14. display:block | inline-block | none | flex;  标签分为块元素，行元素，行内元素 ,弹性布局；布局时块元素独占一行；标签有div , p , ul , li , h1-h6；block还有用于显示元素；行元素和行内元素可以并排排列；标签有：span , a , i , label ；none元素隐藏；

15. 盒子模型：border,padding,width； 元素在页面上宽度=border+padding+width；假设设计稿是这个元素宽100px的大小，1px 的边框，左右两边padding为5px ,那width=100-2-10=88px;

 

16. overflow:auto | hidden ; 超出以滚动条的形式；超出隐藏；

17. float:left | right | none ; 浮动

18. position: relative | absoulte | fixed | static ; 定位

19.一些标签会有默认样式，body , li , h1-h6 , p 有默认的margin值；

20. 常见几种布局方法：

　　要实现以上效果有以下几种方法：

　　假设带边框的是父元素ul , 里边三个元素为li

 　  第一种：推荐

　　　　ul{ display : flex ; justify-content: space-around ; align-items : center ; }

　　　　说明：第一个属性父元素是弹性布局；后边两个属性作用于子元素，让其水平方向四周环绕，竖直方向居中；

　　　　　　　如果父元素宽度不变，有4个子元素，则ul需要再加一个flex-wrap:wrap;属性，让子元素换行；

　　第二种：

　　    li{display:inline-block;margin:10px 10px 15px 20px; }

　　　 说明：li为块元素，独占一行，无法并排排列；将display属性设置为inline-block(行内元素)即可达到图中并列效果；再结合margin值调整间距；

　　　　　　如果margin有两个值，代表上下，左右；有四个值为上，右，下，左顺时针方向；

 

　　第三种：

　　　　li{float:left;margin:10px 10px 15px 20px;  }

　　　　说明：li添加浮动，也可让其并排排列；再结合margin调整距离；此时子元素浮动，脱离文档流，没有撑起父元素，父元素没有高度；这就是“高度坍塌”；

　　　　         需要清除浮动；第一种给父元素添加overflow:hidden;这种可以清除浮动，但是这个属性还有超出隐藏的作用，有时会受到影响；第二种给父元素

　　　　　　   添加ul:after{ content:' ' ; display : blcok; clear : both ; height : 0 ; line-height : 0; visibility : hidden ; } 前三个属性是必须的，后三个不是；

 

　　第四种：

　　　　ul{ position : relative; }

　　　　li{ position : absolute ; left: 10px; }

　　　　说明：父元素ul设置相对定位，子元素绝对定位，再结合left,right,bottom,top调整位置；

　　　　　　　如果ul外边还有一层父元素div，div设置 position : relative; 而ul没有设置，那么子元素是相对div进行定位；

　　　　　　　left,top等值都是根据div进行设置的；通常上图这种布局不用绝对定位；以跃马banner为例，父元素的div的内容已被图片占据；

　　　　　　　此时还想再加个登录框，这时div要设置相对定位relative，登录框div设置绝对定位absolute，left是设置了relative的父元素的距离；

　　　　　　　absolute的div相对有relative的父元素进行定位；