一:Chrome 调试工具 – 查看 CSS 属性
首先打开浏览器,接着有两种方式可以打开 Chrome 调试工具
- 直接按 F12 键
- 鼠标右键页面 => 检查元素
点开检查即可
标签页含义:
- elements 查看标签结构
- console 查看控制台
- source 查看源码+断点调试
- network 查看前后端交互过程
- application 查看浏览器提供的一些扩展功能(本地存储等)
- Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究
1.1 elements 标签页使用
- ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
- 使用 左上角 箭头选中元素
- 右侧可以查看当前元素的属性, 包括引入的类.
- 右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色. 例如字体大小, 可以使用方向键来微调数值.
- 此处的修改不会影响代码, 刷新就还原了~
- 如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
二: 元素的显示模式
CSS显示模式指 HTML 标签以什么样的模式显示在网页上,根据标签的显示模式,可以选择更合适的标签来布局网页
一般将 HTML标签分为块级标签、行内标签和行内块标签。
2.1 块元素(block)
特征:
- 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的。
- 默认宽度:撑满父元素。 (和父元素一样宽)
- 默认高度:由内容撑开。
- 可以通过 CSS 设置宽高。
- 是一个容器(盒子), 里面可以放行内和块级元素.
2.2 行内元素(inline)
特征:
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列。
- 默认宽度:由内容撑开。
- 默认高度:由内容撑开。
- 无法通过 CSS 设置宽高。
- 行内元素只能容纳行内元素, 不能放块级元素
2.3 行内块元素(inline-block)
特征:
- 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列。
- 默认宽度:由内容撑开。
- 默认高度:由内容撑开。
- 可以通过 CSS 设置宽高。
2.4 改变显示模式
通过 CSS 中的 display 属性可以修改元素的默认显示模式,常用值如下:
值 | 描述 |
---|---|
none | 元素会被隐藏 |
block | 元素将作为块级元素显示 |
inline | 元素将作为内联元素显示 |
inline-block | 元素将作为行内块元素显示 |
2.5 总结各元素的显示模式
2.5.1 块元素(block)
- 主体结构标签: < html > 、 < body >
- 排版标签: < h1 > ~ < h6 > 、 < hr > 、 < p > 、 < pre > 、 < div >
- 列表标签: < ul > 、 < ol > 、 < li > 、 < dl > 、 < dt > 、 < dd >
- 表格相关标签: < table > 、 < tbody > 、 < thead > 、 < foot > 、 < tr > 、< caption >
- < form > 与 < option >
2.5.2 行内元素(inline)
- 文本标签: < br > 、 < em > 、 < strong > 、 < sup > 、 < sub > 、 < del > 、 < ins >
- < a > 与 < label >
2.5.3 行内块元素(inline-block)
- 图片: < img >
- 单元格: 、 < th >
- 表单控件: < input > 、 < textarea > 、 < select > 、 < button >
- 框架标签: < iframe >
三: 盒模型
CSS 会把所有的 HTML 元素都看成一个盒子,所有的样式也都是基于这个盒子,这个盒子由这几个部分构成
- margin(外边距): 盒子与外界的距离。
- border(边框): 盒子的边框。
- padding(内边距): 紧贴内容的补白区域。
- content(内容):元素中的文本或后代元素都是它的内容。
注意:外边距 margin 不会影响盒子的大小,但会影响盒子的位置。
3.1 边框
基础属性:
- 粗细: border-width
- 样式: border-style, solid 实线边框 dashed 虚线边框 dotted 点线边框( 默认没边框.)
- 颜色: border-color
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 250px;
border-width: 10px;
border-style: solid;
border-color: green;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>
边框属性支持简写, 没有顺序要求:
border: 1px solid red;
可以改四个方向的任意边框.
border-top/bottom/left/right
注意:边框会撑大盒子
可以看到, width, height 是 500*250, 而最终整个盒子大小是 520 * 270. 边框10个像素相当于扩大了大小.
通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.
* {
box-sizing: border-box;
}
box-sizing: border-box;表示盒模型中的宽度和高度包括了边框和内边距的计算
3.2 盒子内容区(content)
属性名 | 功能 | 属性值 |
---|---|---|
width | 设置内容区域宽度 | 长度 |
max-width | 设置内容区域的最大宽度 | 长度 |
min-width | 设置内容区域的最小宽度 | 长度 |
height | 设置内容区域的高度 | 长度 |
max-height | 设置内容区域的最大高度 | 长度 |
min-height | 设置内容区域的最小高度 | 长度 |
3.3 盒子内边距(padding)
属性名 | 功能 | 属性值 |
---|---|---|
padding-top | 上内边距 | 长度 |
padding-right | 右内边距 | 长度 |
padding-bottom | 下内边距 | 长度 |
padding-left | 左内边距 | 长度 |
padding | 复合属性 | 长度,可以设置 1 ~ 4 个值 |
padding 复合属性的使用规则:
- padding: 10px; 四个方向内边距都是 10px 。
- padding: 10px 20px; 上下 10px ,左右 20px 。(上下、左右)
- padding: 10px 20px 30px; 上 10px ,左右 20px ,下 30px 。(上、左右、下)
- padding: 10px 20px 30px 40px; 上 10px ,右 20px ,下 30px ,左 40px 。(上、右、下、左)
注意:
- padding 的值不能为负数。
- 行内元素 的 左右内边距是没问题的,上下内边距不能完美的设置。
- 块级元素、行内块元素,四个方向内边距都可以完美设置。
3.4 盒子边框(border)
CSS属性名 | 功能 | 属性值 |
---|---|---|
border-style | 边框线风格 复合了四个方向的边框风格 | none:默认值 solid:实线 dashed:虚线 dotted:点线 double:双实线 |
border-width | 边框线宽度 复合了四个方向的边框宽度 | 长度,默认 3px |
border-color | 边框线颜色 复合了四个方向的边框颜色 | 颜色,默认黑色 |
border | 复合属性 | 值没有顺序和数量要求 |
border-left
border-left-style
border-left-width
border-left-color
border-right
border-right-style
border-right-width
border-right-color
border-top
border-top-style
border-top-width
border-top-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
我们可以通过这种方式分别设置各个方向的边框 (border-style 、 border-width 、 border-color 其实也是复合属性。)
3.5 盒子外边距(margin)
CSS 属性名 | 功能 | 属性值 |
---|---|---|
margin-left | 左外边距 | CSS 中的长度值 |
margin-right | 右外边距 | CSS 中的长度值 |
margin-top | 上外边距 | CSS 中的长度值 |
margin-bottom | 下外边距 | CSS 中的长度值 |
margin | 复合属性,可以写 1~4 个值,规律同 padding (顺时针) | CSS 中的长度值 |
注意:
- 子元素的 margin ,是参考父元素的 content 计算的。(因为是父亲的 content 中承装着子元素)
- 块级元素、行内块元素,均可以完美地设置四个方向的 margin ;
- 但行内元素,左右margin 可以完美设置,上下 margin 设置无效。
- margin 的值也可以是 auto ,如果给一个 块级元素 设置左右 margin 都为 auto ,该块级元素会在父元素中水平居中。
三种写法均可:
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;/*将上下外边距设为0,左右外边距自动居中。*/
- margin 的值可以是负值。
切记:
- margin: auto 是给块级元素用的.
- text-align: center 是让行内元素或者行内块元素居中的.
3.6 关于默认宽度
所谓的默认宽度,就是不设置 width 属性时,元素所呈现出来的宽度。
-
总宽度 = 父的 content — 自身的左右 margin 。
-
内容区的宽度 = 父的 content — 自身的左右 margin — 自身的左右 border — 自身的左右padding 。
3.7 margin 塌陷问题
什么是 margin 塌陷?
- 第一个子元素的上 margin 会作用在父元素上,最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷?
- 方案一: 给父元素设置不为 0 的 padding 。
- 方案二: 给父元素设置宽度不为 0 的 border 。
- 方案三:给父元素设置 css 样式 overflow:hidden
3.7 margin 合并问题
什么是 margin 合并?
- 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并,取一个最大的值,而不是相加。
如何解决 margin 塌陷?
- 无需解决,布局的时候上下的兄弟元素,只给一个设置上下外边距就可以了。
3.8 处理内容溢出
CSS 属性名 | 功能 | 属性值 |
---|---|---|
overflow | 溢出内容的处理方式 | visible:显示,默认值 hidden:隐藏 scroll:显示滚动条,不论内容是否溢出 auto:自动显示滚动条,内容不溢出不显示 |
overflow-x | 水平方向溢出内容的处理方式 | 同 overflow |
overflow-y | 垂直方向溢出内容的处理方式 | 同 overflow |
注意:
- overflow-x 、 overflow-y 不能一个是 hidden ,一个是 visible ,是实验性属性,不建议使用。
3.9 隐藏元素的方式
- 方式一:visibility 属性
visibility 属性默认值是 show ,如果设置为 hidden ,元素会隐藏。
元素看不见了,但还占有原来的位置(元素的大小依然保持)。
- 方式二: display 属性
设置 display:none 就可以让元素隐藏。
彻底地隐藏,不但看不见,也不占用任何位置,没有大小宽高。
四:样式的继承
有些样式会继承,元素如果本身设置了某个样式,就使用本身设置的样式;
但如果本身没有设置某个样式,会从父元素开始一级一级继承(优先继承离得近的祖先元素)。
会继承的 css 属性:
- 字体属性、文本属性(除了vertical-align)、文字颜色 等。
不会继承的 css 属性:
- 边框、背景、内边距、外边距、宽高、溢出方式 等。
一个规律:能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的。
4.1 默认样式
元素一般都些默认的样式,例如:
- < a > 元素:下划线、字体颜色、鼠标小手。
- < h1 > ~ < h6 > 元素: 文字加粗、文字大小、上下外边距。
- < p > 元素:上下外边距
- < ul > 、 ol 元素:左内边距
- body 元素: 8px 外边距(4个方向)
优先级:元素的默认样式 > 继承的样式,所以如果要重置元素的默认样式,选择器一定要直接选择器到该元素。
五:布局小技巧
- 行内元素、行内块元素,可以被父元素当做文本处理。
即:可以像处理文本对齐一样,去处理:行内、行内块在父元素中的对齐。
例如: text-align 、 line-height 、 text-indent 等。
- 如何让子元素,在父亲中 水平居中:
若子元素为块元素,给父元素加上: margin:0 auto; 。
若子元素为行内元素、行内块元素,给父元素加上: text-align:center 。
- 如何让子元素,在父亲中 垂直居中:
若子元素为块元素,给子元素加上: margin-top ,值为:(父元素 content -子元素盒子总高) / 2。
若子元素为行内元素、行内块元素:让父元素的 height = line-height ,每个子元素都加上: vertical-align:middle; 。(若想绝对垂直居中,父元素 font-size 设置为 0 。)
5.1 元素之间的空白问题
产生的原因:
- 行内元素、行内块元素,彼此之间的换行会被浏览器解析为一个空白字符。
解决方案:
- 方案一: 去掉换行和空格(不推荐)。
- 方案二: 给父元素设置 font-size:0 ,再给需要显示文字的元素,单独设置字体大小(推荐)。
5.2 行内块的幽灵空白问题
产生原因:
- 行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。
解决方案:
- 方案一: 给行内块设置 vertical ,值不为 baseline 即可,设置为 middel 、 bottom 、top 均可。
- 方案二: 若父元素中只有一个行内块元素,设置图片为 display:block 。(块元素独占一行)
- 方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独通过 span 选择文本设置 font-size
六:浮动布局
在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。
元素浮动后的特点:
- 脱离文档流。(消极影响)
- 不管浮动前是什么元素,浮动后:默认宽与高都是被内容撑开(尽可能小),但是我们可以设置宽高。
- 不会独占一行,可以与其他元素共用一行。
- 不会 margin 合并,也不会 margin 塌陷,能够完美的设置四个方向的 margin 和 padding 。
6.1 浮动相关属性
属性名称 | 功能 | 属性值 |
---|---|---|
float | 设置浮动 | left: 设置左浮动 right: 设置右浮动 none: 不浮动,默认值 |
clear | 清除浮动 | left: 清除前面左浮动的影响 right: 清除前面右浮动的影响 both: 清除前面左右浮动的影响 |
注意:浮动元素就别清除浮动的影响了
6.2浮动的作用
元素浮动后的影响:
- 对兄弟元素的影响: 后面的兄弟元素,会占据浮动元素之前的位置,对前面的兄弟无影响。
- 对父元素的影响: 不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素。
6.3 解决浮动产生的影响(清除浮动)
浮动产生的影响:
- 父容器高度塌陷
- 浮动元素的兄弟元素被覆盖
解决方案:
-
方案一: 给父元素指定高度。(只解决了父容器高度塌陷)
-
方案二: 给父元素也设置浮动,带来其他影响。(只解决了父容器高度塌陷)
-
方案三: 给父元素设置 overflow:hidden 。(处理内容溢出,只解决了父容器高度塌陷)
-
方案四: 在所有浮动元素的最后面,添加一个空白块级元素,并给该块级元素设置 clear:both (消除前面所有兄弟左右浮动产生的影响)
-
方案五: 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同。===> 推荐使用
布局中的一个原则:设置浮动的时候,兄弟元素要么全都浮动,要么全都不浮动。
七:弹性布局
7.1伸缩盒模型
- 2009 年, W3C 提出了一种新的盒子模型 —— Flexible Box (伸缩盒模型,又称:弹性盒子)。
- 它可以轻松的控制:元素分布方式、元素对齐方式、元素视觉顺序 …
- 截止目前,除了在部分 IE 浏览器不支持,其他浏览器均已全部支持。
- 伸缩盒模型的出现,逐渐演变出了一套新的布局方案 —— flex 布局。
7.2 伸缩容器、伸缩项目
- 伸缩容器: 开启了 flex 的元素(给元素设置了 display:flex),就是伸缩容器。
- 伸缩项目:伸缩容器所有子元素(不是孙子元素)这个容器自动成为了伸缩项目。
注意:
- 一个元素可以同时是:伸缩容器、伸缩项目。
- 无论原来是哪种元素(块、行内块、行内),一旦成为了伸缩项目,全都会“块状化”。
7.3 主轴与侧轴
- 主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右(左边是起点,右边是终点)。
- 侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下(上边是起点,下边是终点)。
7.4 主轴方向
- 属性名: flex-direction
常用值如下:
- row :主轴方向水平从左到右 —— 默认值
- row-reverse :主轴方向水平从右到左。
- column :主轴方向垂直从上到下。
- column-reverse :主轴方向垂直从下到上。
注意:改变了主轴的方向,侧轴方向也随之改变。
7.5 主轴换行方式
- 属性名: flex-wrap
常用值如下:
- nowrap :默认值,不换行。
2. wrap :自动换行,伸缩容器不够自动换行。
- wrap-reverse :反向换行。
7.6 flex-flow
flex-flow 是一个复合属性,复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要求。
flex-flow: row wrap;
7.7 主轴对齐方式
- 属性名: justify-content
常用值如下:
- flex-start :主轴起点对齐。—— 默认值
- flex-end :主轴终点对齐。
- center :居中对齐
- space-between :均匀分布,两端对齐(最常用)。
- space-around :均匀分布,两端距离是中间距离的一半。
- space-evenly :均匀分布,两端距离与中间距离一致。
7.8 侧轴对齐方式
7.8.1 一行的情况
- 所需属性: align-items
常用值如下:
- flex-start :侧轴的起点对齐。
- flex-end :侧轴的终点对齐。
- center :侧轴的中点对齐。
- baseline : 伸缩项目的第一行文字的基线对齐。
- stretch :如果伸缩项目未设置高度,将占满整个容器的高度。—— (默认值)
7.8.2 多行的情况
- 所需属性: align-content
常用值如下:
- flex-start :与侧轴的起点对齐。
- flex-end :与侧轴的终点对齐。
- center :与侧轴的中点对齐。
- space-between :与侧轴两端对齐,中间平均分布。
- space-around :伸缩项目间的距离相等,比距边缘大一倍。
- space-evenly : 在侧轴上完全平分。
- stretch :占满整个侧轴。—— 默认值
7.9 flex 实现水平垂直居中
方法一:父容器开启 flex 布局,随后使用 justify-content 和 align-items 实现水平垂直居中
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}
方法二:父容器开启 flex 布局,随后子元素 margin: auto
.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}
7.10 伸缩性
7.10.1 flex-basis
flex-basis 设置的是主轴方向的基准长度,会让宽度或高度失效。(主轴横向:宽度失效;主轴纵向:高度失效)
作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值 auto ,即:伸缩项目的宽或高。
7.10.2 flex-grow(伸)
flex-grow 定义伸缩项目的放大比例,默认为 0 ,即:纵使主轴存在剩余空间,也不拉伸(放大)。
规则:
- 若所有伸缩项目的 flex-grow 值都为 1 ,则:它们将等分剩余空间(如果有空间的话)。
- 若三个伸缩项目的 flex-grow 值分别为: 1 、 2 、 3 ,则:分别瓜分到: 1/6 、 2/6 、3/6 的空间。
7.10.3 flex-shrink(缩)
flex-shrink 定义了项目的压缩比例,默认为 1 ,即:如果空间不足,该项目将会缩小。
收缩项目的计算,略微复杂一点,我们拿一个场景举例:
三个收缩项目,宽度分别为: 200px 、 300px 、 200px ,它们的 flex-shrink 值分别为: 1 、 2 、 3
若想刚好容纳下三个项目,需要总宽度为 700px ,但目前容器只有 400px ,还差 300px,所以每个人都要收缩一下才可以放下,具体收缩的值,这样计算:
- 计算分母: (200×1) + (300×2) + (200×3) = 1400
- 计算比例:
项目一: (200×1) / 1400 = 比例值1
项目二: (300×2) / 1400 = 比例值2
项目三: (200×3) / 1400 = 比例值3
- 计算最终收缩大小:
项目一需要收缩: 比例值1 × 300
项目二需要收缩: 比例值2 × 300
项目三需要收缩: 比例值3 × 300
7.11 flex复合属性
flex 是复合属性,复合了: flex-grow 、 flex-shrink 、 flex-basis 三个属性,默认值为 0 1auto 。
- 如果写 flex:1 1 auto ,则可简写为: flex:auto
- 如果写 flex:1 1 0 ,则可简写为: flex:1
- 如果写 flex:0 0 auto ,则可简写为: flex:none
- 如果写flex:0 1 auto ,则可简写为: flex:0 auto —— 即 flex 初始值。
7.12 项目排序
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0 。
7.13 单独对齐
- 通过 align-self 属性,可以单独调整某个伸缩项目的对齐方式
- 默认值为 auto ,表示继承父元素的 align-items 属性。
八:定位
在CSS中,定位是指通过设置元素的位置属性来控制元素在页面中的显示位置。下面我们讲解常用的 4 种定位
8.1 相对定位
相对定位即通过相对于元素在文档流中的原始位置进行定位。
如何设置相对定位?
- 给元素设置 position:relative 即可实现相对定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
相对定位的参考点在哪里?
- 相对自己原来的位置
相对定位的特点:
- 不会脱离文档流,元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- left 不能和 right 一起设置, top 和 bottom 不能一起设置。
- 相对定位的元素,也能继续浮动,但不推荐这样做。
- 相对行为的元素,也能通过 margin 调整位置,但不推荐这样做。
注意:定位的元素会盖在普通元素之上,都发生定位的两个元素,后写的元素会盖在先写的元素之上。
8.2 绝对定位
绝对定位即通过相对于包含块进行定位。
如何设置绝对定位?
- 给元素设置 position: absolute 即可实现绝对定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位的参考点在哪里?
- 参考它的包含块。
什么是包含块?
- 对于没有脱离文档流的元素:包含块就是父元素;
- 对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位,那包含块就是整个页面)。
绝对定位元素的特点:
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置, top 和 bottom 不能一起设置。
- 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。
- 绝对定位的元素,也能通过 margin 调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为绝对定位之后,都变成了定位元素。
何为定位元素? —— 默认宽、高都被内容所撑开,且能自由设置宽高。
8.3 固定定位
固定定位通过视口进行定位,固定定位的元素会始终保持在窗口的固定位置,无论页面滚动与否。其他元素不会受到固定定位元素的影响。
如何设置为固定定位?
- 给元素设置 position: fixed 即可实现固定定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
固定定位的参考点在哪里?
- 参考它的视口
对于 PC 浏览器来说,视口就是我们看网页的那扇“窗户”。
固定定位元素的特点:
- 脱离文档流,会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置, top 和 bottom 不能一起设置。
- 固定定位和浮动不能同时设置,如果同时设置,浮动失效,以固定定位为主。
- 固定定位的元素,也能通过 margin 调整位置,但不推荐这样做。
- 无论是什么元素(行内、行内块、块级)设置为固定定位之后,都变成了定位元素。
8.4 粘性定位
如何设置为粘性定位?
- 给元素设置 position:sticky 即可实现粘性定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置,不过最常用的是 top 值。
粘性定位的参考点在哪里?
- 离它最近的一个拥有“滚动机制”的祖先元素,即便这个祖先不是最近的真实可滚动祖先。
粘性定位元素的特点:
- 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是 top 值。
- 粘性定位和浮动可以同时设置,但不推荐这样做。
- 粘性定位的元素,也能通过 margin 调整位置,但不推荐这样做。
粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。
8.5 定位层级
- 定位元素的显示层级比普通元素高,无论什么定位,显示层级都是一样的。
- 如果位置发生重叠,默认情况是:后面的元素,会显示在前面元素之上。
- 可以通过 css 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字,没有单位,值越大显示层级越高。
- 只有定位的元素设置 z-index 才有效。
- 如果 z-index 值大的元素,依然没有覆盖掉 z-index 值小的元素,那么请检查其包含块的层级。
8.5.1 定位注意点
- 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高。
- 发生相对定位后,元素依然是之前的显示模式。
8.6 定位的特殊应用
以下所说的特殊应用,只针对 绝对定位 和 固定定位 的元素,不包括相对定位的元素。
8.6.1 让定位元素的宽充满包含块
- 块宽想与包含块一致,可以给定位元素同时设置 left 和 right 为 0 。
- 高度想与包含块一致, top 和 bottom 设置为 0 。
8.6.2 让定位元素在包含块中居中
- 方案一:
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
- 方案二:
left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;
注意:该定位的元素必须设置宽高!!!
九: 布局
9.1 版心
- 在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页的版心。
- 版心的宽度一般是 960 ~ 1200 像素之间。
- 版心可以是一个,也可以是多个。
9.2 常用布局名词
位置 | |
---|---|
顶部导航条 | topbar |
页头 | header, page-header |
导航 | nav, navigator, navbar |
搜索框 | search, search-box |
横幅 | banner |
主要内容 | content, main |
侧边栏 | aside, sidebar |
页脚 | footer, page-footer |
9.3 重置默认样式
很多元素都有默认样式,比如:
- p 元素有默认的上下 margin 。
- h1~h6 标题也有上下 margin ,且字体加粗。
- body 元素有默认的 8px 外边距。
- 超链接有默认的文字颜色和下划线。
- ul 元素有默认的左 pading 。
在早期,元素默认样式,能够让我们快速的绘制网页
但如今网页的设计越来越复杂,内容越来越多,而且很精细,这些默认样式会给我们绘制页面带来麻烦;
而且这些默认样式,在不同的浏览器上呈现出来的效果也不一样,所以我们需要重置这些默认样式。
9.3.1 方案一:使用全局选择器
* {
margin: 0;
padding: 0;
......
}
此种方法,在简单案例中可以用一下,但实际开发中不会使用,因为 * 选择的是所有元素,而并不是所有的元素都有默认样式;而且我们重置时,有时候是需要做特定处理的,比如:想让 a 元素的文字是灰色,其他元素文字是蓝色。
9.3.2 方案二:reset.css
选择到具有默认样式的元素,清空其默认的样式。
经过 reset 后的网页,好似“一张白纸”,开发人员可根据设计稿,精细的去添加具体的样式。
9.3.3 方案三:Normalize.css
Normalize.css 是一种最新方案,它在清除默认样式的基础上,保留了一些有价值的默认样式。 官网地址
相对于 reset.css , Normalize.css 有如下优点:
- 保护了有价值的默认样式,而不是完全去掉它们。
- 为大部分 HTML 元素提供一般化的样式。
- 新增对 HTML5 元素的设置。
- 对并集选择器的使用比较谨慎,有效避免调试工具杂乱。
备注: Normalize.css 的重置,和 reset.css 相比,更加的温和,开发时可根据实际情况进行选择。