CSS随笔

什么是盒模型：
盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：


BFC：
如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。


CSS定位:
static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：

relative 定位
相对定位元素的定位是相对其正常位置。

absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

绝对定位和相对定位的区别：
absolute这个是绝对定位；是相对于浏览器的定位。用left:20px;top:80px
relative是相对定位，是相对于前面的容器定位的。这个时候不能用left top定位。应该用margin

absolute这个是绝对定位；它不会随着窗口大小变化，只是固定在一个特定的坐标轴上面；
relative 这是相对定位啊！和上面的相反，它可以随窗口大小变化。但大小仍然不会变。

css样式权重和优先级:
权重记忆口诀：从0开始，!important第一，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0。


总结
1.常用选择器权重优先级：!important > id > class > tag
2.!important可以提升样式优先级，但不建议使用。如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如：background: blue !important;
3.如果两条样式都使用!important，则权重值高的优先级更高
4.在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的
5.样式指向同一元素，权重规则生效，权重大的被应用
6.样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
7.样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用

css 如何实现水平居中：
1.对于 行内元素 : text-align: center;
2.对于确定宽度的块级元素：
（1）width和margin实现。margin: 0 auto;
（2）绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative
3.对于宽度未知的块级元素
（1）table标签配合margin左右auto实现水平居中。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。
（2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。
（3）绝对定位+transform，translateX可以移动本身元素的50%。
（4）flex布局使用justify-content:center

css 如何实现垂直居中：
1.利用 line-height 实现居中，这种方法适合纯文字类
2.通过设置父容器 相对定位 ，子级设置 绝对定位，标签通过margin实现自适应居中
3.弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
4.父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
5.table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。