1、盒子模型(1)盒子模型本质上是一个盒子，封装了周围的HTML元素，包括：margin、border、padding、content。盒模型允许其他元素与周围元素的边框之间放置元素(2)margin：outermargin，清除边框外的区域，外边距为透明border：border，包围内边距和边框外的内容padding:innermargin,清除内容周围的区域Thearea,innermargin是透明的大小因内容的变化而变化。盒子总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right盒子总高度height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom标准框也叫内容框。特点是：当我们为一个盒子指定width属性时，其宽度实际上只是内容的宽度。当padding和border变大时，content的宽度不变，box占用的整体宽度变大3.borderbox（IEbox模型）box-sizing:border-box;margin_bottom4.css3的新特性（1）border：border-radius：用于创建圆角，为元素指定圆角边框的半径值：绝对值px、mm、cm相对valueem,rem%box-shadow:用于添加阴影border-image:使用图像创建边框，允许指定一个图像作为边框，用于创建上面边框的原图(2)Background:background-image：添加一张背景图片，不同的背景图片用逗号隔开，所有显示在最上面的图片都是第一张background-size：指定背景图片的大小(3)text：text-shadow：适合文字shadowbox-shadow:适用于盒子阴影(4)deformation:transform:move,scale,rotate,elongateorstretchtheelement(5)transition:transition:元素逐渐从一种风格变为另一种风格的效果(6)Animation:animation:nameduration(动画的完成时间，默认为0)iteration-count(动画播放的次数，defaultis1)direction(动画是否在下一个循环中反向播放，默认为"normal")@keyframesname{}：创建动画，指定一个css样式，动画会逐渐从当前样式变为newstyle5.为什么要清除浮动？清除浮动的方法包括那些？原因：元素使用float:left/right后会脱离文档流。如果父元素没有设置高度，就会失去支持，下面的元素会忽略父元素开始布局方法：parentelement:overflow:hiddenparentelement:::After{clear:both;内容：””;display:block}同级浮动元素：添加一个空标签，并在clear:both6.css中设置对齐方式：(1)元素居中：使用margin:auto;设置为元素的宽度会阻止它溢出到容器边缘，元素过指定宽度，两边的空白边距会均匀分布（如果不设置width属性（或设置为100%，则居中对齐不起作用））（2)居中文本：text-align:center;(3)使用margin:auto使图像居中；并将其放置在块级元素中(4)左右对齐——使用绝对定位usingpositioning,position:absolute;属性对齐元素（5）左右对齐-使用float方法7.垂直居中（1）使用flex的align-item:center来使用flex布局；垂直居中，justify-content:cneter;水平居中（2）使用相对定位和绝对定位margin在:auto相对定位中，使用绝对定位设置上下左右为0。设置margin:auto(3)使用相对定位和绝对定位，并结合外边距和平移使用绝对定位。margin偏移外层容器的50%，然后使用translate补偿自身宽高的50%（4）使用text-align和vertical-align并使用text-align:center实现水平居中内联元素，然后使用vertical-align:middle实现内联元素的垂直居中，前提是添加伪元素，高度设置为100%8.css布局有那些:(1）定位布局：positionstatic：静态布局，默认文档流relative：相对定位，不脱离文档流，参考点为当前元素的原始位置absolute：绝对定位，脱离文档流，参考点是当前元素最近的父定位元素，如果所有父元素都没有定位元素，参考浏览器视口fixed：固定定位，脱离文档流，参考浏览器视口inherit：实现继承sticky：粘性定位,relative和fixed的结合(2)StretchboxLayout:display:flex;父元素设置display:flex子元素设置arrangement:flex-direction:row(x-axis)/column(y-axis)是否自动换行:flex-wrap:wrap(yes)/nowrap(no)的位置y轴方向的子元素：align-items:stretch（子元素默认高度为父元素的100%）/flex-start/flex-end/center子元素在x轴方向的位置axisdirection:juestify-content:flex-start/flex-end/center/space-around（均匀分布，加左右边距）/space-between（均匀分布，无左右边距）（3）浮动布局：浮动：左/右9。HeavyDrawingandreflow重绘：在不影响布局的情况下需要改变节点的外观时Reflow：当dom结构的修改导致dom的几何尺寸发生变化时，发生reflow减少重绘和reflow：使用css3新属性：translate代替top等direction值避免频繁使用style，使用classdisplay有那些值：(1)block：显示为块级元素(2)inline：display的默认属性值为：inline，元素显示为行内元素(3)inline-block：元素显示为行内块级元素。在“水平垂直居中”布局中，如果使用文本特性进行布局，子框需要设置为inline-block(4)none：隐藏元素，在inline中不会对这个元素使用网页位置保留，同时子元素不继承display:none属性，因为当display:block为子元素重置时，子元素不显示（5）flex：设置为弹性容器，其子元素称为弹性子元素，可以满足自适应布局的需要，根据不同的需求对盒子中的子元素进行排列、对齐和分配空白（6）表：元素显示为块级表
