CSS3层叠样式表（一）

字体相关样式连写-顺序要求：style weight size family（特殊记忆swsf稍微舒服）

实例：font: italic bold 30px 楷体,宋体,隶书,sans-serif;

省略要求：只能省略前两个，如果省略了相当于设置了默认值；

注意：如果需要同时设置单独和连写形式（要么单独在连写样式下；要么单独样式写进连写里面）

text-align:center能让文本、span标签、a标签、input标签、img标签这些元素水平居中；

注意：以上元素水平居中，text-align：center需要给以上元素的父元素设置；

line-height可以垂直居中-----单行文本

颜色表示法：①color:rgb（0-255,0-255,0-255）

②color:rgba（0-255,0-255,0-255,0-1（透明度））

③关键词

④十六进制表示法

背景图片平铺属性background-repeat:repeat(默认，都平铺)，no-repeat(不平铺),repeat-x(水平平铺)，repeat-y(垂直平铺)

背景图片位置属性 background-position：水平方向位置 垂直方向位置

属性值：①方位名词     水平方向（left，center，right） 垂直方向（top，center，bottom）

②数字+px（左边）   x轴（水平向右） y轴（垂直向下）

背景相关属性的连写形式：background：color image repeat position

实例：background: skyblue url(./T1r_x_BgLT1RXrhCrK.jpg) no-repeat center center;

块级元素  属性：display:block

特点：独占一行；宽度默认是父元素的宽度，高度默认由内容撑开；可以设置宽高；

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer.....

行内元素  属性：display:inline

特点：一行可以显示多个；宽度和高度默认由内容撑开；不可以设置宽高；

代表标签：a、span、strong、ins、em、del.....

行内块元素   属性：display:inline-block

特点：一行可以显示多个；可以设置宽高；

代表标签：input、textarea、button、select（特殊情况：img标签有行内块元素特点，但调试工具显示是inline）

CSS的三大特性  ----  继承性、层叠性、优先级

继承性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性：1. color       2. font-style、font-weight、font-size、font-family

     3.text-indent、text-align           4.line-height

注意：可以通过调试工具判断样式是否可以继承；

继承失效的特殊情况：如果元素有浏览器默认样式，此时继承性依然存在，但会优先显示浏览器默认样式；

1. a标签的color会继承失效；
2. h系列标签的font-size会继承失效；
3. div的高度不能继承，但是宽度有类似于继承的效果（实际是div的特性导致（div是块级元素））

层叠性（特性）1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上

  2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效

注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果；

优先级（特性）：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式；

优先级公式：继承＜通配符选择器＜标签选择器＜类选择器＜id选择器＜行内样式＜!important

注意：1.!important写在属性值的后面，分号的前面；

      2.!important不能提升继承的优先级，只要是继承优先级最低；

  3.实际开发中不建议使用!important；

权重叠加计算（场景）：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效；

比较规则：1.先比较第一级数字，如果比较出来了，之后的统统不看；

          2.如果第一级数字相同，此时再去比较第二级数字，之后的统统不看；

  3.如果最终所有的数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算）；

注意：!important如果不是继承，则权重最高，天下第一！

盒子模型（实际大小）=左边框+左padding值+内容宽度+右边框+右padding值

注意：width和height是内容的宽高；设置border会撑大盒子；设置padding也会撑大盒子；

解决办法：①手动内减----需要自己计算多余大小，手动在内容中减去；

②自动内减----给盒子设置属性box-sizing：border-box即可；（浏览器自动计算减去）

外边距（margin）折叠现象--①合并现象：垂直布局的块级元素，上下的margin会合并；

                           结果：最终两者的距离为margin的最大值

                          解决办法：避免就好（只给其中一个盒子设置margin即可）

②塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上；

               结果：导致父元素一起往下移动；

               解决办法：1.给父元素设置border-top或者padding-top（分隔父元素的margin-top）

2.给父元素设置overflow：hidden

                        3.转换成行内块元素

                        4.设置浮动

行内元素的margin和padding的无效情况（给行内元素设置margin和padding时）

结果：1.水平方向的margin和padding布局中有效；

  2.垂直方向的margin和padding布局中无效；

结构伪类选择器（常用于查找某父级选择器中的元素）

E:first-child { }  匹配父元素中第一个子元素，并且是E元素；

E:last-child { }   匹配父元素中最后一个子元素，并且是E元素；

E:nth-child(n) { }  匹配父元素中第n个子元素，并且是E元素；

E:nth-last-child(n) { }   匹配父元素中倒数第n个子元素，并且是E元素；

（拓展补充） nth-of-type

E:nth-of-type(n) { }    只在父元素的同类型（E）子元素范围中，匹配第n个；

区别：1. :nth-child ------ 直接在所有孩子中数个数；

1. :nth-of-type ----- 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数；

伪元素（一般页面中的非主体内容可以使用伪元素）

区别： 1. 元素：HTML设置的标签；2. 伪元素：由CSS模拟出的标签效果；

种类：  ::before      在父元素内容的最前面添加一个伪元素；

::after       在父元素内容的最后面添加一个伪元素；

注意点： 1. 必须设置content属性才能生效；2. 伪元素默认是行内元素；