当前位置：首页 > news >正文

前端开发(HTML,CSS,VUE,JS)从入门到精通！第二天(CSS)

news 2025/8/2 4:57:56

一、层叠样式表（CSS）

1．概述

层叠样式表（Cascading Style Sheet，简称 CSS），主要用于网页风格设计，包括字体大小，颜色以及元素的精确定位等等，在 HTML 页面中使用 CSS 可以让原来单调的 HTML 页面更加富有吸引力。

2．发展历史：目前是 CSS3.0 版本

CSS1.0-->CSS2.0-->CSS2.1-->CSS3.0

3．CSS的基本使用，有如下 4 种方式引入 CSS 样式信息

（1）链接外部的 .css 文件：

在 <head> 标签中输入：<link rel="stylesheet" href="css/outer.css">

（2）导入外部 .css 文件：

（3）使用内部样式：在 head 标签中使用 style 标签来定义 CSS 样式，但是该样式只对当前页面有效

（4）使用内联样式：直接在标签的属性中指定 style 属性，只对使用的标签有效：

示例：

项目中创建 css 目录，并在该目录中创建 outer.css 样式文件：

demo1.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>

<link rel="stylesheet" href="css/outer.css">

<style>
h1{ /*找到所有的 h1 标签*/
/*
color 用于设置字体的颜色，我们所有的颜色都可以通过 Red，Green，Blue 三种颜色的不同比例调和得到，简称RGB，也称为三基色，
这里的十六进制数 #3CF308 就是 RGB 的三个十六进制的值，其中 R 的值 3C，G 的值 F3，B 的值 08
*/
color: #3CF308;
}
body{ /*找到文档主体*/
/*设置背景颜色*/
background-color: #ccc; /* #ccc 就是 #cccccc 的简写*/
}
</style>
</head>
<body>
<h1>标题</h1>

<p style="color: rgb(32,218,255);">段落1</p>

<p style="color: orangered;">段落2</p>

<p style="color: rgba(58,148,231,0.2)">段落3</p>
</body>
</html>

4．CSS选择器（Selector）：选中某个或某些元素来应用 CSS 样式

（1）基础语法：

Selector：选择器，选择哪个或哪些元素来使用这些 CSS 样式

（2）元素选择器：选中一个或一些 HTML 元素(标签)

示例：

（3）属性选择器，有如下几种：

示例：

（4）ID 选择器：我们可以给 HTML 标签添加一个 id 属性，id 是唯一的

#idValue{...}

其中 idValue 是元素的 id 属性值，id 就像身份证号一样，必须唯一。

示例：

（5）类选择器：

class 选择器，可以给一个或多个元素设置相同 class 属性值，那么这些元素就归为一类，class 代表一类的 CSS 样式，多个元素可以同时具有相同名称的 class 值（这样这些元素都归为一类），语法：

[E].classValue{

...

}

其中 E 表示元素名，可以省略，”.”不能省略，classValue 表示类的名称

（6）后代选择器：选中所有的后代元素，包含儿子元素和孙子元素等等，语法：

Selector1 Selector2{

...

}

（7）子代选择器：只会选中儿子辈的元素，语法：

Selector1 > Selector2{

...

}

（8）兄弟元素选择器：选中兄弟元素（同级的元素），语法：

Selector1+Selector2{

...

}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo6</title>
<style>
div.one{
width: 300px;
height: 300px;
}
div.two{
width: 200px;
height: 200px;
}
div.three{
width: 100px;
height: 100px;
}
/*后代选择器：儿子孙子都会被选中*/
div.one div{
border: 1px solid #ccc; /*加边框，语法：border: 粗细线型颜色*/
}
/*子代选择器：只会选中儿子*/
div.one > div{
border: 3px dashed #ff0000;
}
/*兄弟选择器*/
li.mli + li{
color: magenta;
}
</style>
</head>
<body>
<div class="one">
父亲 DIV
<div class="two">
儿子 DIV
<div class="three">
孙子 DIV
</div>
</div>
</div>
<hr>
<ul>
<li>列表项1</li>
<li class="mli">列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</body>
</html>

（9）选择器组合：

可以将各种不同的选择器组合在一起，让选择器选择的多个元素来应用 CSS 样式，语法：

Selector1,Selector2,Selector3,...{...}，其中Selector1,Selector2,Selector3,...是上面讲过的任何一个有效的选择器。

示例：

（10）结构性伪类选择器：

指根据 HTML 元素之间的结构进行筛选的伪类选择器，结构性伪类选择器有如下几种：

示例1：

示例2：

（11）状态伪类选择器：根据元素的状态进行筛选，主要有：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo10</title>
<style>
ul li:hover{ /*当鼠标在 ul 的后辈元素 li 上面悬停的时候应用样式*/
background-color: deepskyblue;
color: #fff; /*设置字体颜色，#fff 就是 #ffffff，表示白色，#000表示黑色，#ccc 表示灰色*/
}
input[name="name"]:active { /*元素被激活时*/
outline: orangered solid 2px; /*设置外边框，语法：outline: 颜色线型粗细*/
}
input[name="sex"]:checked { /*元素被选中的时候*/
outline: orangered solid 2px; /*设置外边框，语法：outline: 颜色线型粗细*/
}
#img {
width: 300px;
height: 300px;
display: none; /*不显示*/
}
a:hover #img{ /*当在 a 标签上悬停的时候，让其后代元素 #img 应用上样式*/
display: block; /*显示出来*/
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit1</li>
<li>Lorem ipsum dolor sit2</li>
<li>Lorem ipsum dolor sit3</li>
<li>Lorem ipsum dolor sit4</li>
</ul>
<hr>
<input type="text" name="name">
<hr>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<hr>
<a href="">
<span>看我</span> <br>
<img src="images/3.jpg" alt="" id="img">
</a>
</body>
</html>

5．CSS 样式表中字体相关的属性

（1）color：设置字体的颜色，可以使用rbg()、颜色的英文，还可以使用十六进制颜色值

（2）font-family：文字字体，多个不同字体之间用“,”隔开，比如宋体，隶书等等

（3）font-size：字体大小，可以指定像素值（px），也可以指定如下的值：

① xx-small：最小

② x-small：较小

③ ...

（4）font-style：文字风格，比如 normal，italic，oblique 分别表示正常，斜体，倾斜字体

（5）font-weight：设置加粗，取值可以是 lighter，normal，blod，bloder 以及数字

（6）text-decoration：文字装饰，取值可以有 none，blink，underline，line-through，overline，分别表示无修饰，闪烁，下划线，中划线，上划线

（7）line-height：字体行高，这个属性比较有用，我们如果将字体的行高设置来和父元素的高度相等，那么字体自动居中对齐。

示例1：

示例2：炫彩的 Google 的 LOGO

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>logo</title>
<style>
.public-color-font{
color: #1B6FEF;
font-size: 140px;
}
.span-O{
color: #DB4732;
font-family: "微软雅黑";
}
.span-O1{
color: #EFBA02;
font-family: "微软雅黑";
}
.public-font{
font-size: 80px;
}
.span-l{
color: #009A57;
font-size: 140px;
}
.span-e{
color: #DB4732;
font-size: 140px;
}
</style>
</head>
<body>

<span class="public-color-font">G</span>
<span class="span-O public-font">O</span>
<span class="span-O1 public-font">O</span>
<span class="public-color-font">g</span>
<span class="span-l">l</span>
<span class="span-e">e</span>
</body>
</html>

6．背景，边框和补丁相关属性

（1）背景相关属性

① background：设置背景样式，该属性是一个复合属性，可以同时设置背景颜色，背景图片和背景图片重复方式。

示例：五彩导航

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav</title>
<style>
a{
width: 120px;
height: 58px;
display: inline-block;/*显示为行级块级元素：不会独占一行，也可以设置宽高*/
line-height: 50px;
color: white;
text-decoration: none;
text-align: center; /*文字居中显示*/
}
.one{
background: url("images/bg1.png"); /*设置背景图片*/
}
.two{
background: url("images/bg2.png"); /*设置背景图片*/
}
.three{
background: url("images/bg3.png"); /*设置背景图片*/
}
.four{
background: url("images/bg4.png"); /*设置背景图片*/
}
.five{
background: url("images/bg5.png"); /*设置背景图片*/
}
</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
<a href="#" class="five">五彩导航</a>
</body>
</html>

① background-attachment：设置背景图片是随着对象内容滚动还是固定的，在设置该属性之前，必须先指定background-image 属性，属性有：

1）scroll：指定背景会随着元素内容滚动而滚动，是默认值

2）fixed：背景图片固定，不会随着组件里的内容滚动而滚动

② background-color：设置背景颜色，如果同时设置了背景色和背景图片，则背景图片会覆盖背景颜色。

③ background-image：设置背景图片，通过url(‘图片地址’)来设置

④ background-position：用于设置背景图片的位置，可以是实际长度值，也可以是百分比

⑤ background-size：背景图片的大小，可以是实际值也可以是百分比

⑥ background-repeat：设置是否平铺图片，取值有repeat，no-repeat，repeat-x，repeat-y，分别表示平铺，不平铺，横向平铺，纵向平铺。

示例1：图片不滚动

示例2：

（2）边框相关属性：

① border：这是一个复合属性，可以同时设置：粗细线型颜色

② border-color：设置边框颜色，如果提供四个参数，则按上右下左的顺序设置，如果是一个参数，则设置4个边框的颜色，如果是2个参数，第一个设置上下，第二个设置左右，如果是3个参数，第一个设置上边框颜色，第二个设置左右边框，第三个设置下边框。

③ border-style：边框的线型

④ border-width：边框的线宽(粗细)

⑤ border-top：设置上边框，格式是：粗细线型颜色

⑥ border-right：设置右边框

⑦ border-bottom：设置下边框

⑧ border-left：设置左边框

⑨ border-radius：设置边框圆角，值越大，圆角的程度越大

示例：

其中边框线型的取值有（border-style）：

none：无边框

hidden：隐藏边框

dotted：点线边框

dashed：虚线边框

solid：实线边框

double：双线

groove：3D凹槽边框

ridge：3D凸槽边框

inset：3D凹入边框

outset：3D凸出边框

（3）内边距（padding）相关属性：一个元素内部的子元素距离该元素上下左右边框的距离

常用属性：

① padding：可以同时设置上下左右4个内边距，如果是4个数字，分别对应上下左右的内边距，如果只有一个值，则该值将作为上下左右4个内边距，如果设置2个值，则前一个值作为上下的内边距，第二个值作为左右的内边距，如果是3个值，第一个作为上边距，第二个作为左右的内边距，第三个作为下边距。

② padding-top：设置上边距

③ padding-right：设置右边距

④ padding-bottom：设置下边距

⑤ padding-left：设置左边距

示例：

（4）外边距（margin）：元素与元素之间的距离

① margin：该属性可以设置上下左右的外边距，如果是 4 个值，分别对应上下左右 4 个外边距，1 个值，那么上下左右的外边距都是这个值，2 个值，前一个作为上下的外边距，后一个作为左右的外边距，3 个值，第一个作为上边距，第二个作为左右的外边距，第三个作为下边的外边距

② margin-top：设置上边的外边距

③ margin-right：设置右边的外边距

④ margin-bottom：设置下边的外边距

⑤ margin-left：设置左边的外边距

示例：菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo16</title>
<style>
/*
我们的 HTML 元素默认是有内边距和外边距，为了避免这种默认的内外边距引起计算不准确，一般在设计页面的时候，
我们需要将所有元素的默认的内边距和外边距清零。
*/
*{ /*把所有元素的内外边距清零*/
margin: 0;
padding: 0;
}
div.top{
width: 100%;
height: 40px;
line-height: 40px;/*行高跟高度相同，内容自动居中*/
background-color: #333;
color: #fff;
}
a{
text-decoration: none; /*去掉下划线*/
color: #fff;
margin-left: 20px; /*让每个a标签距离左边元素 20 px*/
display: inline-block; /*以行级块级元素方式显示，既不会独占一行，也可以设置宽高*/
width: 80px;
height: 40px;
text-align: center; /*文字居中*/
}
div.top a:hover{
color: #ff6700;
border-bottom: 2px solid #ff6700;
}
.body{
width: 600px;
height: 400px;
margin: 20px auto; /*给定元素宽高后，margin 的上下给一个具体值，左右写成 auto，那么该元素就自动居中了*/
}
.body img{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<a href="">菜单1</a>
<a href="">菜单2</a>
<a href="">菜单3</a>
<a href="">菜单4</a>
<a href="">菜单5</a>
<a href="">菜单6</a>
<a href="">菜单7</a>
<a href="">菜单8</a>
</div>
<div class="body">
<img src="images/city.jpg" alt="">
</div>
</div>

</body>
</html>

7．大小，定位，轮廓相关属性

（1）大小：

① height：高度

② max-height：最大高度

③ min-height：最小高度

④ width：宽度

⑤ max-width：最大宽度

⑥ min-width：最小宽度

（2）定位相关属性：

① position：用于设置目标对象的定位方式，此属性设置为 absolute，会将对象漂浮于页面之上（原来的位置不在了），根本无需考虑它周围内容布局，它会参考它的第一个已经定位的祖先元素进行定位，一直追溯到 body；定位设置为 relative，会保持对象在正常的 HTML 流中（原来的位置还在），目标对象的位置会参考它原来的位置进行定位。

注意：在网页设计中，我们一般将父元素定位成 relative，将子元素定位成 absolute，由于 absolute 定位元素会参考它的祖先元素中第一个进行定位的元素来进行定位，一致追溯到body。

如果设置为 static 定位，则目标对象仅以页面作为参考系，是默认情况，如果设置为 fixed 定位，将固定在页面上，此时移动滚动条，定位元素也会保持原来的位置不动。

② z-index：用于设置目标对象漂浮的层序，值越大，漂浮层越浮在上面，仅对 position 为 relative 和 absolute 有效

③ top：设置定位元素距离参考元素顶端的偏移量

④ right：设置定位元素距离参考元素右边的偏移量

⑤ bottom：设置定位元素距离参考元素底边的偏移量

⑥ left：设置定位元素距离参考元素左边的偏移量

示例1：absolute 定位的元素会漂浮在文档上，原来的位置就不在了

示例2：relative 定位，它原来的位置还在，它就是参考它原来的位置来定位的

示例3：我们在设计页面的时候，如果需要定位，一般都将父元素进行 relative 定位，将子元素进行 absolute 定位，这样父元素参考它原来的位置进行定位，子元素就参考父元素进行定位，这样父元素移动多少，子元素也跟着移动多少。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo19</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
div.p{
/*父元素 relative 定位，那么它的参考系就是它原来的位置，它距离原来位置上边偏移200px，左边偏移200px*/
position: relative;
top: 200px;
left: 200px;
}
div.s{
/*
子元素 absolute 定位，它的参考系是第一个已经定位的祖先元素，一直追溯到 body，上面的父元素已经定位，所以它就参考上面的
父元素 div.p。这里设置了距离父元素上边50px，左边 50px，同时父元素上边和左边移动了200px，子元素也会跟着移动这么多距离
*/
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="p">
我是父元素
<div class="s">
我是子元素
</div>
</div>
</body>
</html>

示例4：fixed 定位，固定在某个位置不动，即使滚动滚动条，也不会动

示例5：搜索框

font-awesome：是一个字体图标库，可以像使用字体一样来获取一个图标，只需通过 font-awesome.css 提供的CSS 类就可以使用图标，而该图标可以像使用字体一样来设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>search</title>
<link rel="stylesheet" href="css/font-awesome.css">
<style>
*{
margin: 0;
padding: 0;
}
.top{
margin: 20px 20px;
}
#keyword {
width: 300px;
height: 30px;
padding-left: 8px; /*左内边距为8px，好看一点*/
border: 2px solid red;
outline: none; /*去掉外边框*/
}
a{
text-decoration: none;
color: #ccc;
}
.camera{
position: relative;
top: 2px;
right: 28px;
}
.camera:hover{
color: red; /*字体图标完全可以当成字体来使用*/
}
.search{
display: inline-block;
width: 60px;
height: 36px;
background-color: red;
line-height: 36px;
color: #fff;
text-align: center;
position: relative;
right: 28px;
top: 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<input type="text" name="keyword" id="keyword" placeholder="请输入您要查找的商品">

<a href="#" class="fa fa-camera camera"></a>
<a href="#" class="fa fa-search search" >搜索</a>
</div>
</div>
</body>
</html>

（3）轮廓相关属性：

① outline：复合属性，用于设置目标对象的轮廓，格式是：颜色线型线宽

② outline-color：轮廓颜色

③ outline-style：轮廓线型，和 border 的一致

④ outline-width：轮廓宽度

⑤ outline-offset：用于设置轮廓的偏移距离（就是轮廓与轮廓之间的距离）

8．盒子模型和布局相关属性

（1）盒子模型：盒子模型就是指将网页设计页面中的各个元素看做是一个个装了东西的矩形盒子，每个矩形盒子都由内容，内边距，边框，外边距四个部分组成。

示例：

（2）布局相关的属性：

① float：浮动，浮动的 HTM L元素将会漂浮，紧紧跟随它的前一个元素，直到遇到边框，内边距或其他元素的为止，支持 left，right 属性，表示向左，向右浮动

② clear：清除浮动，支持的值有：

1）none：默认值，两边都允许浮动

2）left：不允许左边出现浮动

3）right：不允许右边出现浮动

4）both：两边都不允许出现浮动

示例1：

示例2：文字环绕

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo23</title>
<style>
.box{
width: 1000px;
height: 800px;
background-color: #eee;
}
.box img{
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<img src="images/1.jpg" alt="">

<p>“我爱哈哈哈哈哈哈</p>

</div>
</body>
</html>

浮动的应用场景：页面布局，我们在设计网页的时候，通常会使用 DIV+CSS 布局的方式来设计页面：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo24</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #f4f4f4;
}
.top{
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid #ccc;
background-color: #eee;
text-align: center;
}
.left{
width: 20%;
height: 500px;
background-color: #fff;
border: 1px solid #ccc;
float: left;
text-align: center;
margin-left: 20px;
margin-top: 10px;
border-radius: 10px;
}
.middle{
width: 50%;
height: 500px;
background-color: #eee;
border: 1px solid #ccc;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 10px;
border-radius: 10px;
}
.right{
width: 25%;
height: 500px;
background-color: #eee;
border: 1px solid #ccc;
float: left;
text-align: center;
margin-top: 10px;
margin-left: 10px;
border-radius: 10px;
}
.bottom{
width: 100%;
height: 40px;
background-color: #eee;
border: 1px solid #ccc;
position: absolute;
bottom: 0;
top: 570px;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
顶部内容
</div>
<div class="left">
左侧菜单
</div>
<div class="middle">
中间内容
</div>
<div class="right">
右侧内容
</div>
<div class="bottom">
底部内容
</div>
</div>
</body>
</html>

示例3：清除浮动

（3）Flex 布局（Flexbox）是 CSS 的一种布局模式，旨在为网页设计提供一种更灵活和高效的方式。移动端 app 的设计中比较经典的布局就是 Flex布局。下面详细介绍 Flex 布局的核心概念、属性及其用法。

① 基本概念

Flex 容器：通过设置 display: flex; 或 display: inline-flex; 创建一个 Flex 容器，容器内的子元素称为 Flex 项。

主轴和交叉轴：

主轴：默认情况下，主轴为水平方向（左到右），可以通过 flex-direction 属性改变。

交叉轴：与主轴垂直的方向。

② Flex 容器属性

display

display: flex;：创建一个块级 Flex 容器。

display: inline-flex;：创建一个行级 Flex 容器。

flex-direction

row（默认）：主轴为水平方向，从左到右。

row-reverse：主轴为水平方向，从右到左。

column：主轴为垂直方向，从上到下。

column-reverse：主轴为垂直方向，从下到上。

flex-wrap

nowrap（默认）：所有 Flex 项在一行中展示，可能导致溢出。

wrap：允许 Flex 项换行。

wrap-reverse：允许换行，且新行在上方。

justify-content

定义主轴上的对齐方式：

flex-start：项目靠主轴起始位置对齐。

flex-end：项目靠主轴结束位置对齐。

center：项目在主轴上居中对齐。

space-between：项目之间均匀分配空间，首尾项目靠边。

space-around：项目之间均匀分配空间，首尾留有一半的空间。

align-items

定义交叉轴上的对齐方式：

flex-start：交叉轴起始位置对齐。

flex-end：交叉轴结束位置对齐。

center：交叉轴居中对齐。

baseline：项目基线对齐。

stretch（默认）：项目拉伸以填满容器。

align-content

仅在存在多行时有效，定义多行的对齐方式：

flex-start

flex-end

center

space-between

space-around

stretch（默认）

③ Flex 项属性

flex-grow

定义项目的放大比例，默认为 0，表示不放大。

例如：如果有两个项，一个 flex-grow: 1，另一个 flex-grow: 2，第二个项会占据两倍于第一个的空间。

flex-shrink

定义项目的缩小比例，默认为 1，允许缩小。

当容器空间不足时，根据此属性进行缩小。

flex-basis

定义在分配多余空间之前，项目占据的主轴空间（宽度或高度），基础空间大小。

例如：flex-basis: 100px; 会使项目在分配空间前占据 100px。

flex

flex: [flex-grow] [flex-shrink] [flex-basis]; 是上述三个属性的简写形式。

例如：flex: 1 1 200px; 表示项目可放大、可缩小，基础宽度为 200px。

align-self

允许单个项目有不同的对齐方式，覆盖 align-items。

取值与 align-items 相同，例如：align-self: center;。

示例：导航菜单

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flex 布局</title>
<style>
*{
margin: 0;
padding: 0;
}
/*flex容器*/
.flex-container {
display: flex; /*以 flex 块级元素的方式布局*/
flex-direction: row; /*主轴为水平方向，从左到右*/
flex-wrap: wrap; /*当容器装不下flex项的时候，允许换行*/
justify-content: space-between; /*flex项之间均匀分配空间，首尾项靠边，这样就占满了整个 flex 容器*/
align-items: center; /*垂直方向上居中对齐*/
margin-top: 6px;
border-top: 2px solid #ff8500;
border-bottom: 1px solid #ccc;
}
/*每一个flex项*/
.flex-item{
flex: 1; /*每个flex项均匀占据空间，因为每个项的放大大小都是1，不管放大还是缩小，每个项目占据的空间相等*/
padding: 10px;
background-color: #fefefe;
color: #333;
text-align: center;
}
.flex-item:hover{
cursor: pointer; /*鼠标显示为手指形状*/
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>

<div class="flex-container">

<div class="flex-item">菜单1</div>
<div class="flex-item">菜单2</div>
<div class="flex-item">菜单3</div>
<div class="flex-item">菜单4</div>
<div class="flex-item">菜单5</div>
<div class="flex-item">菜单6</div>
<div class="flex-item">菜单7</div>
<div class="flex-item">菜单8</div>
</div>
</body>
</html>

从结果可知，Flex 布局是自适应的，可以在各种不同分辨率的设备（例如电脑，平板，手机）上保持相同的布局。

（4）overflow：当 HTML 元素不能容纳内容的时候的显示方式

1）属性值有：

① visible：指定 HTML 元素既不隐藏也不添加滚动条，超出边界

② auto：当 HTML 元素不能容纳内容的时候自动添加滚动条

③ hidden：当HTML元素不能容纳内容的时候隐藏那些不能够显示的内容

④ scroll：始终显示滚动条

2）其他的 overflow:

① overflow-x：与overflow类似，只是只控制水平方向的显示方式，取值跟overflow相同

② overflow-y：与overflow类似，只是只控制垂直方向的显示方式

③ display：设置目标对象是否显示以及如何显示

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo26</title>
<style>
div{
width: 300px;
height: 100px;
border: 1px solid #ccc;
white-space: nowrap;/*强制让div中的内容显示的一行不换行*/
}
div#mdiv{
white-space: pre-wrap; /*允许换行*/
}
</style>
</head>
<body>
<div>
<h5>不设置 overflow</h5>
<span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
</div>
<div style="overflow: auto;">
<h5>设置 overflow: auto</h5>
<span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
</div>
<div style="overflow: hidden;">
<h5>设置 overflow: hidden</h5>
<span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
</div>
<div style="overflow-x: auto;">
<h5>设置：overflow-x: auto</h5>
<span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
</div>
<div id="mdiv" style="overflow-y: auto;">
<h5>设置：overflow-y: auto</h5>
<span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
</div>
</body>
</html>

9．盒子模型和 display 属性

示例：

③ none：用于将目标对象隐藏，一旦对象隐藏，它所占用的页面空间也会释放

④ inline-block：这种盒子模型是 inline 和 block 的综合体，它既不会独占一行，同时又可以设置 width和 height。

示例：鼠标放到小图片上，显示大图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo28</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 364px;
height: 364px;
margin: 100px auto; /*上下100px，左右居中*/
}
.box #img{ /*小图片*/
width: 64px;
height: 64px;
}
#big-img img{ /*大图片*/
width: 300px;
height: 300px;
}
#big-img{
display: none; /*默认不显示大图片*/
}
.box:hover #big-img{
display: block; /*当鼠标在父元素 .box 上悬停时，让子元素 #big-img 以块级元素显示出来*/
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="images/1.jpg" alt="" id="img">
<div id="big-img">
<img src="images/1.jpg" alt="">
</div>
</div>
</div>
</body>
</html>

示例2：inline-block

10．表格，列表相关属性

（1）表格相关属性

① border-collapse：用于设置表格行和单元格边框的显示方式，该属性控制两个单元格的边框是合并在一起，还是按照标准的 HTML 样式分开，有两个取值：separator：表示边框分开，collapse：边框合并

② border-spacing：当 border-collapse 为 separator 时，该属性用于设置两个单元格边框之间的距离

③ caption-side：用于设置表格的 <caption> 标签的位置，有 top，bottom 取值

④ empty-cells：该属性控制单元格没有内容时，是否显示单元格边框，只有 border-collapse 为 separator 时，该属性才有效，支持 show 和 hidden 两个属性值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo30</title>
</head>
<body>
<table border="1" style="border-collapse: collapse;caption-side: bottom;">
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<hr>
<table border="1" style="border-collapse: separate;border-spacing: 10px;caption-side: top;empty-cells: hide;">
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td></td>
</tr>
</table>
</body>
</html>

（2）列表的相关属性

① list-style：这是一个复合属性，可以同时指定list-style-image，list-style-position，list-style-type 三个属性

② list-style-image：指定作为列表项标记的图片

③ list-style-position：指定列表项标记出现的位置，支持 outside（列表标记放在列表元素之外）和inside（列表标记放在列表元素之内）两个值

④ list-style-type：列表项标记的样式，取值有：

1）decimal：阿拉伯数字，默认值

2）disc：实心圆

3）circle：空心圆

4）square：实心方块

5）lower-roman：小写罗马数字

6）upper-roman：大写罗马数字

7）lower-alpha：小写英文字母

8）upper-alpha：大写英文字母

9）none：不使用项目符号

10）lower-latin：小写拉丁字母

11）upper-latin：大写拉丁字母

示例：

示例2：下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none; /*去掉所有 ul 的小圆点*/
}
/*设置主菜单和子菜单所有列表项 li 的样式*/
ul li{ /*ul 的所有后辈的 li，包含主菜单的和子菜单的*/
width: 100px;
height: 40px;
line-height: 40px; /*文字居中*/
background-color: #ff6700;
color: #fff;
cursor: pointer; /*鼠标显示为手指形状*/
text-align: center; /*文字居中显示*/
border: 1px solid #ccc;
}
/*所有主菜单的 li 向左浮动，这样就排在一行*/
ul.menus>li{ /*找到 ul.menus 的所有儿子 li，不包含孙子 li*/
float: left;
position: relative;/*父元素 relative 定位，子元素 absolute 定位，那么子元素就参考父元素 li 定位*/
}
ul.submenus {
position: absolute; /*父元素 relative 定位，子元素 absolute 定位，那么子元素就参考父元素 li 定位*/
top: 41px;
left: 0;
display: none; /*默认不显示子菜单*/
}
/*鼠标在主菜单上悬停的时候，显示对应的子菜单*/
ul.menus>li:hover ul.submenus{
display: block;
}
ul.submenus>li:hover{ /*鼠标在子菜单上面悬停的时候，改变 CSS*/
background-color: #888;
color: #333;
}
</style>
</head>
<body>

<ul class="menus">
<li>主菜单1
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单2
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单3
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单4
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单5
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单6
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单7
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
<li>主菜单8
<ul class="submenus">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
<li>子菜单5</li>
<li>子菜单6</li>
<li>子菜单7</li>
<li>子菜单8</li>
</ul>
</li>
</ul>
</body>
</html>

示例3：仿京东菜单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jd_menu</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
margin: 100px 100px;
}
/*父元素*/
ul.menu{
list-style: none;
position: relative; /*父元素 relative 定位，子元素 absolute 定位，那么子元素就参考父元素定位*/
}
ul.menu>li{ /*所有的主菜单*/
width: 140px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: gray;
color: #fff;
}
/*子菜单*/
ul.menu div.submenu{
width: 600px;
height: 400px;
border: 1px solid #ccc;
position: absolute; /*父元素 relative 定位，子元素 absolute 定位，那么子元素就参考父元素定位*/
top: 0; /*距离父菜单顶部为 0*/
left: 140px; /*距离父菜单左边为 140px，刚好是父菜单的宽度，那么就会紧靠父菜单*/
color: #333;
display: none; /*子菜单默认不显示*/
}
/*在主菜单 li 上面悬停的时候显示子菜单 div.submenu*/
ul.menu>li:hover div.submenu{
display: block;
z-index: 1000; /*让 absolute 定位的子菜单漂浮在最上层*/
}
/*鼠标在主菜单上悬停的时候，改变 CSS*/
ul.menu>li:hover{
background-color: #ff6700;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">

<ul class="menu">
<li>主菜单1
<div class="submenu">详情子菜单1</div>
</li>
<li>主菜单2
<div class="submenu">详情子菜单2</div>
</li>
<li>主菜单3
<div class="submenu">详情子菜单3</div>
</li>
<li>主菜单4
<div class="submenu">详情子菜单4</div>
</li>
<li>主菜单5
<div class="submenu">详情子菜单5</div>
</li>
<li>主菜单6
<div class="submenu">详情子菜单6</div>
</li>
<li>主菜单7
<div class="submenu">详情子菜单7</div>
</li>
<li>主菜单8
<div class="submenu">详情子菜单8</div>
</li>
<li>主菜单9
<div class="submenu">详情子菜单9</div>
</li>
<li>主菜单10
<div class="submenu">详情子菜单10</div>
</li>
</ul>
</div>
</body>
</html>