HTML5+CSS3学习笔记（三）

本系列更多文章，可以查看专栏 HTML+CSS学习笔记

文章目录

HTML5+CSS3学习笔记（三）
一、CSS布局
- 1. 文档流（块级元素、行内元素、行内块元素）
二、盒子模型 / 框模型（box model）
三、盒子模型——布局
四、练习代码
- 1. 图片列表
- 2. 左侧导航栏
结尾

一、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）

以下图片来源于盒子模型 / 框模型
框模型/盒子模型

所有元素均为矩形盒子
盒子的可见区域大小由 $\color{#FF3030}{内容区(content)、边界(border)、内边距(padding)}$ 所决定
盒子的位置由 $\color{#FF3030}{外边距(margin)}$ 所决定

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为none，若存在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-top	负值	当前盒子向上移动
margin-right	正值	默认无效果
margin-right	负值	默认无效果
margin-bottom	正值	下方盒子向下移动
margin-bottom	负值	下方盒子向上移动
margin-left	正值	当前盒子向右移动
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值	width值	margin-right值	父元素内容区宽度
1.调整前	0	200	0	800
1.调整后	0	200	600	800
2.调整前	auto	400	200	800
2.调整后	200	400	200	800
3.调整前	auto	auto	200	800
3.调整后	0	600	200	800
4.调整前	auto	auto	auto	800
4.调整后	0	800	0	800
5.调整前	auto	500	auto	800
5.调整后	150	800	150	800
6.调整前	0	1000	0	800
6.调整后	0	1000	-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/)

HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】