传送门：
继承、层叠和特殊性
继承
CSS 样式不仅作用于某一个 HTML 标签元素，还对这个标签元素的所有子标签元素都起作用。
有一些样式是不具备继承特性的，比如设置边框：
p{
border :1px solid red;
}
特殊性
为同一个元素设置不同的样式，最终起作用的样式由权值来确定。
- id 选择器: 100
- 类选择器: 10
- 标签选择器: 1
而来自继承的样式所具有的权值可等价于 0.1。
在计算权值的时候，使用加法叠加就可以了：
#footer .note p {
color: yellow;
}
100 + 10 + 1 = 111
重要性
对于某种特殊情况，需要将某个样式设置为最高权值：
p {
color: red !important;
}
一定要写在分号前
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式 < !important
文字排版
- font-family:"Microsoft Yahei" 字体
- font-size: 12px 字体大小
- font-weight:bold：设置为粗体样式
- font-style:italic：设置为斜体样式
- text-decoration:underline：文字设置下划线
- text-decoration:line-through：删除线
- text-indent:2em：缩进
注意：2em的意思就是文字的2倍大小。
- line-height:2em：行高
- word-spacing:50px：单词间距
- letter-spacing:20px: 字母间距
- text-align:center 水平居中对齐
盒模型
在 CSS 样式中，HTML 标签元素大体被分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块级元素。
块状元素 (block)
诸如 <div>、 <p>、<h1>、<form>、<ul> 和 <li> 就是块状元素。我们可以为某个样式添加属性，以使其成为块状元素：
span{
display: block;
}
- 块状元素的首尾会空一行
- 宽度默认等于父容器
内联元素 (inline)
诸如 <span>、<a>、<label>、 <strong> 和 <em> 就是内联元素。我们可以为某个样式添加属性，以使其成为内联元素：
span{
display: inline;
}
- 高度、宽度、边距不可设置
- 宽度等于内容的宽
内联块状元素 (inline-block)
诸如 <img>、<input> 就是内联块状元素。我们可以为某个样式添加属性，以使其成为内联块状元素：
span{
display: inline-block;
}
- 既具备内联元素内容都在一行内的特点，又具备块状元素宽、高、边距离可设置的特点。
盒子模型
下面是盒子模型常用的属性：
- padding：内边距
- margin：外边距
- border：边框
我们可以通过在这些属性的名字后边添加 属性 - 下一级属性 的方法来指定某一更加具体的属性，如：
- border-style: dashed（虚线）| dotted（点线）| solid（实线）;
- border-color: #888;
- border-width: 12px | thin | medium | thick
甚至指定某一侧的样式：
border-top: 1px solid red;
padding-right: 10px;
margin-left: 100px;
也可以按照 上、右、下、左 的方式来简单定义：
div{padding:20px 10px 15px 30px;}
盒子模型
在盒子模型理论中，宽度指的是 margin-left + border-left + padding-left + padding-right + border-right + margin-right ，高度同理。
布局模型
流动模型
-
块状元素会按照自上而下的顺序排列 -
内联元素会按照从左到右的顺序排列
浮动模型
浮动模型的目的是让 块状元素 呈现水平排列。
所有元素默认都是不可浮动的，但我们可以手动设置为浮动：
div {
width: 200px;
height: 200px;
border: 2px red solid;
// 设置浮动模型
float: left;
}
层模型
1. 绝对定位 (position:absolute)
在样式中添加代码以进行绝对定位：
div{
width: 200px;
height: 200px;
border: 2px red solid;
// 设置绝对定位
position: absolute;
left: 100px;
top: 50px;
}
在绝对定位中，元素的位置是相对于 [距离最近的] [具备定位属性的] 父元素而言的。如果没有找到这样的父元素，那么就会以 body 元素作为定位参考。举个例子：
首先定义 a、b 两个方框样式：
a {
width: 100px;
height: 100px;
border: 3px red solid;
position:absolute;
left: 100px;
top: 100px;
}
b {
width: 50px;
height: 50px;
border: 3px blue solid;
position:absolute;
left: 125px;
top: 125px;
}
然后这样使用它们：
<body>
<a></a><b></b>
</body>
看起来是这样：
如果把元素 b 改为 a 元素的子元素：
<body>
<a><b></b></a>
</body>
看起来就是这样：
2. 相对定位(position:relative)
相对定位指的是相对于原本的位置，可以这么理解 ：
元素在页面的实际位置 = 在页面正常文档流中的位置 + 偏移位置
注意：相对定位之后，正常文档流中的位置继续被占用着。
3. 固定定位(position:fixed)
固定定位的参考系就是整个浏览器的窗口。
固定定位的元素位置不会随滚动条滚动而变化，不会受文档流的影响。（比如网页小广告）
网友评论