m0_64720065的博客

每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验因此，在整个产品研发过程中，css性能优化同样需要贯穿全程#css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序#

CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的。比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件。可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值。媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。使用@Media查询，可以针对不同的媒体类型定义不同的样式。的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

offsetLeft、scrollTop、getComputedStyle等）也会引起回流。回流：回流这一阶段主要是计算节点的位置和几何信息，那么当页面的布局（如：尺寸、重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘。回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置。位置、隐藏/状态状态）发生改变时，产生重绘回流。回流计算最新值，触发回流一定会触发重绘。，JS获取Layout属性值（如。

设置父元素为display:table-cell，子元素设置 display: inline-block。display: flex时，表示该容器内部的元素将按照flex进行布局。display: grid时，表示该容器内部的元素将按照grid进行布局。父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级。知道元素宽高大小能实现水平垂直居中的方法有。父级设置为相对定位，子级绝对定位。父级设置为相对定位，子级绝对定位。

子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素。相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素。后代选择器（#box div），选择id为box元素内部所有的div元素。群组选择器（div,p），选择div、p的所有元素。类选择器（.one），选择类名为one的所有元素。标签选择器（div），选择标签为div的所有元素。id选择器（#box），选择id为box的元素。层次选择器（p~ul），选择前面有p元素的每个ul元素。

border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一。盒子模型由内容(content)、填充(padding)、边界(margin)、 边框(border)构成。盒子模型有两种：W3C标准盒子模型，IE 怪异盒子模型，IE的content部分把 border。盒子总宽度 = width + padding + border + margin;计算了进去，默认情况下，盒子模型为W3C 标准盒子模型。盒子总高度 = height + margin;