CSS整理
CSS
1、
域名——>DNS——>ip地址——>服务器客户端握手交互——>传输数据
客户端浏览器获取一行显示一行的执行，遇到外链文件，比如.css，开启新的线程，同时（即异步）执行
2、
单选择器权重顺序
!important 权重 Infinity
——>行间样式style 权重 1000
——>id选择器 权重 100
——>class||属性||伪类 选择器 权重 10
——>标签选择器||伪元素 权重 1
——>通配符选择器 权重 0
权重的值是 256进制的（0到1之间差 256）
组合选择器——层级各权重相加
- 父子选择器（又叫派生选择器）
- 直接子元素选择器 div > div
- 并列选择器 div.class
- 分组选择器 div, span, p
3、
组合选择器 例如 div ul li span em，在DOC树中怎么个顺序遍历效率最高？
浏览器的一个内核原理就是，从右向左寻找是最快的。
4、
字体家族有（font-size font-weight font-style font-family color）
行块水平对齐方式有（text-align: left || right || center）垂直对齐方式有（line-height flex弹性布局）
font-size:50px 其实调整的是字体的高度
font-weight:light || normal || bold || boider 能不能看出效果，跟浏览器当前使用的字体包是否包含这么多的样式有关
5、
边框家族（border-width border-style border-dashed border-left border-right border-top border-bottom）
小三角形 css实现原理 下面是利用border实现的4个小三角形（刚好是一个正方形的对角线分割）
div{
width: 0;
height: 0;
border: 100px solid blank;
border-left-color: green;
border-top-color: red;
border-right-color: gray;
}
- 获得一个三角形，只需要把其它三个的颜色变成透明色（transparent）CSS专有的透明值
6、
text-indent: 2em 文本缩进
像素px也是一种相对单位，1em = 1* font-size
7、
行极元素 inline（span a ）
- 内容决定元素所占位置，不可以改变宽高
块级元素 block (div p ul li )
- 独占一行，可以通过css改变宽高
行级块元素 inline-block（img）
- 内容决定大小，可以改变宽高
凡是带有inline属性的元素，都有文字特性（文字分隔符 天生的4像素）
行级元素只能嵌套行级元素
块级元素可以嵌套任何元素
但是有两个特立独行：
P标签是块级元素，但是规定它独立，不能嵌套块级元素，否则被块级元素分割成前后两组p元素
a标签里面不能嵌套a标签
8、
大公司流程化开发都会先封装好一些相关功能，而不用每个新人都重新写一套代码
先写class的css，再导入html引用相关功能代码的class
比如初始化标签
body有个天生的8像素 margin:8px
a{text-decoration: none /*初始化去掉下划线，以后再用就可以直接使用*/}
ul{list-style:none;padding:0;margin:0;/*同理*/}
通配符初始化
*{
padding:0;
margin:0;
text-decoration: none;
list-style:none;
}
9、
盒模型： 内容宽高 + 内边距 + 边框 + 外边距
层模型：当一个元素成为绝对定位的时候，就会脱离文档流，独立一层，互不干扰，因此，后面的元素可能会产生回流和重绘的情况
比如
- absolute脱离原来位置进行定位，相对于最近的有定位的父级定位，如果没有就相对于文档进行定位
- relative保留原来位置进行定位
- fixed固定定位，相对于浏览器的可视区定位，以不变应万变
10
BFC（margin塌陷和margin合并）
margin塌陷：父子结构的元素，垂直方向的margin会共同选择最大的值
解决方式：
①父级元素加border
②让父级变成BFC块，加上overflow:hidden; || display:inline-block || position: absolute
margin合并：正常来说，元素占有区域不共用。但是兄弟结构的元素会出现margin区域共用的情况
解决方式：
①各个元素分别添加一个相同父元素，让问题转化为累加，但是这不应该应为bug增加无用的元素
②不解决是最好的解决方式，根据它的特性设置margin值
11、
float引发的问题
①浮动元素产生了浮动流，
②父子结构的元素，子元素使用float后，父级包不住的问题
原因如下
- 所有产生了浮动流的元素，块级元素看不到他们
- 产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素
根据以上原因可以有解决方式：
- 清除周边的浮动流可以添加clear:both 这个一定要用在父级且是块级元素才起作用
- 让块级元素变成bfc
- （不选）在子元素最后边添加一个无用的元素并给它设置clear：both
- （优选）利用伪元素::after添加clear：both，并修改这个伪元素为块级元素display：block
凡是元素使用了position：absolute float：left || right ，
浏览器内部会自动将元素转换为inline-block
12、
文字溢出处理
①单行文本
text-overflow:ellipsis （三点省略号）
②多行文本
overflow:hidden 再配合一个伪元素::after{content:"..."}
13、背景图片处理
background-image:url(../..xxx.jpg)
background-size: 宽 高
background-position:50% 50%；(背景图片居中)
14、企业开发经验
没有加载CSS文件的时候，功能依然正常。
比如无法加载图片的时候，显示文字
15、
浏览器的一个特性，书本学不到的
行内块级元素内外都包含文字，外面的文字会根据里面的文字底对齐，vertical-align: 数值||middle可以调整外面的字的垂直方向上的位置