1、CSS选择器的权重优先级
第一等:!important
第二等:行内样式style
第三等:Id选择器
第四等:类、伪类和属性选择器
第五等:标签选择器和伪元素选择器
第六等:继承、通配符
2、标准盒模型和怪异盒模型的区别
- 标准盒模型
宽高包含content+padding+boder - 怪异盒模型
宽高只包含content
标准盒模型转换为怪异盒模型
box-sizing: border-box
3、CSS中的BFC
- 什么是BFC
- BFC就是块级格式上下文
- 是页面盒模型布局中的一种CSS渲染模式,相当于一个独立容器,里面的元素和外部的元素互不影响
- BFC的特性
- 内部的盒子会按照垂直方向一个个排列
- 同一个BFC下的相邻块级元素会发生外边距折叠,创建新的BFC包含其中一个元素可以避免(解决外边距重叠)
- 设置了BFC的区域不会和浮动元素重叠(解决浮动元素覆盖)
- 当BFC中有浮动元素时,该浮动元素的高度也会被计算其中(解决高度塌陷)
- 如何触发BFC
- 设置float浮动
- 设置overflow: hidden
- position的值设为absolute或fixed
- display: table|flex|grid
4、如何设置三栏布局
- 方法一:flex布局
两边设置固定宽度,中间设置flex:1<style> .box { display: flex; } .left { background: palegreen; width: 100px; height: 200px; } .right { background: palegreen; width: 100px; height: 200px; } .center { height: 200px; flex: 1; background: pink; } </style> <body> <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> </body>
- 方法二: 浮动布局
左右两栏设置浮动,中间设置margin,中间的div布局放在最后<style> .left { float: left; background: rgba(0, 0, 0, .1); width: 100px; height: 200px; } .right { float: right; background: palegreen; width: 100px; height: 200px; } .center { height: 200px; margin: 0 100px; background: pink; } </style> <body> <div class="box"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> </body>
- 方法三:定位布局
父元素设置position: relative,左右两栏设置绝对定位,中间设置margin,中间的div布局可以放在任意位置<style> .box { position: relative; } .left { position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .1); width: 100px; height: 200px; } .right { position: absolute; right: 0; top: 0; background: palegreen; width: 100px; height: 200px; } .center { height: 200px; margin: 0 100px; background: papayawhip; } </style>
- 方法四:浮动布局+BFC
<style> .left { float: left; background: rgba(0, 0, 0, .1); width: 100px; height: 200px; } .right { float: right; background: palegreen; width: 100px; height: 200px; } .center { height: 200px; overflow: hidden; background: pink; } </style>
5、盒子水平垂直居中的方法
-
方法一: flex
.fater { display: flex; align-item: center; justify-content: center;
-
方法二:利用margin与定位
.fater { position: relative; } .child { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
-
方法三:利用position定位实现
.fater {
position: relative;
}
.child {
position: absolute:
top: 50%;
left: 50%;
transform: translate(-50%, -50%) // 未知宽高
margin-top: -50px; // 已知宽高为100
margin-left: -50px; // 已知宽高为100
}
6、移动端适配
- 方法一: 设置页面视口viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 方法二:配置rem单位
- 方法三: 利用媒体查询
7、对重绘和重排的理解
- 重绘
- 当元素的外观、背景、颜色等改变,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观就叫重绘
- 重排
- 当渲染树一部分或者全部因为大小或者边距而改变,需要渲染树重新计算的过程叫做重排
- 重绘不一定需要重排,重排必然会导致重绘
- 如何避免重绘和重排
- 在元素的显示上尽量使用opacity代替visibility(重绘)
- 元素定位时使用tranform代替top、left(重排)
- 尽量不使用table布局,因为一个小的改动会造成整个table重新布局(重排)
- 减少直接操作DOM元素(重排)
- 为元素添加类,样式都在类中改变(重绘)
8、display、visibility、opacity之间的区别
- display: none是将DOM元素设置为隐藏,该隐藏是不占位的
- visibility: hidden也是将DOM元素设置为隐藏,但是该隐藏仅仅是看不见而已,还是占位的
- opacity: 0是将透明度设置为0,仅仅是看不见而已,还是占位的
9、rgba和opacity的区别
- rgba和opacity都可以实现透明效果,但最大的不同是opacity作用于元素以及元素内的所有内容,而rgba只作用于元素的颜色或其背景色
10、css3新增了哪些新特性
-
选择器:新增了一些选择器,如属性选择器、伪类选择器和伪元素选择器,使得选择元素更加灵活和精确。
-
盒子模型:引入了box-sizing属性,可以控制元素的盒子模型计算方式,包括content-box、border-box和padding-box。
-
布局:新增了一些布局模块,如弹性盒子布局(flexbox)、网格布局(grid)和多列布局(multicolumn),可以更方便地实现复杂的页面布局。
-
动画和过渡:新增了transition和animation属性,可以实现元素的平滑过渡和动画效果,使页面更加生动和有趣。
-
渐变和阴影:引入了线性渐变、径向渐变和盒阴影等属性,可以实现更丰富的背景效果和阴影效果。
-
字体和文本效果:新增了@font-face规则,可以使用自定义字体;引入了text-shadow和text-overflow等属性,可以实现文字阴影和溢出时的处理。
-
背景和边框:新增了background-size、background-origin和border-radius等属性,可以实现更灵活和多样化的背景和边框效果。
-
变形和过滤:引入了transform和filter属性,可以实现元素的旋转、缩放、倾斜等变形效果,以及图像的滤镜效果。
-
媒体查询:新增了@media规则,可以根据不同的媒体类型和设备特性,为不同的屏幕尺寸和分辨率提供不同的样式。
这只是CSS3的一部分新特性,还有很多其他的功能和属性。总的来说,CSS3的引入使得网页设计更加丰富多样,效果更加炫目,用户体验也得到了提升。