极简页面布局知识手册（持续更新中）
站长
· 阅读数 24
常识篇
@基础概念
HTML
- 全写为HyperTextMarkupLanguage，直译为 超文本标记语言
- 言下之意明明一段字符代码，浏览器在显示（渲染）时却能形成很炫的效果，因此它是“超级文本”；
- HTML语言的基本元素是标签/元素；
- 每个标签都有其特定的语义，特定的属性，浏览器能够根据标签的语义和属性，按约定方式去绘制特定的效果；
<div class="minsu">民宿推荐</div>
- 在上面的HTML代码中
div就是标签名，我们注意到它是成对出现的，class="minsu"是它的一个属性； - HTML语言中有狠多标签和属性，每个标签名具体是何含义（语义），每个属性具体代表什么，浏览器应该怎么理解和渲染这些标签和属性，是有一整套标准的，即 W3C标准；
CSS
- 全称CascadingStyleSheets，直译为层叠样式表；
- 是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言；
- CSS文件扩展名为 .css；
- 通过使用CSS我们可以大大提升网页开发的工作效率；
- CSS3现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。
W3C
- W3C 指万维网联盟（World Wide Web Consortium）
- W3C 创建于1994年10月，由 Tim Berners-Lee 创建；
- W3C 的工作是对 web 进行标准化，创建并维护 WWW 标准，用于规范浏览器对HTML和CSS的渲染行为；
- W3C 是一个会员组织，其会员包括微软、苹果、谷歌...不一一列举了，凡是造浏览器的厂商都是会员；
- W3C 标准被称为 W3C 推荐（W3C 规范）
- “推荐”而非强制，但上一个不响应“推荐”的浏览器已经被其亲妈所抛弃了，即微软抛弃IE的故事；
HTML篇
@常用块级元素
div片区
- 语义就是分块（division），常用于页面大块划分
- 每个div标签在页面中独占一行
hx标题
p段落
分割线
@常用行内元素
img图片
span无题
a超链接
b加粗
i倾斜
@列表
@表格
@表单
@HTML通用属性
class类名
- class属性定义了元素的类名;
- CSS可以根据类名去定义一套样式，物以类聚，所有具有相同类名的标签/元素都将天下乌鸦一般黑，获得相同的样式；
- 例如上面的案例中我们给一个div元素添加了类名名曰
banner，在CSS样式(style)中，我们为其设置了元素高度、文本行高、背景色等样式，那么所有class为banner的元素都将具有这几个相同样式；
<div class="banner">BANNER</div>
.banner {
height: 447px;
line-height: 447px;
background-color: green;
}
id身份标识
style行内样式
CSS篇
@CSS选择器
标签选择器
- 选中所有特定的标签并同意添加样式
/* 标签选择器 选中所有div */
div {
...
}
类选择器
- HTML标签上有属性
class="xxx"时，CSS可以通过.xxx{具体样式}的方式来定位到所有具有该类名的元素，统一给它们添加相同的样式； - 例如上面的
.banner
通配符选择器
- 选中所有元素并统一添加样式！
* {
...
}
群组选择器
- 通过逗号隔开的方式，一次性选中一堆选择器（可以是标签选择器、类选择器、通配符选择器以及我们后续会学的各种复杂选择器），并给命中的元素统一添加样式；
.banner,
.movie,
.minsu,
.likes,
.navi,
.links,
.footer {
...
}
伪类选择器
伪元素选择器
选择器权重
- 大家应该已经注意到了，标签选择器、类名选择器、通配符选择器常常会同时命中同一目标！
- 下面的例子中，类名为header的div元素会同时被三个选择器命中，如果这三个选择器的样式发生冲突的话，这个元素到底该听谁指挥呢？
* {...}
div {...}
.header {...}
- 为解决这个问题，W3C就提出了选择器权重这一概念！
- 多个选择器同时作用于相同元素且样式冲突的情况下，权重大的具有更高优先级；
- 因此本例中通配选择器-标签选择器-类名选择器的权重分别为0-1-10，样式冲突的情况下类名选择器会起作用；
- 后续随着我们的选择器种类越来越多、越来越复杂，相互交织和冲突的机会越来越多，我们在整体进行布局规划时就要尽量保持结构清晰、逻辑清晰！
@盒子模型
理论基础
- 如图，我们把任何一个元素都看成是摆在页面上的一个盒子；
- content部分是盒子中内容的宽高；
- border部分是盒子的边框；
- padding部分是内容距离边框的距离，我们称为内边距；
- margin部分是盒子边框距离相邻元素或页面边界的距离，我们称为外边距；
- 所以一个元素盒子真正在页面中占据的尺寸为：内容宽高 + 内边距 + 边框粗细 + 外边距；
demo
demos/002/盒模型.html
<!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>
/*
该元素盒子实际占用宽度
=内容宽 + 左右内边距 + 边框 + 左右外边距
=200 + 20 + 10 + 5 = 235px
该元素盒子实际占用高度
=内容高 + 上下内边距 + 边框 + 上下外边距
=100 + 20 + 10 + 5 = 135px
*/
.box {
/* 内容宽高 */
width: 200px;
height: 100px;
/* 内边距 */
padding: 20px;
/* 边框 */
border: 10px solid black;
/* 外边距 */
margin: 5px;
/* 背景色 */
background-color: red;
}
</style>
</head>
<body>
<div class="box">
哥是一个盒子
</div>
</body>
</html>
