1. 对盒子模型的理解
- 定义：css基本盒子模型是css规范的模块，它定义的长方形的盒子
- 分类：盒模型按照标准定义分为标准盒模型和IE盒模型，按照元素类型分为块级盒模型和内联盒模型
- 使用：按照标准切换模型：
box-sizing: border-box;或者box-sizing: context-box;
按照元素切换盒模型：display: block;或者display: inline;或者display: iinline-block
- 应用：盒模型有padding,border,margin属性；padding和margin设置的值沿着顺时针方向等
2. 对BFC的理解
- 定义：BFC是块格式化上下文,代表一个独立的空间, 这个空间子元素的渲染不会影响外部布局
- 创建BFC:
display: inline-block;
display: table-cell;
display: flex;
position: absolute;
position: fixed;
overflow: hidden
- 作用：
- 解决了垂直方向margin合并的问题
- 解决了设置float脱离文档流, 父元素高度塌陷问题
3. 对css选择器的理解
- 定义： css选择器是用来对选定页面元素进行样式修改的
- 种类：
- 标签选择器
- 通配符选择器
- 类选择器
- ID选择器
- 标签属性选择器
- 伪类选择器
- 伪元素选择器
- 后代选择器
- 子代选择器
- 兄弟相邻选择器
- 通用兄弟选择器
4. 对css选择器的优先级的理解
- 定义: css选择器优先级是对于不同种类选择器组成的匹配规则
- 优先级： !important > 行内样式 > ID选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器 > 通配符、子类选择器、兄弟选择器
5. 对css属性继承的理解
- 定义: css继承指的是父元素设置的属性样式等, 子元素同时拥有该属性和样式
- 可继承属性:
- 字体：font、font-family、font-size、font-style、font-variant、font-weight
- 字母间距：letter-spacing
- 文字展示：line-height、text-align、text-indext、text-transform
- 字间距：word-spacing
- 可见性: visibility
6. 对px/em/rem/vw/vh的理解
- 定义:
- px: 绝对单位，像素, 基本长度单位
- em: 相对单位，相对当前元素文本的字体大小
- rem: 相对单位，基于html元素字体大小
- vw: 相对单位，相对浏览器的视口宽度单位(1vw代表视口宽度的1%）
- vh：相对单位，相对于浏览器的视口高度单位(1vh代表视口高度的1%）
7. 实现左边定宽，右边自适应
- flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 600px; height: 600px; border: 1px solid #000; display: flex; } .left { width: 200px; background-color: pink; } .right { flex: 1; background-color: red; } </style> </head> <body> <div class="A"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
- table布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 600px; height: 600px; border: 1px solid #000; display: table; } .left { width: 200px; background-color: pink; display: table-cell; } .right { display: table-cell; background-color: red; } </style> </head> <body> <div class="A"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
- grid布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 600px; height: 600px; border: 1px solid #000; display: grid; grid-template-columns: 200px auto; } .left { background-color: pink; } .right { background-color: red; } </style> </head> <body> <div class="A"> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
8. 实现绝对居中
- 定宽高
绝对定位 + 负margin值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; background-color: pink; margin-left: -50px; margin-top: -50px; } </style> </head> <body> <div class="A"> <div class="box"></div> </div> </body> </html>
绝对定位 + margin auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box { width: 100px; height: 100px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; margin: auto; } </style> </head> <body> <div class="A"> <div class="box"></div> </div> </body> </html>
- 不定宽高
绝对定位 + transform
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box { position: absolute; background-color: pink; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="A"> <div class="box">position + transform</div> </div> </body> </html>
table-cell
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center; } .box { background-color: pink; display: inline-block; } </style> </head> <body> <div class="A"> <div class="box">table-cell</div> </div> </body> </html>
flex布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; } .box { background-color: pink; } </style> </head> <body> <div class="A"> <div class="box">flex布局</div> </div> </body> </html>
9. 清除浮动方式
例如外部div没有设置高度， 但是内部元素设置了浮动, 这时候会导致外部div塌陷, 这时候就需要清除浮动
方式：
* 1. 父元素设置固定宽高 * 优点：简单, 代码量少, 没有兼容问题 * 缺点: 内部元素高度不确定时不能使用 * 2. 内部添加新元素,并添加`clear: both;` * 优点: 简单, 代码量少,没有兼容问题 * 缺点: 无语义, 不利于后期维护 * 3. 使用伪元素 * 优点: 仅用css实现, 不容易出错 * 缺点: 仅支持IE8以上和非IE浏览器 * 4. 触发父元素BFC * 优点: 仅使用css实现, 代码少, 浏览器支持好 * 缺点: 用overflow: hidden触发可能会使内部元素被裁剪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 100px; /* 方式一 */ /* height: 20px; */ padding: 10px; border: 1px solid red; /* 方法四 */ /* overflow: hidden; */ } .left { float: left; } .right { float: right; } /* 方法三 */ /* .A::after { content: ''; display: block; clear: both; height: 0; } */ /* 方式二 */ /* .else { clear: both; } */ </style> </head> <body> <div class="A"> <div class="left">左边</div> <div class="right">右边</div> <!-- 方式2 --> <!-- <div class="else"></div> --> </div> </body> </html>
10. css画三角形
处于页面性能考虑,为避免发送过多的http请求，节省带宽，我们可能需要使用css手动绘制各种图案
- 对于实现三角形，我们可以利用border属性来实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .A { width: 0; /* height: 0; */ border: 20px solid transparent; border-left: 20px solid red; } </style> </head> <body> <div class="A"> </div> </body> </html>
11. css提高页面性能
- 属性设置使用简写(例：margin值)
- 目的：减小生产包体积
- 用css替换图片
- 目的：减少http请求节约带宽
- 删除不必要的零和单位
- 目的：减小生产包体积
- 用css精灵图代替单个文件加载
- 目的：减少http请求节约带宽
