字体属性
粗细font-weight
- 作用： 文字是否加粗
- 属性名： font-weight， 属于 font 属性的一个单一属性。
- 属性值有两种方式： 单词类型、 数字类型。
单词类型
| 属性值 | 说明 |
|---|---|
| normal | 默认值，标准字体 |
| bold | 粗体字符，b、strong标签的默认值 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
数字类型
- 100-900 之间的整百数字。
- 数字越大， 文字显示越粗。
- 其中 400 等价于 normal， 700 等价于 bold。
<style>
.normal{
font-weight: normal;
}
.bold{
font-weight: bold;
}
.bolder{
font-weight: bolder;
}
.lighter{
font-weight: lighter;
}
.abc{
font-weight: 1000;
}
</style>
</head>
<body>
<p class="normal">看看文字是否加粗显示</p>
<p class="bold">看看文字是否加粗显示</p>
<p class="bolder">看看文字是否加粗显示</p>
<p class="lighter">看看文字是否加粗显示</p>
<p class="abc">看看文字是否加粗显示</p>
</body>
字体风格font-style
- 作用： 文字是否斜体
- 属性名： font-style， 属于 font 属性的一个单一属性。
- 属性值： 单词。
属性值
| 属性值 | 说明 |
|---|---|
| normal | 正规字体，大多数标签默认值 |
| italic | 斜体，主要对英文，要求以斜体样式显示 |
| oblique | 斜体，只是将文字秦谢 |
实际应用，更多的使用italic属性值
<style>
p{
font-family: Arial;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">看一下文字是否进行斜体或倾斜显示？asdfghjkl</p>
<p class="italic">看一下文字是否进行斜体或倾斜显示？asdfghjkl</p>
<p class="oblique">看一下文字是否进行斜体或倾斜显示？asdfghjkl</p>
<i>这是 i 标签内部的文字</i>
</body>
行高line-height
- 作用： 设置的是一行文字实际占有的高度， 文字字号在行高中是垂直居中的。
- 属性名： line-height， 属于 font 属性的一个单一属性。
属性值
| 属性值 | 说明 |
|---|---|
| px像素值 | 设置的行高的具体像素点 |
| 百分比数值 | 设置的本身字号像素值的百分比 |
实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具
Fireworks软件
初始化
选中文字工具，属性选中：不消除锯齿
步骤
- 确定文字字号和字体。 使用文字工具， 书写两个与内容相同的文字， 调整字号和字体， 直到两个文字都完全重合， 就是我们需要的字号和字体。 制作时， 设置一个与内容文字颜色差异较大的字体颜色。
- 根据已知的字号和字体， 再书写上下对齐的两行文字， 调整属性面板的行高值单位为像素， 更改数值大小， 直到两行文字都对齐， 得到的就是我们需要的行高值。
字体综合font
字体、 字号、 行高、 加粗、 斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。
写法1
font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。
font: 14px "宋体";
写法2
font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔
font: 14px/28px "宋体";
写法3
如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置
font: bold italic 14px/28px "宋体";
font: italic bold 14px/28px "宋体";
文本属性
水平对齐text-align
- 作用： 设置文本水平方向的对齐。
- 在盒子中， 不论文本是单行还是多行， 都会对应方向对齐。
- 属性值： 三个方向的单词
属性值
| 属性值 | 作用 |
|---|---|
| left | 左对齐，大部分标签默认值 |
| center | 居中对齐 |
| right | 右对齐 |
text-align: left;
text-align: center;
text-align: right;
文本修饰text-decoration
作用：设置文本整体是否有线条的装饰效果
属性值
| 属性值 | 说明 |
|---|---|
| none | 没有修饰，大部分标签的默认值 |
| overline | 上划线 |
| line-through | 中划线，删除线，del标签默认值 |
| underline | 下划线，a标签的默认值 |
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
text-decoration: none;
文本缩进text-indent
作用：设置段落首行是否进行缩进
| 属性值 | 说明 |
|---|---|
| px单位 | 表示首行缩进多少个像素 |
| em单位 | 表示首行缩进多少个中文字符 |
| 百分比 | 缩进文字所在标签的父级标签的width的百分比 |
实际应用中，常用em
属性值区分正负， 正数表示向右缩进， 负数表示向左缩进
盒模型属性
常见盒模型区域
- 盒模型的属性中， 根据不同属性的效果， 可以划分区域：
- 书写元素内容区域： width+height
- 盒子可以实体化的区域： width+height+padding+border
- 盒子实际占位：width+height+padding+border+margin
盒模型图
浏览器控制台中的盒模型图
宽度width
作用： 设置可以添加元素内容的区域的宽度。
属性值
| 属性值 | 说明 |
|---|---|
| auto | 默认值，浏览器可计算出实际的宽度 |
| px | 像素值定义的宽度 |
| % | 定义参考父元素宽度width的百分比像素 |
特殊应用
- 如果一个元素不添加width 属性， 默认属性值为auto， 不同的元素浏览器会根据其特点自动计算出实际宽度， 例如 <div> 元素等独占一行的， 其 width 属性的值会自动撑满父元素的 width 区域， 如果是 <span> 元素等不需要独占一行的， 其 width属性的值是内部元素内容自动撑开的宽度。
- <body> 元素比较特殊， 不需要设置 width 属性， 宽度会自动适应浏览器窗口的宽度。
高度height
作用： 设置可以添加元素内容的区域的高度。
属性值
| 属性值 | 说明 |
|---|---|
| auto | 默认值，浏览器可计算出实际的高度 |
| px | 像素值定义的宽度 |
| % | 定义参考父元素高度height的百分比像素 |
特殊应用
如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。
内边距padding
- 作用： 设置的是元素的边框内部到宽高区域之间的距离。
- 特点： 可以去加载背景， 不能书写嵌套的内容
- 属性值： 常用px为单位的数值。
- padding 是一个复合属性， 可以根据内边距的方向不同划分为四个方向的单一属性。
单一属性
书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左
padding-top: 40px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 10px;
简写
- 有时为了化简书写， 一般习惯将四个方向的单一属性进行合写成 padding 属性。
- padding 属性值： 可以有 1-4 个值， 值之间用空格进行分隔。
- 根据四个方向属性值不同， padding 有多种值的书写表示方法。
- 根据 padding 的属性值的个数不同， 区分了四种表示法：
四值法
设置四个属性值， 分配方向上、 右、 下、 左。
padding: 10px 20px 30px 40px;
三值法
设置三个值分配给上、 左右、 下。
padding: 10px 20px 30px;
二值法
设置两个值， 分配给上下、 左右 。
padding: 10px 20px;
单值法
设置属性值只有一个， 四边的值相同。
padding: 10px;
边框border
- 作用： 设置的是内边距外面的边界区域， 作为盒子的实体化的最外层。
- 属性值： 由三个值组成， 分为线的宽度、 线的形状、 线的颜色 。
- border 属性是一个复合属性， 根据划分依据不同可以有两种单一属性的划分方式 。
border: 10px solid #f00;
属性值
线宽： border-width
- 作用： 设置边框线的宽度。
- 属性值： 常用px形式的数值， 四个方向都有边框， 属性值类似于 padding， 也有四种值的写法。
线型： border-style
作用： 设置边框的线条形状。
属性值： 形状的单词， 总体也是类似 padding 的综合属性写法。
-
属性值的单词可能性：
属性值 说明 none 无边框 solid 实线 dashed 虚线 dotted 点状，大多数浏览器显示实线 double 双线，宽度取决于border-width groove 3D凹槽，效果取决于border-color ridge 3D垄状，效果取决于border-color inset 3D内容凹陷，效果取决于border-color outset 3D内容突出，效果取决于border-color
颜色： border-color
作用： 设置边框的颜色。
属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。
border-width: 10px 20px 30px 40px;
综合写法
根据边框的方向划分
- 上边框： border-top
- 右边框： border-right
- 下边框： border-bottom
- 左边框： border-left
每个单一属性都必须与复合属性 border 一致， 设置三个属性值。
border-top: 10px solid #f00;
border-righe: 10px solid #0f0;
根据方向和类型， 进一步细分
- 类似 border-top 的单一方向属性， 也可以根据属性值类型继续进行单一属性划分。
- 单一属性写法： border-方向-类型。
- 注意： 细分时必须先写方向划分再写类型划分， 否则属性名错误。
border-top-color: #0f0;
外边距margin
- 作用： 设置的是盒子与盒子之间的距离。
- 特点： 不能渲染背景。
- 属性值： 常用 px 为单位的数值。
- 外边距的设置方式与内边距 padding 一模一样的。
单一属性
书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左
margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
简写
- 有时为了化简书写， 一般习惯将四个方向的单一属性进行合写成 margin 属性。
- margin 属性值： 可以有 1-4 个值， 值之间用空格进行分隔。
- 根据四个方向属性值不同， margin 有多种值的书写表示方法。
- 根据margin 的属性值的个数不同， 区分了四种表示法：
四值法
设置四个属性值， 分配方向上、 右、 下、 左。
margin: 10px 20px 30px 40px;
三值法
设置三个值分配给上、 左右、 下。
margin: 10px 20px 30px;
二值法
设置两个值， 分配给上下、 左右 。
margin: 10px 20px;
单值法
设置属性值只有一个， 四边的值相同。
margin: 10px;
盒模型扩展应用
清楚默认样式
大部分标签都有一个浏览器加载的默认样式， 会对布局造成一些影响。 为了避免默认样式对整体布局效果造成影响， 一定要清除默认样式。
-
盒模型属性中内外边距： 大部分容器级标签都有默认边距， 要么用标签选择器的并集方式， 要么通配符清除。
body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin: 0; padding: 0; }* { margin: 0; padding: 0; } -
在<ul> 和 <ol> 两种列表有默认的列表前缀： 清除 list--style 属性。
ul,ol { list-style: none; } -
<a> 标签的默认样式， 顺带设置页面中常用的a的公共样式： 设置 color 和 textdecoration。
a { color: #333; text-decoration: none; } -
清除默认加粗效果： 设置font-weight。
h1,h2,h3,h4,h5,h6,b,strong { font-weight: normal; }
给 <body> 标签设置整体文字样式， 让大部分后代标签全部去继承
body {
color: #333;
font-size: 14px;
font-family: Arial,"宋体";
}
height应用
高度 height 应用
- 根据不同的需求， 高度属性可以设置也可以不设置。
- 如果设置了高度： 盒子占有的高度位置就确定死了， 后面的同级元素会紧挨着加载。
- 如果不设置高度： 会根据标签内部内容高度自动撑开。
- 以 <div> 标签为例， 根据情况不同选择是否设置高度：
必须设置高度
设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。
overflow属性
设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。
| 属性值 | 说明 |
|---|---|
| visible | 默认值，可见，溢出部分显示 |
| hidden | 溢出部分隐藏 |
| scroll | 溢出部分出现滚动条 |
| auto | 自动的，没有溢出正常显示，有溢出出现滚动条 |
div {
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
}
必须不设置高度
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
div {
height: auto;
}
居中
文本水平居中
水平居中： text-align属性。
-
不论单行或多行都可以设置。
p{ text-align:center; }
文字垂直居中
-
单行文本垂直居中： 让文字行高 line-height 等于盒子高度 height。
p{ height: 200px; line-height:200px; } -
多行文本垂直居中： 让元素高度自适应或者正好等于多行文字的高度， 设置元素内边距上下值相同。
p{ padding: 20px 0; text-align:center; }
元素垂直居中
一个元素内部嵌套的子元素， 在父元素中居中。
-
垂直居中： 与多行文字类似， 让父元素高度自适应， 子元素高度自动撑开父级的高度， 再给父元素设置相同的上下边距
div{ padding: 20px 0; }
元素水平居中
针对类似 <div> 样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。
原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。
div{
margin: 0 auto;
}
父子盒模型
一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素
特殊情况： 盒模型自动内减
父子盒模型中， 只有一个子元素， 且子元素是类似 <div> 标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。
margin 塌陷现象
在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。
同级元素塌陷
上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值
父子元素塌陷
父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。
本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。
解决方法
- 同级元素： 如果两个元素垂直方向有间距， 只需要设置给一个元素， 不要进行拆分。
- 父子元素： 让两个边距不要相遇， 中间可以使用父元素 border 或 padding 将边距分隔开； 更加常用的方法， 父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
水平方向的 margin 没有塌陷现象。
标准文档流
- 标准文档流， 指的是元素排版布局过程中， 元素会默认自动从左往右， 从上往下的流式排列方式。 前面内容发生了变化， 后面的内容位置也会随着发生变化。
- HTML就是一种标准文档流文件。
- HTML中的标准文档流特点通过两种方式体现： 微观现象和元素等级。
微观现象
- 空白折叠现象。
- 文字类的元素如果排在一行会出现一种高低不齐、 底边对齐效果。
- 自动换行， 元素内一行内容写满元素的 width 时会自动进行换行。
元素等级
在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。
块级元素
大部分容器级标签包括p标签都是块级元素， 比如 <div> 、 <h1> 等。
- 块级元素可以设置宽高， 在浏览器中正常加载。
- 块级元素必须独占一行， 不能与其他任何标签并排一行。
- 块级元素如果不设置宽度， 会自动撑满父级的 width 区域； 高度不设置， 会被内容自动撑开高度。
行内元素
大部分的文本级标签， 比如 <span>、 <a>、 <b> 等。
- 行内元素不能正常加载宽度和高度属性， 其他的盒模型属性虽然能设置， 但是容易出现加载问题。
- 行内元素可以与其他的行内或行内块元素并排一行显示。
- 行内元素不论是否设置宽高， 宽度和高度都只能被内容自动撑开。
行内块元素
比如 <img>、 <input> 等。
- 行内块元素可以设置宽度和高度。
- 行内块元素可以与其他的行内或行内块并排一行显示。
- 行内块元素如果不设置宽高， 要么以原始尺寸加载要么被内容自动撑开。
- 行内块依旧具有标准流的微观性质， 例如空白折叠现象。
显示模式
显示模式 display
可以通过 display 属性更改一个标签的显示模式。
属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。
| 属性值 | 作用 |
|---|---|
| block | 以块级元素加载 |
| inline | 以行内元素加载 |
| inline-block | 以行内块元素加载 |
| none | 标签与内部内容直接隐藏，让出原有标准流位置 |
脱离标准流
display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。
浮动属性
浮动定义
浮动是一种非常重要的布局属性。
属性名： float， 漂流、 浮动的意思
-
作用： 让元素脱离标准流， 同一级的浮动的元素可以并排在一排显示
属性值 作用 left 左浮动 right 右浮动
浮动的性质
浮动的元素脱离标准流
-
标准文档流特点： 区分行块。
- 块级元素： 可以设置宽高， 必须独占一行。
- 行内元素： 不能设置宽高， 可以并排一行。
浮动的元素脱离了标准流的限制， 具备行块二象性， 浮动的元素可以设置宽高， 还可以并排一行， 而且不会有空白折叠现象， 如果元素不设置宽高， 可以被元素内容自动撑开。
浮动的元素依次贴边
- 浮动属性值： left、 right。
- 浮动方向设置不同， 进行布局时， 加载位置方向不同。
- 以 left 为例：
- 父元素宽度足够， 所有子元素会按照HTML书写顺序， 依次向左进行贴边， 父元素左边←子元素1←子元素2← 子元素3←子元素4。
浮动效果
- 浮动后： 并排一排， 父元素宽度足够。
- 父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。
- 如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。
- 如果贴边的这个子元素4宽度小于子元素2， 子元素2的高度低于子元素1和子元素3，形成一个凹陷， 子元素4会受前面子元素3高度影响， 不会出现钻空现象。
- 如果子元素1后面的距离也放不下子元素4， 子元素4最终会贴到父元素左边， 如果子元素4的宽度超过了父元素， 只会出现溢出现象。
- 右浮动与左浮动贴边效果是一致的， 只是贴边方向不同。 按照 HTML 书写顺序依次向右向上一个元素贴边， 第一个元素贴父元素的右边。
浮动的元素没有margin塌陷
margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。
浮动的元素让出标准流位置
- 元素浮动之后， 脱离了标准流， 会将原来占有的标准流位置让给后面的一个同级元素。
- 在 IE6 、 7浏览器中， 有兼容问题。
- 由于浏览器中有兼容性问题， 不会使用这种属性制作压盖效果， 真正的压盖效果使用后期学习的定位制作。
- 如果没有特殊需求， 不允许一个父元素中的子元素有的浮动有的不浮动， 同级元素中有一个浮动其他的也要浮动 。
字围现象
与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果
浮动的问题
- 标准流中的元素， 不设置高度的情况下， 都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动， 浮动的子元素是撑不高标准流父亲的。
- 父元素没有高度， 会影响后面元素的标准流位置， 如果浮动的子元素足够高时， 有可能影响到后面浮动元素的贴边。
清除浮动方法
清除浮动一： height
给标准流的父元素强制给一个合适的高度
- 解决： 父元素有了高度， 前面的浮动不能影响后面元素的标准流位置和贴边。
- 问题： 父元素高度不是自适应， 一旦子元素高度变化， 问题可能再次出现。
清除浮动二： clear属性
作用： 清除标签元素自身受到的前面的浮动元素的影响。
| 属性值 | 作用 |
|---|---|
| left | 清除前面左浮动带来的影响 |
| right | 清除前面右浮动带来的影响 |
| both | 清除前面所有浮动带来的影响 |
给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。
- 解决： 浮动元素影响后面元素标准流位置和贴边。
- 问题： 父元素不能高度自适应， 两个父元素之间如果有 margin 效果不正确。
清除浮动三： 隔墙法
-
外墙法： 在两个大的父盒子之间， 添加一个空的 <div> 标签， 标签上带有 clear：both 属性。
- 解决： 浮动影响后面元素标准流位置和贴边， 模拟父元素间的距离。
- 问题： 父元素没有高度自适应。
-
内墙法： 在父元素内部， 所有的浮动子元素后面添加一个空的 <div> 元素， 标签高度为 0， 添加 clear 属性。
- 解决： 父元素高度自适应， 浮动影响后面的元素位置和贴边。
- 缺点： 浮动是 css 样式属性带来的问题， 内墙法使用 HTML 结构去辅助解决问题，如果页面中浮动元素很多， 需要添加多个没有语义的空标签， 造成 HTML 结构的冗余。
清除浮动四： 伪类
本质是使用伪类方法利用css代码书写一堵内墙。
伪类选择器： 通过选中的标签添加伪类， 去选中标签的某个状态或位置。
:after： 这个伪类表示选中的是某个标签内部的最后的位置。
书写方法： 前面必须加普通的选择器， 后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面， 一般给需要清除浮动的父盒子设置一个clearfix的类名。
解决： 父元素高度自适应， 浮动影响后面的元素位置和贴边。
div:after {
content: "1";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
清除浮动五： 溢出隐藏
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性， 可以解决浮动的所有问题。
父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。
总结
- 如果父元素高度是固定的， 建议使用 height 属性解决。
- 如果父元素高度需要自适应， 建议使用 overflow 属性解决浮动问题。
伪类选择器
概念
- 伪类和类之间有一定的相似之处， 也存在明显的区别。
- 普通的类： 必须给标签设置对应的 class 属性值， 才能选中标签， 而且类选择器后面添加的属性， 会立即加载到浏览器之上。
- 伪类： 不需要给标签添加任何属性， 伪类名都是语法提前规定好的， 书写时伪类必须搭配其他选择器使用， 伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为， 伪类的样式才会立即加载。
- 伪类选择器的权重与普通的类选择器相同。
- 伪类选择器写法： 前面是普通的选择器， 后面紧跟:伪类名。
<a> 标签的伪类
<a> 标签可以根据用户行为不同， 划分为四种状态， 通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。
| 伪类名 | 作用 |
|---|---|
| link | 访问前状态 |
| visited | 访问后状态 |
| hover | 鼠标悬浮状态 |
| active | 鼠标点击状态 |
<a> 标签的伪类书写顺序
- <a> 标签上可能会同时触发 2 到 3 个状态， 每个状态的属性都会进行加载， 相同的属性之间会发生层叠。
- 伪类的权重是相同的， 只能根据书写顺序， 后写的层叠先写的， 所以伪类书写顺序非常重要。
- 要想让每个伪类的状态正常加载， 书写顺序必须是： 访问前link、 访问后visited、鼠标移上hover、 鼠标点击active。
- 为了方便记忆， 利用爱恨准则： love hate。
<a> 标签的伪类实际应用
一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。
更加常用的一种设置方式如下：
<a> 标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 <a> 默认显示样式的属性， 包括盒模型、 文字等。
a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。
背景属性
背景颜色 background-color
- 属性名： background-color
- 作用： 在盒子区域添加背景颜色的修饰。
- 加载区域： 在 border 及以内加载背景颜色。
- 属性值： 颜色名、 颜色值。
背景图片 background-image
- 属性名： background-image
- 作用： 给盒子添加图片的背景修饰。
- 加载范围： 默认的加载到边框及以内部分。 后期如果图片不重复加载， 加载从border 以内开始。
- 属性值： url(图片路径)
- url： uniform resource locator， 统一资源定位符， 小括号内部书写查找图片的路径。
背景重复 background-repeat
- 属性名： background-repeat
- 作用： 设置添加的背景图是否要在盒子中重复进行加载。
- 根据属性值不同， 有四种重复加载方式。
| 属性值 | 作用 |
|---|---|
| repeat | 重复加载填满 |
| no-repeat | 不重复，只加载一次 |
| repeat-x | 水平重复 |
| repeat-y | 垂直重复 |
背景定位 background-position
- 属性名： background-position
- 作用： 主要用于设置不重复的图片在背景区域的加载开始位置。
属性值： 分为三种写法， 单词表示法、 像素表示法、 百分比表示法。 不论哪种写法， - 属性值都有两个， 值之间用空格分隔。
- 第一个属性值： 表示背景图片在水平方向的位置。
- 第二个属性值： 表示背景图片在垂直方向的位置。
单词表示法
属性值都是使用代表方向的单词进行书写。
- 水平方向可选单词： left、 center、 right
- 垂直方向可选单词： top、 center、 bottom
- 单词表示图片与盒子背景区域进行对应方向的对齐。
像素表示法
使用像素值作为背景定位的属性值。
- 第一个属性值： 像素是几， 表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
- 第二个属性值： 像素是几， 表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离。
百分比表示法
百分比表示法使用百分比数字作为属性值。
100%代表的数值：
- 水平方向， 等价于盒子的border以内的背景区域宽度减去图片的宽度。
- 垂直方向， 等价于盒子的border以内的背景区域高度减去图片的高度。
背景附着 background-attachment
属性名： background-attachment
-
作用： 设置的是背景图片是否要随着页面或者盒子的滚动而滚动。
属性值 说明 scroll 滚动的，图片和页面一起滚动 fixed 固定的，页面滚动，图片不动
综合写法 background
background 属性可以将五个单一属性的值进行合写。
属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。
background: url(img/01.jpg) no-repeat center top scroll red;
注意事项
- 如果属性值没有设置完全， 其他没有设置的单一属性会按照默认值加载。
- 如果想去层叠综合属性中的一部分， 其他的属性保持不变， 最好使用单一属性写法进行层叠。
背景应用
替换插入图
在<h1> 标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 图片、 最大的标题等。
另外 <h1> 内部的文字， 可以帮助提高 SEO 搜索排名。
在设置的是 logo 图片时， 如果使用插入图， 就不能书写搜索关键字。
背景图替换插入图方法
如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。
文字隐藏方法
- 将字号设置为 0。 IE8 及以上或高版本浏览器可以隐藏文字， 但是 IE7 及以下有兼容问题。
- 可以设置给 <a> 标签一个 text-indent属性， 属性值为负的很大的值， 文字会走到盒子外部， 直接再设置溢出隐藏属性， 将溢出文字隐藏。
padding 区域背景图
在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，
背景区域应该使用 padding 挤出位置。
四个方向的 padding 都可能用于添加背景图。
精灵图技术
当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。
然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。
css 精灵
CSS 精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。
通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。
css 精灵的技术依据
- 将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。
- 利用背景定位技术， 将精灵图的每个小图片加载到对应的标签上
制作精灵图的注意事项
- 精灵图上放的都是小的装饰性质的背景图片， 插入图片不能往上放。
- 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
- 精灵图可以横向摆放也可以纵向摆放， 但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时， 不能出现多余内容。
- 在精灵图的最底端， 尽量留一点空白， 方便以后添加其他精灵图。
CSS3新增背景属性
背景半透明
CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。
rgba 模式： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。
书写方式： rgba(红色， 绿色， 蓝色， 不透明度)
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。
background-color: rgba(255,0,0,0.5);
背景缩放 background-size
通过 background-size 设置背景图片的尺寸， 就像我们设置 <img> 的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。
| 属性值 | 说明 |
|---|---|
| px | 值 1-2个像素值， 只设置1个值， 垂直方向等比例拉伸； 设置2个值， 按照设置值加载。 |
| 百分比 | 同像素值设置方法相同， 设置百分比时， 数值参照盒子的宽、 高属性 |
| cover | 自动调整缩放比例， 把背景图像扩展至足够大， 以使背景图像完全覆盖背景区域。 如有溢出部分则会被隐藏。 |
| contain | 自动调整缩放比例， 把图像图像扩展至最大尺寸， 保证图片始终完整显示在背景区域。 |
多背景
CSS3 中规定， 一个盒子上， 可以添加多个背景图片。
background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。
注意： 背景加载时， 先写的背景压盖后写的背景图片。
定位属性
定位属性 position
属性名： position。
作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。
| 属性值 | 作用 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
偏移量属性
定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。
水平方向： left、 right。
垂直方向： top、 bottom。
属性值： 常用 px 为单位的数值， 或者百分比。
相对定位
- 属性值： relative， 相对的意思。
- 参考元素： 标签加载的原始位置。
- 必须搭配偏移量属性才能发生位置移动。
- 性质： 相对定位的元素不脱离标签的原始状态（标准流、 浮动） ， 不会让出原来占有的位置。元素显示效果上， 原位留坑， 形影分离。
- 注意： 偏移量属性的值是区分正负的。
- 正数： 表示偏移方向与属性名方向相反。
- 负数： 表示偏移方向与属性名方向相同。
position: relative;
right: 100px;
bottom: 100px;
绝对定位
子绝父相、 子绝父绝、 子绝父固
属性值： absolute， 绝对的意思。
参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考<body>。必须搭配偏移量属性才会发生位置移动。
position: absolute;
bottom: 100px;
right: 100px;
绝对定位的性质
性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。
注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。
注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。
<body> 为参考元素的参考点
以 <body> 为参考元素时， 参考点的确定与偏移量方向有关
第一， 如果有 top 参与的定位， 参考点就是 <body> 页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二， 如果有 bottom 参与的绝对定位， 参考点是 <body> 页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中， 如果以 <body> 为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 <body> 作为参考元素。
祖先级为参考元素
如果祖先级中有定位的元素， 就不会去参考 <body> 。
参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。
祖先元素参考点
如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。
- left、 top： 参考点是祖先的 border 以内的左上顶点， 对比点是盒子自身的左上角。
- right、 top： 参考点是祖先的 border 以内的右上顶点， 对比点是盒子自身的右上角。
- left、 bottom： 参考点是祖先的 border 以内的左下顶点， 对比点是盒子自身的左下角。
- right、 bottom： 参考点是祖先的 border 以内的右下顶点， 对比点是盒子自身的右下角。
固定定位
属性值： fixed， 固定的意思。
参考元素： 浏览器窗口。
参考点： 浏览器窗口的四个顶点。 跟偏移量组合方向有关。
由于浏览器窗口的四个顶点位置不会发生变化， 会导致固定定位的元素会始终显示在定位位置。
性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。 固定定位的元素会始终显示在浏览器窗口上。
position: fixed; bottom: 100px; right: 100px;
定位的应用
压盖效果
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是绝对定位制作压盖。
居中
- 在居中的方向使用一个偏移量属性， 例如 left， 设置属性值为 50%。 导致图片的左顶点移动到参考元素的中心位置
- 给绝对定位的子盒子设置一个同方向的 margin， 例如 margin-left， 属性值为负的自身宽度的一半。
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 100px 0px;
}
.box{
position: relative;
width: 500px;
height: 500px;
border: 10px solid #f00;
background-color: pink;
margin:auto;
}
p{
position: absolute;
top: 200px;
left: 50%;
width: 100px;
margin-left: -50px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
</body>
压盖顺序
默认压盖顺序
定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。
如果都是定位的元素， 在 HTML 中后写定位压盖先写的定位。
自定义压盖顺序
更改定位的元素的压盖顺序， 设置一个 z-index 属性。
属性值： 数字。
自定义压盖顺序注意事项
- 属性值大的会压盖属性值小的， 设置z-index属性的会压盖没有设置的。
- 如果属性值相同， 比较HTML书写顺序， 后写的压盖先写的。
- z-index属性只能设置给定位的元素才会生效， 如果给没有定位的元素设置， 不会生效。
- 父子盒模型中， 如果父子盒子都进行了定位， 与其他的父子级有压盖的部分：
- 父级盒子： 如果不设置z-index， 后写的压盖先写的； 如果设置了z-index， 值大的压盖值小的。
- 子级盒子： 如果父级没有设置z-index属性， 子级z-index大的会压盖小的； 如果父级设置了z-index值， 无论子级值是多少， 都是父级的值大的子级压盖父级值小的子级， 俗称“从父效应” 。
