div { -ms-transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}
CSS前缀自动补全:autoprefixer
3.2 盒模型盒模型分为标准盒模型和怪异盒模型(IE5.X和6)两种标准盒模型 width = content怪异盒模型 width = content + padding + border已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;
![](https://imgkr2.cn-bj.ufileos.com/5b02ca29-357c-41bd-b193-925fbf089562.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=N8j%252FT85l87RtNBPpgYnJ1lYCWIo%253D&Expires=1599734594)
标准盒模型:1\. 占用宽:margin2+padding2+border2+width= 202+102+102+200 = 2802\. 占用高:margin2+padding2+border2+height= 202+102+102+50 = 1303\. 盒子实际宽度:padding2+border2+width= 102+102+200 = 2404\. 盒子实际高度padding2+border2+height= 102+102+50 = 90
![](https://imgkr2.cn-bj.ufileos.com/7779f321-279b-4c46-b6e5-b319a28b8549.png?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=iY2y7oaq2dl4L39xDbN0PO%252Bd4QI%253D&Expires=1599734605)
怪异盒模型:1\. 占用宽:margin2+width= 202+200 = 2402\. 占用高:margin2+height= 202+50 = 903\. 盒子实际宽度:width = 2004\. 盒子实际高度height = 50
IE8及更早版本不兼容问题办理方案:在HTML页面声明
3.3 box-sizing都有哪些值?他们的宽高分别如何打算?content-box(标准盒模型)|border-box(怪异盒模型)|inherit(继续父元素)content-box的宽高由content决定border-box的宽高由content+padding+border决定4. BFC4.1 什么是边界塌陷(或边界重叠)?兄弟div(高下margin塌陷)父子div(如果父级div没有padding\border\inlinecontent, 子级div的margin会向上查找边界塌陷的div,直到找到某个标签包括border\padding\inline content的个中一个,然后按此div进行margin)4.2 什么是BFC(格式化高下文)?如何实现?
BFC(块状格式化高下文,独立的盒子,布局不受外部影响,但是如果同一个BFC中,同级块状元素的margin-top和margin-bottom会重叠)
只要元素知足下面的任一条件,都会触发BFC特色。
body根元素position: fixed|absolute(绝对定位元素)float(浮动元素) 除了noneoverflow: hidden|auto|scroll (除了visible之外的值)display: inline-block\ table-cells\flex (具有table-的属性)办理问题:
办理边界塌陷问题办理浮动元素导致父元素高度塌陷问题办理阻挡元素被浮动元素覆盖问题4.3 多个inline元素之间会有空隙,为什么?如何办理?
元素被当成行内元素排版时,元素直接的空缺符会被浏览器处理,根据white-spack的处理办法(默认是normal,合并多余空缺),Html代码在回车换行时被转成一个空缺符,在字体不为0的情形下,空缺符霸占一定宽度,以是inline-block元素之间就涌现了空隙。
复现<ul> <li>首页</li> <li>上岸</li> <li>资源</li> <li>社区</li> <li>帮助</li></ul>
![](https://imgkr2.cn-bj.ufileos.com/50a6afa3-421d-4af9-9fad-48d72e69feb3.jpeg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=fkwoshYKbb6i%252FNOezztndQzAZPk%253D&Expires=1599740520)
办理办法:
多个inline元素写在同一行将父级元素的font-size:0给inline元素添加float的样式设置子元素的margin为负值设置父元素display:table和word-spacing:-1em5 浮动5.1 浮动会涌现什么问题?浮动会导致父元素高度塌陷会覆盖其他元素5.2 如何打消浮动?父元素加上overflow:hidden在浮动元素的后面(同级),添加一个div,属性是clear:both在父元素添加一个伪元素 .clearfix:after { display: block; height: 0; visibility: hidden; clear: both; content: '';} .clearfix{ //IE6模式下 zoom:1;}在父元素添加双伪元素 .clearfix:before,.clearfix:after { display: table; content: '';}.clearfix:after { clear: both;}.clearfix { zoom: 1; //兼容IE6下}6 position都有哪些值?relative 相对定位 (相对元素在文档中的初始位置定位)absolute绝对定位(相对付定位元素定位,最顶级是body)fixed 固定定位 (相对窗口定位)static 文档流![](https://imgkr2.cn-bj.ufileos.com/6ddb8a2b-1261-4b84-ae49-ec32c3c4b59a.webp?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=B7HTGqcB2LRMUjsAlcvjkLzn03s%253D&Expires=1599739510)
7 CSS的选择器7.1 CSS的选择器有哪些?id 选择器class 选择器tag 选择器属性 选择器(a[href=""] )派生 选择器7.2 优先级高低如何判断?不同级优先级: !important>内联>id>class = 属性 = 伪类 >标签 = 伪元素 > 通配符()同一级别: 后来居上 (后写覆盖先写) 内联样式 > 内部样式表 > 外部样式表 > 导入样式 @import ![](https://imgkr2.cn-bj.ufileos.com/67305866-9d2f-4f5c-9761-d42ee5ec7848.jpeg?UCloudPublicKey=TOKEN_8d8b72be-579a-4e83-bfd0-5f6ce1546f13&Signature=%252FKfOJPBRWgQIyPnGTYRpw8J4f%252BQ%253D&Expires=1599739287)
优先级相同时会发生什么? 样式被覆盖
7.3 列举几条常用的CSS reset{ margin:0; padding:0;}ol, ul { list-style:none;}body {line-height:1;}7.4 是否理解normalize?normalize.css是一个css reset的替代方案。
保护有用的浏览器默认样式而不是完备去掉一样平常化样式:为大部分html元素供应修复浏览器自身的bug优化css可用性阐明代码7.5 如何做到一个list中奇数和偶数行的背景色不一样? ul>li:nth-child(2n+1) { background-color: red; }ul>li:nth-child(2n) { background-color: yellow;}
7.6 如何做到一个list的第一行没有上边框?
ul>li:first-child { border-top: none; }
有梦想的人,眼睛会发光。
希望屏幕前的你,能够关注我一波。接下来,我会分享前端各种干货,以及编程中的趣事。