欢迎来到程序员的技术岛，各种功能界面和技术文档随心选择！详见昂言数据https://www.ayshuju.com/1，CSS选择器CSS选择器有很多种，常用的有类选择器、标签选择器、ID选择器、后代选择器、组选择器、伪类选择器类选择器（前/后）、兄弟选择器（+~）、属性选择器等等。2.定位定位一般包括相对定位（relative）、绝对定位（absolute）、固定定位（fixed）。相对和绝对在移动端用的最多。Fixed在移动端存在兼容性问题，不推荐使用。固定在移动端的替代方案是绝对+内部滚动。3.浮动float设置float为left或right可以使元素向左或向右浮动出文档流。一般会用在网格图案的布局中。如果所有子元素都设置为浮动，则父元素会折叠。这时候就需要清除浮动了。有很多方法可以清除浮动。常用的方法是在元素末尾加一个空格Setclear:both给元素，再高级的话给父容器设置before/after模拟一个空元素。您也可以直接设置overflow:auto/hidden。除了可以通过浮动实现的网格模式外，还可以使用inline-block和table。4.盒子模型Box盒子模型是CSS最重要的概念，是CSS布局的基石。常见的盒模型包括块级盒和行内块。框最关键的属性包括边距、边框、填充和内容。这些元素可以设置盒子和盒子之间的关系。框和内容之间的关系。另一个问题是计算盒子的大小。需要注意的是，box-sizing属性的设置会影响盒子的宽高。正常文档流中只有块框的垂直边距会出现边距折叠。行内框、浮动框或绝对定位之间的边距不会合并。5、灵活布局FlexFlex布局的容器是一个灵活的容器。首先，容器本身会根据容器中的元素动态设置自己的大小；那么当Flex容器应用了一个尺寸（宽度和高度）时，它会自动调整容器的尺寸。该元素适应新的大小。flex容器还可以设置缩放比例和固定宽度，还可以设置元素在容器中的排列方向（水平和垂直）以及是否支持元素自动换行。有了这个神器，做页面排版就方便多了。注意设置flex布局后，子元素的float、clear、vertical-align属性将失效。6.TransitionTransition、rotationTransformtransform的应用可以平移（translate）、旋转（rotate）、放大缩小（scale）、倾斜（skew）等，transition使css属性值（包括transform）在一段时间平滑过渡。使用transition和transform可以实现页面的滑动切换效果。7、动画AnimationAnimation首先需要设置一个动画函数，然后通过这个动画来改变元素的css属性的变化。动画可以设置为永久循环演示。与transition相比，animation在设置动画效果上更加灵活和丰富。两者还有一个区别：transition只能通过主动改变元素的css值来触发动画效果，而animation一旦被应用就开始执行动画。8.spritesprite对于大型网站，为了减少http请求的次数，常用的小图标一般都以大图排列。页面加载时，只需要请求一次网络，然后通过在css中设置background-position来控制显示想要的小图标。9、字体图标iconfont所谓字体图标，就是将常用的图标转换成字体资源，存放在文件中。通过在CSS中引用字体文件，可以直接通过控制字体的css属性来设置图标的样式。字体图标的好处是不受屏幕分辨率的影响，图标的颜色可以任意修改。
