前端_CSS

CSS

CSS(Cascading Style Sheet): 层叠样式表,控制网页的样式.选择器区分大小写.

1. 作用: 通过选择器来定位DOM(文档对象模型)的元素,将各种样式规则应用在元素上,改变元素在页面上的显示方式.
2. 使用方式: 内联样式 + 内部样式 + 外部样式

盒模型

1. 标准盒模型 = content +border + padding +margin
2. IE盒模型 = content(content + border + padding) + margin
3. 空间 = padding(内边距) + margin (外边距) + border (边框)

块级元素/行内元素

1. 块级元素: 默认宽度是100%,块级元素会自动从新的一行开始.div table h1-h6 p form ol section canvas audio video
2. 行内元素: 和其他元素在同一行,宽度/高度时内容的宽度和高度, a span b img input select strong

BFC(块级格式化上下文)

1. 容器内的Box会在垂直方向上一个接着一个放置.
2. 计算BFC容器的高度时,浮动元素也会参与计算.
3. 触发BFC: float: none; position: absolute; display: inline-block/table-cell/inline-flex/felx; overflow: visable;

颜色

1. 十六进制: hex使用6个十六进制编码来表示颜色,2个一组,分表表示红(R),黄(G),蓝(B).
2. hsl色彩: hsl(60,100%,50%)

布局

1. 文本对齐方式: text-align: left/right/center/justify;
2. 盒阴影: box-shadow: offset-x offset-y blur-raduis spread-radius;
3. 透明度: opacity: 0.7;
4. 字母的大小写: text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;
5. 方向: top left right bottom;
6. 定位: position: relative(元素的定位参照于最近的已定位祖先的元素) absolute fixed ;
7. 堆叠顺序: z-index: 10;
8. 变换 transform: scale(2) skewX;

伪类

1. 列表项目

动画

1. 列表项目