CSS 记载

CSS优先级

是通过一个权重值来决定的，这个权重值由以下几个部分组成：

• 内联样式：直接写在HTML元素的style属性中，权重最高。
• ID选择器：权重值为100。
• 类选择器、属性选择器和伪类：权重值为10。
• 元素选择器和伪元素：权重值为1。
• 通用选择器（*）：权重值为0。

• 权重高的规则优先：权重高的规则会覆盖权重低的规则。
• 权重相同的规则后覆盖前：如果权重相同，后面的规则会覆盖前面的规则。

关系选择器

1. 后代选择器
   1. 语法E F{}
   2. 作用域:E元素下所有的F元素都生效
2. 了代选择器
   1. 语法E>F{}
   2. 作用域:E元素下的所有直接子元素生效,对更深一层的不起作用
3. 相邻兄弟选择器
   1. 语法E+F{}
   2. 作用域:选择紧跟E元素后的F元素生效.只能往下找第一个.
4. 通用兄弟选择器
   1. 语法E~F{}
   2. 作用域:E元素之后的所有兄弟元素F.往下找所有F元素.

浮动  float     

1.  浮动后元素就脱离了文档流,会影响父元素高度塌陷,而且也会影响后面的元素.这里就要用到清除浮动.方法如下
   1. 父元素设置高度.
   2. 后面受影响的元素增加clear属性.
      1.   clear: left;right;both(清除所有浮动)
   3. 父元素overflow清除浮动.在父元素不能设定高度的时候

      1. overflow: hidden;

   4. 伪对象方式.

      1.  content类下的伪类 

                 .content::after {
                     content: "";
                     clear: both;
                     display: block;
                 }

2. 浮动只有向左.向右浮动.
3. 当容器横向摆放内容不足时,就会向下行摆放.

弹性盒子模型

1. 在1个大盒子里面的小盒子要怎么摆放.
2. 就是在大盒子里面设定display: flex;弹性盒子默认是横向row摆放的.
3. flex-direction:指定了弹性盒子的摆放位置:row,row-reverse,column,column-reverse
4. 垂直摆放对齐方式justify-content:flex-start(靠上),flex-end(靠下),center(居中)
5. 垂直摆放对齐方式align-items:flex-start(靠上),flex-end(靠下),center(居中)
6. 运用在子盒子里的分配空间,按比例分配盒子大小.

   1. flex: 3;

定位 Position   调整位置left,top,right,bottom

1. 相对定位relative
2. 绝对定位absolute(脱离文档流)
   1. 会随着鼠标滚动消失。
3. 固定定位fixed(脱离文档流)
   1. 鼠标滚动位置不受影响.
4. 相对定位和绝对定位是相对父级元素定位进行调整的,如果父级元素定位不存在则向上逐级寻找.直到顶层文档.
5. z-index调整元素堆叠的顺序。值越大越在前面。

常用属性

• 圆角 border-radius:  20px;
  • 100px会成为圆形
• 阴影 box-shadow: 10px 10px 20px gray;