前端_CSS

65次阅读

共计 937 个字符,预计需要花费 3 分钟才能阅读完成。

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

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

盒模型

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

块级元素 / 行内元素

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

BFC(块级格式化上下文)

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

颜色

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

布局

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

伪类
列表项目
动画
列表项目

正文完
 0