HTML5+CSS3学习笔记（三）
本系列更多文章，可以查看专栏 HTML+CSS学习笔记
一、CSS布局
1. 文档流（块级元素、行内元素、行内块元素）
部分内容参考博客常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）的解析
| 元素类型 | 特点 | 常见标签 |
|---|---|---|
| 块级元素 | 1.独占网页一行，自上至下垂直排列 | div、p、h1~h6、ul、ol、dl、li、dd、 table、hr、blockquote、address、menu、pre、 HTML5新增的header、section、aside、footer |
| 2.默认宽度由父元素宽度决定 | ||
| 3.默认高度由内容撑开（子元素） | ||
| 行内元素 | 1.不会独占一行，只占自身的大小 | span、img、a、lable、input、abbr（缩写）、em（强调）big、cite（引用）、i （斜体）、q（短引用）、textarea、select、small、sub、sup、strong、u（下划线）、button（默认display：inline-block） |
| 2.自左向右水平排序，若不能容纳所有行内元素 则在第二行自左向右水平排序 | ||
| 3.默认高度由内容撑开（子元素） |
二、盒子模型 / 框模型（box model）
以下图片来源于盒子模型 / 框模型
- 所有元素均为 矩形 盒子
- 盒子的可见区域大小由 内容区 ( c o n t e n t ) 、边界 ( b o r d e r ) 、内边距 ( p a d d i n g ) \color{#FF3030}{内容区(content)、边界(border)、内边距(padding)} 内容区(content)、边界(border)、内边距(padding)所决定【此时，box-sizing属性值默认为content-box】
- 盒子的位置由 外边距 ( m a r g i n ) \color{#FF3030}{外边距(margin)} 外边距(margin)所决定
- 若box-sizing值为border-box，则width和height直接决定盒子可见区域大小。
1. 内容区（content）
- width： 决定内容区的宽度
- height： 决定内容区的高度
2. 边框 / 边界（border）
对于边框，边框宽度（border-width）、边框样色（border-color）、边框样式（border-style） 缺一不可
- border-width： 设置边框宽度
- border-color： 设置边框颜色
- border-style： 设置边框样式
- border：可用此一个属性同时设置以上三种属性，三个值不区分顺序，只需填入边框宽度、颜色和样式即可。
- 例如：
border:10px blue solid;
（1）边框宽度（border-width）
实际上存在四个方向上边框宽度的设置，包括:
border-top-width（上）、border-right-width（右）、border-bottom-width（下）、border-left-width（左）
以下表格对border-width属性值，进行具体说明
| 属性值类型 | 含义 | 示例 | 备注 |
|---|---|---|---|
| 1.未设置此属性值时 | 一般默认为3px | ||
| 2.一个属性值时 | 默认对上、右、下、左，四个方向的边框宽度进行设置 | border-width:10px; | 相当于上下左右边框宽度值均设置为10px |
| 3.两个属性值时 | 默认对上下、左右，两组方向的边框宽度进行设置 | border-width:10px 20px; | 相当于上下边框宽度值设置为10px，左右边框宽度值设置为20px |
| 4.三个属性值时 | 默认对上、左右，下的边框宽度进行设置 | border-width:10px 20px 30px; | 相当于上边框宽度值设置为10px，左右边框宽度值设置为20px，下边框宽度值设置为30px |
| 4.四个属性值时 | 默认对上、左右，下的边框宽度进行设置 | border-width:10px 20px 30px 40px; | 相当于上边框宽度值设置为10px，右边框宽度值设置为20px，下边框宽度值设置为30px，左边框宽度值设置为40px |
（2）边界颜色（border-color）
实际上存在四个方向上边框颜色的设置，包括:
border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）
默认border-color为black，若存在1-4个属性值时参考以上border-width的表格。
（3）边界样式（border-style）
实际上存在四个方向上边框样式的设置，包括:
border-top-style（上）、border-right-style（右）、border-bottom-style（下）、border-left-style（左）
border-color默认继承父元素的color值，若未设置则使用浏览器默认的颜色black，若存在1-4个属性值时参考以上border-width的表格。
- none，无边框
- solid，实现边框
- dashed，虚线边框
- dotted，点状虚线边框
- double，双线边框
3. 内边距（padding）
实际上存在四个方向上内边距的设置，包括:
padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）
默认padding为0，若存在1-4个属性值时参考以上border-width的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.outer {
/* 内容区content */
width: 200px;
height: 200px;
background-color: #bfa;
/* 边界border，盒子可见区域大小210×210 */
border-width: 10px;
border-color: red orange yellow green;
border-style: solid dashed dotted double;
/* 内边距，盒子可见区域大小410×310*/
padding:50px 100px;
}
.inner{
/* width和height由父元素的width和height决定 */
width: 100%;
height: 100%;
color: white;
background: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
展示效果如下图所示：
盒子整体大小为410宽×310高
4. 外边距（margin）
实际上存在四个方向上内边距的设置，包括:
margin-top（上）、margin-right（右）、margin-bottom（下）、margin-left（左）
默认margin为0，若存在1-4个属性值时参考以上border-width的表格。
| margin类型 | 取值 | 特点 |
|---|---|---|
| margin-top | 正值 | 当前盒子向下移动 |
| 负值 | 当前盒子向上移动 | |
| margin-right | 正值 | 默认无效果 |
| 负值 | 默认无效果 | |
| margin-bottom | 正值 | 下方盒子向下移动 |
| 负值 | 下方盒子向上移动 | |
| margin-left | 正值 | 当前盒子向右移动 |
| 负值 | 当前盒子向左移动 |
5. 盒子大小
box-sizing属性值
content-box：默认值，width和height用来设置内容区（content）的大小border-box：width和height用来设置整个盒子可见区域（content+padding+border）的大小
6. 轮廓、阴影和圆角
1. 轮廓outline属性值 & 边框border属性值
- 相同点：outline和border属性值用法一致
- 不同点：outline不会影响整个盒子的大小，border会影响整个盒子的大小（box-sizing为content-box时）
2. 阴影box-shadow属性值
- 第一个值： 水平偏移量，正值表示阴影向右移动，负值代表阴影向左移动
- 第二个值： 垂直偏移量，正值表示阴影向下移动，负值代表阴影向上移动
- 第三个值： 阴影颜色
3. 圆角border-radius属性值：为了设置圆角的半径大小
- 四个值时： 设置左上、右上、右下、左下圆角半径大小
- 三个值时： 设置左上、右上/左下、右下圆角半径大小
- 两个值时： 设置左上/右下、右上/左下圆角半径大小
- 一个值时： 设置左上/右上/右下/左下圆角半径大小
- 只有一个值，且为50%时，表示设置成正圆
实际上存在四个方向上内边距的设置，包括: border-left-top-radius（左上）、border-right-top-radius（右上）、border-right-bottom-radius（右下）、border-left-bottom-radius（左下）
三、盒子模型——布局
1. 水平方向布局
子元素在父元素中水平方向所在位置由以下几个属性共同决定：
（1）margin-left
（2）border-left
（3）padding-left
（4）width
（5）padding-right
（6）border-right
（7）margin-right
必须满足：
\color{#FF3030}{必须满足：}
必须满足：子元素以上七种属性值之和 = 父元素内容区宽度
当七种属性值之和不满足等式时，称为过渡约束加粗样式，等式会自动调整。调整情况如下所示：
- 1. 当七个值没有 auto 时，浏览器会自动调整 margin-right的值使等式成立
- 2. 当width、margin-left、margin-right设置为auto时，浏览器会自动调整设置为auto的值使等式成立
- （1）当只有一个值设置为auto时： 仅调整auto值使等式成立
- （2）当width和某一外边距同时为auto时： auto的外边距设置为0，width自动调整为最大值
- （3）三个值均为auto时： width为最大值，两个外边距均为0
- （4）当width设置为固定值，其它两个外边距设置为auto时： 保证width不变，auto的外边距设置为相同的两个值
常用 width:xxxpx; margin: 0 auto;来设置某一元素在父元素中水平居中
| 状态 | margin-left值 | border-left值 | padding-left值 | width值 | padding-right值 | border-right值 | margin-right值 | 父元素内容区宽度 |
|---|---|---|---|---|---|---|---|---|
| 1.调整前 | 0 | 0 | 0 | 200 | 0 | 0 | 0 | 800 |
| 1.调整后 | 0 | 0 | 0 | 200 | 0 | 0 | 600 | 800 |
| 2.调整前 | auto | 0 | 0 | 400 | 0 | 0 | 200 | 800 |
| 2.调整后 | 200 | 0 | 0 | 400 | 0 | 0 | 200 | 800 |
| 3.调整前 | auto | 0 | 0 | auto | 0 | 0 | 200 | 800 |
| 3.调整后 | 0 | 0 | 0 | 600 | 0 | 0 | 200 | 800 |
| 4.调整前 | auto | 0 | 0 | auto | 0 | 0 | auto | 800 |
| 4.调整后 | 0 | 0 | 0 | 800 | 0 | 0 | 0 | 800 |
| 5.调整前 | auto | 0 | 0 | 500 | 0 | 0 | auto | 800 |
| 5.调整后 | 150 | 0 | 0 | 800 | 0 | 0 | 150 | 800 |
| 6.调整前 | 0 | 0 | 0 | 1000 | 0 | 0 | 0 | 800 |
| 6.调整后 | 0 | 0 | 0 | 1000 | 0 | 0 | -200 | 800 |
2. 垂直方向布局
- 默认情况，父元素高度由内容撑开
- 如果子元素大小超出了父元素，子元素会从父元素中溢出，可采用overflow属性处理溢出元素内容区的部分：
visible： 默认值，不修剪溢出的内容，呈现溢出的内容hidden：隐藏溢出的内容scoll：内容会被修剪，但可以通过水平和垂直滚动条查看修剪的内容，如果某一方向不需要滚动条仍会添加不可滚动的滚动条auto：内容会被修剪，如水平或垂直方向需要滚动条时，会增加对应的滚动条inherit：子元素继承父元素的overflow属性值
3. 实际问题：外边距的折叠（垂直方向相邻元素）
（1）相邻兄弟元素的外边距【开发中一般不处理这种情况的外边距折叠问题】
讨论垂直方向上方元素的margin-bottom值和下方元素的margin-top值
| margin-bottom值 | margin-top值 | 实际兄弟元素间的距离 |
|---|---|---|
| 正值 | 正值 | 两值中较大的值 |
| 正值 | 负值 | 两者之和 |
| 负值 | 正值 | 两者之和 |
| 负值 | 负值 | 两值中绝对值较大的值 |
（2）相邻父子元素的上外边距【影响开发】
- 子元素的上外边距会传递给父元素的上外边距
初始状态如下如图所示，如何将子元素向下移动100px的同时，保证父元素位置不变？
错误方式，仅修改子元素的上外边距，父子元素均向下移动
- 正确方式1，修改父元素的内上边距，将子元素下移,并同时修改父元素的高度值
- 正确方式2，添加外边距使父子元素之间不再处于相邻关系
- 后续还有更完美的方法，参考博客【尚硅谷】HTML5+CSS3学习笔记（四）浮动float、清除浮动clear、高度塌陷解决方式【附练习：导航条】
外边距的折叠练习代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子元素外边距的折叠</title>
<style>
body {
background-color: antiquewhite;
}
/* 如何将子元素向下移动100px的同时，保证父元素位置不变 */
/* 错误方式,忽略子元素的上外边距会传递给父元素 */
/*.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 100px;
}*/
/* 正确方式1，修改父元素的内上边距，将子元素下移,并同时修改父元素的高度值 */
/*.box1 {
width: 200px;
height: 100px;
background-color: #bfa;
padding-top: 100px;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
}*/
/* 正确方式2，添加外边距使父子元素之间不再处于相邻关系 */
.box1 {
width: 200px;
height: 199px;
background-color: #bfa;
border-top: 1px #bfa solid;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 99px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
4. 行内元素的盒子模型
关于行内元素更为准确的内容，可以查看 HTML5+CSS3学习笔记（七）行内元素设置margin和padding是否生效（以span、img为例）
- 行内元素不可以设置width和height
- 行内元素可以设置padding，但垂直方向的padding不会影响页面布局
- 行内元素可以设置border，但垂直方向的border不会影响页面布局
- 行内元素可以设置margin，但垂直方向的margin不会影响页面布局
通过display属性值的设置，改变元素的类型
- block，设置为块级元素
- inline，设置为行内元素
- inline-block，设置为行内块元素，既可设置高度和宽度，但不会独占页面一行
- table，设置为表格
- none，元素不在页面显示，但不占据页面中的位置
通过visible属性设置
- visible，使元素在页面中可见
- hidden，元素在页面中隐藏，但会占据页面的位置
5. 浏览器的默认样式
代码练习中，常通过以下代码去除浏览器对网页的默认样式【不可以完全去除】
*{
margin: 0;
padding: 0;
}
实际开放中，常通过引入外部样式表，来去除网页的默认样式
四、练习代码
1. 图片列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东图片列表</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
/* 为了方便观察图片列表外层容器的背景颜色 */
body {
background-color: antiquewhite;
}
.img-list {
width: 190px;
height: 470px;
overflow: hidden;
margin: 50px auto;
background-color: #F4F4F4;
}
.img-list img {
width: 100%;
margin-bottom: 9px;
}
</style>
</head>
<body>
<!-- 创建图片列表的外层容器 -->
<ul class="img-list">
<!-- 使用列表项可以将超链接转化为块元素 -->
<li>
<a href="javascript:;">
<img src="../imgs/exercise1/1.jpg.webp" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../imgs/exercise1/2.jpg.webp" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="../imgs/exercise1/3.jpg.webp" alt="">
</a>
</li>
</ul>
</body>
</html>
2. 左侧导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东左侧导航栏</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #bfa;
}
.left-nav {
width: 190px;
height: 450px;
margin: 50px auto;
padding: 10px 0;
background-color: #fff;
}
.item {
/* 不指定width可以让子元素盒子宽度和父元素相等 */
padding-left: 18px;
height: 25px;
line-height: 25px;
}
.item:hover {
background-color: #d9d9d9;
}
.item a {
color: #333;
font-size: 14px;
text-decoration: none;
}
.item a:hover {
color: #c81623;
}
.item a:visted {
color: gray;
}
.a_text {
padding: 0 2px;
font-size: 12px
}
</style>
</head>
<body>
<nav class="left-nav">
<div class="item">
<a href="#">家用电器</a>
</div>
<div class="item">
<a href="#">手机</a><span class="a_text">/</span><a href="#">运营商</a><span class="a_text">/</span><a href="#">数码</a>
</div>
<div class="item">
<a href="#">电脑</a><span class="a_text">/</span><a href="#">办公</a>
</div>
<div class="item">
<a href="#">家居</a><span class="a_text">/</span><a href="#">家具</a><span class="a_text">/</span><a href="#">家装</a><span class="a_text">/</span><a href="#">厨具</a>
</div>
<div class="item">
<a href="#">男装</a><span class="a_text">/</span><a href="#">女装</a><span class="a_text">/</span><a href="#">童装</a><span class="a_text">/</span><a href="#">内衣</a>
</div>
<div class="item">
<a href="#">美妆</a><span class="a_text">/</span><a href="#">个护清洁</a><span class="a_text">/</span><a href="#">宠物</a>
</div>
<div class="item">
<a href="#">女鞋</a><span class="a_text">/</span><a href="#">箱包</a><span class="a_text">/</span><a href="#">钟表</a><span class="a_text">/</span><a href="#">珠宝</a>
</div>
<div class="item">
<a href="#">男鞋</a><span class="a_text">/</span><a href="#">运动</a><span class="a_text">/</span><a href="#">户外</a>
</div>
<div class="item">
<a href="#">房产</a><span class="a_text">/</span><a href="#">汽车</a><span class="a_text">/</span><a href="#">汽车用品</a>
</div>
<div class="item">
<a href="#">母婴</a><span class="a_text">/</span><a href="#">玩具乐器</a>
</div>
<div class="item">
<a href="#">食品</a><span class="a_text">/</span><a href="#">酒类</a><span class="a_text">/</span><a href="#">生鲜</a><span class="a_text">/</span><a href="#">特产</a>
</div>
<div class="item">
<a href="#">艺术</a><span class="a_text">/</span><a href="#">礼品鲜花</a><span class="a_text">/</span><a href="#">农资绿植</a>
</div>
<div class="item">
<a href="#">医药保健</a><span class="a_text">/</span><a href="#">计生情趣</a>
</div>
<div class="item">
<a href="#">图书</a><span class="a_text">/</span><a href="#">文娱</a><span class="a_text">/</span><a href="#">教育</a><span class="a_text">/</span><a href="#">电子书</a>
</div>
<div class="item">
<a href="#">机票</a><span class="a_text">/</span><a href="#">酒店</a><span class="a_text">/</span><a href="#">旅游</a><span class="a_text">/</span><a href="#">生活</a>
</div>
<div class="item">
<a href="#">理财</a><span class="a_text">/</span><a href="#">众筹</a><span class="a_text">/</span><a href="#">白条</a><span class="a_text">/</span><a href="#">保险</a>
</div>
<div class="item">
<a href="#">安装</a><span class="a_text">/</span><a href="#">维修</a><span class="a_text">/</span><a href="#">清洗</a><span class="a_text">/</span><a href="#">二手</a>
</div>
<div class="item">
<a href="#">工业品</a>
</div>
</nav>
</body>
</html>
结尾
如有错误，欢迎评论区指正。
更多其它知识可查询在线文档：[w3school在线教程链接](https://www.w3school.com.cn/)
扫一扫
1802
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
