什么是CSS盒子模型
- 盒模型分为标准盒模型和IE盒模型，从元素类型上分为块级盒子和内联盒子
- 通过box-sizing属性进行切换, ie模型: box-sing: borderbox,标准盒模型: box-sizing: content-box;
- 盒模型属性设置,marign和padding值的设置:
1个值的情况: 10px 四个方向都是10px 2个值的情况下 10px 10px 上下左右的都是10px 3个值的情况下 10px 20px 30px 上10 左右20 下30 4个值的情况下: 10 20 30 40 上右下左
border值: border: 1px solid red 分别代表border-width,border-style,border-color,可以设置一个或者多个属性的值
对BFC的理解
1.什么是BFC
BFC是块级格式化上下文，是一个完全独立的空间，空间内的子元素渲染不会影响到外面的布局
2.如何创建BFC
常见几种:
1. display: flex
2.display: inline-block
3.display: table-cell
4.position: absolute
5.position: fixed
6.overflow: hidden
-
BFC解决了什么问题
-
垂直方向上margin重叠
-
使用float脱离文档流，父元素高度塌陷
CSS中哪些属性是可以继承的
css属性可以向下传递到后代元素
字体: font font-family font-size font-style font-weight 字母间距: letter-spcaing 文字提示: line-height text-align text-indent text-transform 字间距: word-spacing 可见性: visiblity
如何区别px/em/rem/vw/vh
- px: 绝对单位，网页开发的基本单位
- em: 相对单位，相对于当前盒子字体大小计算
- rem: 相对单位，相对于根元素html
- vw+vh: 相对单位，相对于当前网页视口的宽度和高度
px em rem转换关系 1rem = 1em = 16px 根元素字体修改的情况下 1rem = 根元素字体大小 当前盒子字体修改的情况下 1em = 当前盒子字体大小
em: 适用于字体缩进 rem: 配合媒体查询处理移动端适配问题
css实现左边定宽，右边自适应
1.flex布局
* {
padding: 0;
margin: 0;
}
.box-wrapper {
width: 300px;
height: 300px;
display: flex;
}
.left-box {
width: 100px;
height: 100%;
background: blue;
}
.right-box {
flex: 1;
background: yellow;
}
2.table布局
* {
padding: 0;
margin: 0;
}
.box-wrapper {
width: 300px;
height: 300px;
display: table;
}
.left-box {
width: 100px;
height: 100%;
background: blue;
display: table-cell;
}
.right-box {
height: 100%;
background: yellow;
display: table-cell;
}
3.grid布局
* {
padding: 0;
margin: 0;
}
.box-wrapper {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 100px auto;
}
.left-box {
height: 100%;
background: blue;
}
.right-box {
height: 100%;
background: yellow;
}
CSS实现绝对居中
1.定宽高
.outter {
width: 300px;
height: 300px;
position: relative;
background: #000;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}
.outter {
width: 300px;
height: 300px;
position: relative;
background: #000;
}
.inner {
width: 100px;
height: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
- 不定宽高
.outter {
width: 300px;
height: 300px;
position: relative;
background: #000;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: red;
}
.outter {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
.inner {
background: red;
}
清除浮动的方法
-
父元素固定宽高: 缺点：内部元素高度不确定的情况下无法使用
-
添加新元素 clear:both 缺点：添加无语义的html元素，不便于维护
-
使用伪元素 仅支持IE8以上和非IE的浏览器 ::after content: '',display: block;height: 0;clear: both;
-
触发父元素BFC 缺点：用overflow: hidden触发的情况下，可能会使得内部正常显示的元素被裁剪
CSS画三角形
.triangel {
width: 0;
border: 10px solid transparent;
border-bottom: 10px solid red;
}
实现三栏布局
1.flex
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
.box {
display: flex;
}
.left {
width: 100px;
background: red;
}
.center {
flex: 1;
background: yellow;
}
.right {
width: 100px;
background: blue;
}
- grid
* {
margin: 0;
padding: 0;
}
div {
height: 100px;
}
.box {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.left {
background: red;
}
.center {
background: yellow;
}
.right {
background: blue;
}
- 定位
* {
padding: 0;
margin: 0;
}
div {
height: 100px;
position: absolute;
}
.box {
position: relative;
}
.left {
left: 0;
background: red;
width: 100px;
}
.right {
right: 0;
background: green;
width: 100px;
}
.center {
background: yellow;
left: 100px;
right: 100px;
}
CSS提高性能优化的方法
-
属性简写 减少成产包的体积
-
图标替换 减少http请求节约带宽
-
删除0和单位 减少生产包的体积
-
背景图使用精灵图 减少http请求节约带宽
