CSS 知识框架(一)
CSS 知识框架
标签模式
块级元素
特点:
总是从新行开始
高度、行高、外边距,内边距都可以控制
宽度默认是容器的 100%
可以容纳内联元素和其他块元素 </br>常见:
行内元素
特点:
和相邻行内元素在一行上,但是之间会有缝隙
高、宽无效,但水平方向的 padding 和 margin 可以设置,垂直方向的无效。
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或则其他行内元素。(a 特殊) </br>常见:
标签转化
块转行:
块转行:
特性
层叠:就近原则,进行重叠</br>继承:子承父业</br>优先:
每个元素(标签)贡献值为 0,0,0,1
每个类,伪类贡献值为 0,0,1,0
每个 ID 贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。
盒子模型
边框
功能点:
none:没有边框即忽略所有边框的宽度(默认值)
边框为单实线 solid
边框为虚线 dashed
边框为点线 dotted
边框为双实线 double
边框圆角 border-radius: 左上角 右上角 右下角 左下角;
边距
内边距:
是指 边框与内容之间的距离
padding 外边距:margin
盒子居中
用法:margin: 0 auto;
清楚内外边距
用法:margin:0,padding:0
css3 盒模型
用法:
box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到 width 里面的
box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持 W3C 的标准 Box Mode
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
CSS 样式
内部样式
内嵌式是将 CSS 代码集中写在 HTML 文档的 head 头部标签中
行内式
标签的 style 属性来设置元素的样式
外部样式表
链入式是将所有的样式放在一个或多个以.CSS 为扩展名的外部样式表文件中,通过 link 标签将外部样式表文件链接到 HTML 文档中
版权声明: 本文为 InfoQ 作者【默默的成长】的原创文章。
原文链接:【http://xie.infoq.cn/article/879615ad9b72ad8688ea017a6】。文章转载请联系作者。
评论