<--------------------结构伪类选择器---------------------------->
结构伪类选择器
选择第一个：li：first-child；选择最后一个：li:last-child；选择其中一个：li：nth-child（n）；
选择器工作原理，先查找位置，然后去匹配选择器位置上，是否是我们选择的标签，如果是的话就渲染样式，如果不是就不会渲染样式。
选择偶数：nth-child（even）或者（2n）；选择奇数：nth-child（odd）或者（2n+1）；选择前三个 ：nth-child（-n+3）；选择后三个：nth-child（n+）；选择3的倍数：nth-child（3n）；
<--------------------伪元素---------------------------->
元素前加一个伪元素：：before { conter：' ' }；元素后加一个伪元素：：after{ conter：' ' }；
伪元素：是一个空的行内盒子元素，必须加给双标签，必须要加center属性，哪怕为空。算是行内元素，权重为1；
伪元素调用iconfont字体案例
：：after{ content ' \e65f ' ； font-family : iconfont；}
第一步：在css样式中使用link调用iconfont；
第二步：转义符号是将案例字体库图标前边的 &#x 转换为 \
第三步：一定要加上字体样式，不然显示不出来
<--------------------浮动---------------------------->
浮动布局的特点：
第一点：元素会脱离标准流，在标准流中不占据位置
第二点：只会影响后边的盒子布局，不影响前边的盒子布局，浮动元素具有行内块元素的特点
第三点：一行显示多个，顶端对齐，没有缝隙
第四点：如果不设置宽，默认的宽度是被内容撑开的
第五点：可以设置宽高，内外边距都可以生效
<--------------------浮动元素，一行放不下，折行的问题---------------------------->
方案一：li：nth-child（最后一个li 和它的n倍数）{margin - right ：0}
方案二：把ul的宽度设置为103%，增加ul的宽度，这样也不会对下边的盒子造成影响。 ul{ width：103%}
<--------------------清除浮动---------------------------->
子盒子在浮动以后，父盒子不占有位置，导致后边的盒子压上去，清除浮动以后，父盒子跟着子盒子最大的高度去走
方案一：给父盒子加上 overflow：hidden；
方案二：display：flow-root
方案三：在父级盒子最后加上一个子盒子，子盒子的属性设置为，clear：both。
方案四：伪元素清除浮动的方法：：：after{ content：' ' ； clear：block； }
<--------------------css显示隐藏---------------------------->
占位隐藏：visibility：hidden；占位显示：visibility：visible；
不占位隐藏：display：none；不占位显示：display：block；
溢出隐藏：overflow：hidden；默认，溢出显示：overflow：visible；溢出不溢出都有滚动条，溢出部分放入滚动条：overflow：scroll；溢出部分加入滚动条：overflow：auto
<--------------------图片与文字的对其方法---------------------------->
加给图片元素：vertical-align：
属性：默认对其：baseline；顶端对齐：top；底端对齐：bottom；水平对齐：middle
如果图片和盒子以及其他元素有留白，把图片转换为块级元素
<--------------------文本溢出省略号显示---------------------------->
第一步：强制让文本在一行显示：wite-space：nowrap
第二步：溢出隐藏：overflow：hidden
第三步：溢出的内容用省略号显示：text-overflow：ellipsis；
注意点，英文单词或者数字被浏览器解析后不会自己折行的情况下，使用 word-break：break-all帮助折行
<--------------------精灵图---------------------------->
第一步：使用精灵图的时候，盒子必须要有固定的宽和高，因为精灵图是使用背景图片插入，背景图片自己不会占有位置
第二步：将精灵图以背景方式插入，需要平铺
第三步：用背景图的定位功能，定位想要查找的图标，取值一般都是负值
标签：盒子,进阶,元素,nth,溢出,child,overflow,选择器,css From： https://www.cnblogs.com/hgng/p/16782691.html