Open adodo0829 opened 4 years ago
css 定义了如何去描述 html 元素的展示 引入css样式是为了解决 结构和样式 分离的问题 css 文档教程
1.外部引入 <link rel="stylesheet" href="sheet1.css">
2.内部样式 style 元素中书写
3.行间样式
- css选择器
通配, 元素, 类, id, 属性(具体[class="b"]和部分[class ^="b"]) 分组, 后代, 相邻(+, ~), 伪类:hover, 伪元素:before
- 特性
三大特性: 继承上层属性, 层叠覆盖, 优先级排序 按权重排
- 单位
em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size的倍数
rem是相对于根元素html的font-size属性的计算值
vw: 布局视口宽度的 1/100 vh: 布局视口高度的 1/100 vmin: 布局视口高度和宽度之间的最小值的 1/100 vmax: 布局视口高度和宽度之间的最大值的 1/100
- calc 计算
它允许使用+、-、、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算 width: calc(100%/3 - 21em - 2*1px);
### CSS选择器的解析顺序是从右到左? 如果正向解析，例如「div div p em」，首先要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证 正向解析是在试错，而逆向匹配则是在挑选正确的元素。因为匹配的情况远远低于不匹配的情况，所以逆向匹配带来的优势是巨大的 ### css 变量
// 声明 && 使用
### css规范 // 全局样式重置统一 normalize.css reset.css // 命名 BEM: block-element-module-inner 首字母简写 // 声明顺序
布局类属性 position / top / right / bottom / left / float / display / overflow 等 盒模型属性 border / margin / padding / width / height 等 文本类属性 font / line-height / text-align / word-wrap 等 修饰类属性 background / color / transition / list-style 等
## 布局 ### 盒模型 所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小 - 标准盒模型:
元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
盒子宽高 = content + padding + border + margin; 元素设置的宽高会随着 pading 和 margin 发生变化
- 怪异盒模型
不同之处在于IE盒模型的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸 宽高设置多少就是多少; 便于布局; 内容区的宽高会减去 padding 和 margin
### 标准流 - block
不设置宽度时，宽度为父元素宽度 独占一行 支持宽高
css
css 定义了如何去描述 html 元素的展示 引入css样式是为了解决 结构和样式 分离的问题 css 文档教程
基础语法
2.内部样式 style 元素中书写
3.行间样式
通配, 元素, 类, id, 属性(具体[class="b"]和部分[class ^="b"]) 分组, 后代, 相邻(+, ~), 伪类:hover, 伪元素:before
三大特性: 继承上层属性, 层叠覆盖, 优先级排序 按权重排
em
em表示元素的font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size的倍数
rem
rem是相对于根元素html的font-size属性的计算值
视口单位
vw: 布局视口宽度的 1/100 vh: 布局视口高度的 1/100 vmin: 布局视口高度和宽度之间的最小值的 1/100 vmax: 布局视口高度和宽度之间的最大值的 1/100
它允许使用+、-、、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算 width: calc(100%/3 - 21em - 2*1px);
// 声明 && 使用
布局类属性 position / top / right / bottom / left / float / display / overflow 等 盒模型属性 border / margin / padding / width / height 等 文本类属性 font / line-height / text-align / word-wrap 等 修饰类属性 background / color / transition / list-style 等
元素所设置的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。
盒子宽高 = content + padding + border + margin; 元素设置的宽高会随着 pading 和 margin 发生变化
不同之处在于IE盒模型的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸 宽高设置多少就是多少; 便于布局; 内容区的宽高会减去 padding 和 margin
特性
不设置宽度时，宽度为父元素宽度 独占一行 支持宽高
具体标签