1、盒模型页面渲染时，可以通过box-sizing设置dom元素采用的布局模型，根据计算出的高度划分的区域可以分为：content-box(W3C标准盒模型）border-box（IE盒模型）1、content-box中，元素的宽高包括元素的padding，border//div大小为140*140，contentbox大小为100*100div{宽度：100px；高度：100px；填充：10px；border:solid10pxblack;}2、border-box中，元素的宽高不包括padding,border,margin//divsize为100*100，contentboxsize为60*60div{width:100px;高度：100px；填充：10px；框大小：边框框；border:solid10pxblack;}2、选择器优先级!important>内联样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性选择器从右到左解析3、属性继承所有元素都可以继承：visibilitycursorInline元素可以继承：letter-spacingword-spacingwhite-spaceline-heightcolorfontfont-familyfont-sizefont-stylefont-variantfont-weighttext-decorationtext-transformdirection块元素可以继承：text-aligntext-indent4,centerlayout1,horizo??ntalcenter//行内元素，在父元素上设置text-align为div{text-align:center;}//块级元素，设置margindiv{margin:0auto;}//absolute+变换结合使用div{position:re土生土长的；div{位置：绝对；左：50%；转换：翻译（-50%，0）；}}//flex+justify-content:centerdiv{display:flex;justify-content:center;}2、垂直居中//内联元素：line-heightdiv{height:20px;line-height:20px;}//absolute+transformdiv{position:relative;div{位置：绝对；顶部：50%；转换：翻译（0，-50%）；}}//flex+align-items:centerdiv{display:flex;align-items:center;}//tablediv{display:table-cell;vertical-align:center;}3、水平垂直居中//absolute+transformdiv{position:relative;div{位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；}}//flex+justify-content+align-itemsdiv{display:flex;对齐项目：居中；justify-content:center;}5、BFC块格式化上下文（BlockFormattingContext，BFC）是网页可视化CSS渲染的一部分，是块框布局过程中发生浮动元素交互的区域其他元素块格式化上下文将通过以下方式创建：根元素的float属性不是none，position是absolute或fixeddisplay是inline-block，table-cell，table-caption，flex，inline-flexoverflow不是可见，内部的Box会在垂直方向，一个接一个的放置。Box的垂直距离由margin决定。属于同一个BFC的两个相邻框的边距将与每个元素的边距框的左侧重叠，接触包含块边框框的左侧（对于从左到右的格式，否则反之亦然）。即使存在浮动也是如此。BFC的区域不会和浮动框重叠。BFC是页面上一个隔离的独立容器，容器内部的子元素不会影响外部的元素。反之亦然。BFC计算高度时，浮动元素也参与计算6、去除浮动的影响使用clear:both清除浮动父级并设置高度创建父级BFC7、css动画animation:frameanimationanimation-name:keyframenameanimation绑定到selector-duration：完成动画的时间，单位秒或毫秒animation-timing-function：动画的速度曲线animation-delay：动画开始前的延迟animation-iteration-count：动画播放次数animation-direction：是否轮流反向播放动画：过渡动画transition-property：过渡效果的CSS属性名称transition-duration：完成过渡效果所需的时间transition-timing-function：速度曲线transition-delay：动画延迟时间超乎想象常用的CSS属性，简单总结一下，一个ar关于水文的文章，后续会继续补充完善~
