前端CSS基础：零基础学习指南

发表时间: 2023-12-18 11:07

构成	语言	描述
结构	HTML	网页元素和内容
表现	CSS	网页元素页面样式）
行为	JavaScript	网页交互

CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式

1 CSS样式引入方式

1.1 外部样式

CSS写在一个单独的.css文件中，通过link标签在网页中引入

<link rel="stylesheet" href="文件路径">

1.2 内部样式

CSS写在网页的head标签中，用style标签包裹

<style>    /* 写在style标签中的样式 */</style>

1.3 行内样式

CSS写在标签的style属性中

<标签名 style="行内样式写在这"></标签名>

三种CSS样式引入方式的区别

引入方式	书写位置	作用范围	使用场景
外部样式	CSS写在单独的css文件中，通过link标签引入	多个页面	项目中
内部样式	CSS写在head头部style标签中	当前页面	案例演示中
行内样式	CSS写在标签的style属性中	当前标签	配合js使用

2 基础选择器

选择器，就是选取（查找）需要设置样式元素的方式

选择器 {    属性名: 属性值;}

属性名和属性值合称为css属性

2.1 元素选择器

通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        p {            color: red;        }    </style></head><body>    <p>我爱中国</p>    <p>我爱人民</p>    <div>我爱家乡</div></body></html>

小结：

1、无论嵌套多少层，只要元素名称相同都会被找到

2.2 类选择器

通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式

类选择器，也有人叫class选择器

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        .color-style {            color: red;        }    </style></head><body>    <p class="color-style">我爱中国</p>    <p>我爱人民</p>    <div class="color-style">我爱家乡</div></body></html>

小结：

1、所有元素都有class属性，class属性的属性值叫类名

2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头

3、一个元素可以有多个类名，类名之间用空格隔开

2.3 id选择器

通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        #one {            color: red;        }    </style></head><body>    <p id="one">我爱中国</p>    <p id="two">我爱人民</p>    <div>我爱家乡</div></body></html>

小结：

1、所有元素都有id属性

2、id属性值在一个页面中是唯一的

3、一个元素只能有一个id属性值

2.4 通配符选择器

查找页面中所有的元素，然后对其设置CSS样式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        * {            color: red;        }    </style></head><body>    <p id="one">我爱中国</p>    <p id="two">我爱人民</p>    <div>我爱家乡</div></body></html>

小结：

1、通常用于网页重置样式，不常用

2.5 后代选择器

根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        #one p {            color: red;        }    </style></head><body>    <div id="one">        <p>我爱中国</p>        <p>我爱人民</p>        <div>我爱家乡</div>        <div>            <p>我爱中国</p>            <p>我爱人民</p>        </div>    </div>    <div id="two">        <p>我爱中国</p>        <p>我爱人民</p>        <div>我爱家乡</div>        <div>            <p>我爱中国</p>            <p>我爱人民</p>        </div>    </div></body></html>

2.6 群组选择器

根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        p,h3 {            color: red;        }    </style></head><body>    <p>我爱中国</p>    <h3>我爱人民</h3>    <div>我爱家乡</div></body></html>

3 字体样式

字体样式，针对文字本身样式

字体相关的CSS属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体风格
color	字体颜色

3.1 字体类型

语法：

font-family: 字体1,字体2,字体3...;

说明：

1、font-family属性可是设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是"宋体"

2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        p {            font-family: Arial;        }        h3 {            font-family: monospace;        }        div {            font-family: "新宋体";        }    </style></head><body>    <p>我爱中国</p>    <h3>我爱人民</h3>    <div>我爱家乡</div></body></html>

3.2 字体大小

语法：

font-size: 数字 + px

说明：

1、px是像素单位，单位需要设置，否则无效

2、谷歌浏览器默认文字大小是16px

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        p {            font-size: 18px;        }        div {            font-size: 36px;        }    </style></head><body>    <p>我爱中国</p>    <div>我爱家乡</div></body></html>

3.3 字体粗细

语法：

font-weight: normal/bold/100~900

说明：

属性值	说明
normal	正常（默认值）
bold	较粗
100~900	取100~900九种数值

实际开发一般会设置bold，不设置默认是normal

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        p {            font-weight: normal;        }        div {            font-weight: bold;        }    </style></head><body>    <p>我爱中国</p>    <div>我爱家乡</div></body></html>

3.4 字体风格

语法：

font-style: 取值

说明：

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

不是所有字体都有italic属性值，如果没有italic的，则用oblique

font连写

语法：

font: style weight size family;

说明：

1、可以省略前两项，省略了相当于设置了默认值

不常用，作为了解

3.5 字体颜色

语法：

color: 颜色值

说明：

color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）

问题一：给同一个元素设置了相同的属性样式，哪个生效？

答：样式会层叠（覆盖），写在最后面的会生效。

问题二：html里面有注释，css有没有注释，如何写？

<style>    /* 采用元素选择器给p元素设置css样式 */    p {        color: #000000;  /* p元素字体颜色为黑色 */    }</style>

4 文本样式

文本样式，针对段落的排版效果

文本相关CSS属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修缮
text-transform	大小写转换
line-height	行高
letter-spacing	字母间距
word-spacing	词间距

4.1 首行缩进

语法：

text-indent: 像素值

说明：

缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。

<!DOCTYPE html><html><head>    <meta charset="utf-8"><style>    p {        font-size: 14px;        text-indent: 28px;    }</style></head><body>    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>

4.2 水平对齐

语法：

text-align: 取值

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html><html><head>    <meta charset="utf-8"><style>    .one {        text-align: left;    }    .two {        text-align: center;    }    .three {        text-align: right;    }</style></head><body>    <p class="one">生于忧患死于安乐</p>    <p class="two">生于忧患死于安乐</p>    <p class="three">生于忧患死于安乐</p></body></html>

4.3 文本修饰

语法：

text-decoration: 取值

说明：

text-decoration属性值

属性值	说明
none	去除所有的划线效果（默认值）
underline	下划线
line-throught	中划线
overline	顶划线

<!DOCTYPE html><html><head>    <meta charset="utf-8"><style>    .one {        text-decoration: none;    }    .two {        text-decoration: underline;    }    .three {        text-decoration: line-through;    }    .four {        text-decoration: overline;    }</style></head><body>    <p class="one">生于忧患死于安乐</p>    <p class="two">生于忧患死于安乐</p>    <p class="three">生于忧患死于安乐</p>    <p class="four">生于忧患死于安乐</p></body></html>

4.4 大小写转换

语法：

text-transform: 取值

说明：

text-transform属性取值

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
capitalize	单词首字母大写

<!DOCTYPE html><html><head>    <meta charset="utf-8"><style>    .one {        text-transform: none;    }    .two {        text-transform: uppercase;    }    .three {        text-transform: lowercase;    }    .four {        text-transform: capitalize;    }</style></head><body>    <p class="one">Hello World</p>    <p class="two">Hello World</p>    <p class="three">Hello World</p>    <p class="four">hello world</p></body></html>

4.5 行高

语法：

line-height: 取值;

说明：

1、取值可以是一个固定的数值（比如24px），也可以是一个百分数（比如150%）

line-height: 150%;

2、使用font-size属性和line-height属性的组合，可以让行高与字体大小之间保持一定的比例

font-size: 16px;line-height: 1.5

3、使用line-height属性的继承值。如果父元素的line-height属性有值，那么子元素及后代元素会继承父元素的行高

body {    line-height: 1.5;}p {    font-size: 16px;}

行高的设置要大于字体大小的设置，才会显得好看

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        p {            font-size: 16px;            line-height: 24px;        }    </style></head><body>    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p></body></html>

4.6 间距

字间距

语法：

letter-spacing: 像素值

说明：

letter-spacing属性用来设置两个字之间的距离，一个英文字母或汉字都是当做一个字来处理

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        p {            letter-spacing: 10px;        }    </style></head>    <p>are you ok.你好吗？</p><body></body></html>

词间距

语法：

word-spacing: 像素值;

说明：

word-spacing属性用来设置英文单词之间的距离

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        p {            word-spacing: 10px;        }    </style></head>    <p>are you ok.你好吗？</p><body></body></html>

5 边框样式

元素基本可以定义边框，边框样式由边框宽度、边框外观和边框颜色三个属性组成。

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

5.1 边框的宽度

语法：

border-width: 像素值;

说明：

边框border-width属性值是一个像素值

5.2 边框的外观

语法：

border-style: 取值;

说明：

border-style取值有三个

属性值	说明
none	无样式
dashed	虚线
solid	实线

5.3 边框的颜色

语法：

border-color: 颜色关键字/16进制RGB值

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            border-width: 1px;            border-style: solid;            border-color: red;        }    </style></head>    <div>hello,world</div><body></body></html>

5.4 边框样式简写

语法：

border: border-width border-style border-color;

案例：

div {    border: 1px solid red;}

5.5 边框局部样式

元素都是盒子模型，都是有四条边的，分别是上、下、左、右。所以又可以为元素某一边边设置边框样式

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            width: 300px;            height: 200px;            border-top: 1px dashed darkred;            border-bottom: 2px solid green;            border-left: 3px solid grey;            border-right: 4px dashed lightseagreen;        }    </style></head>    <div></div><body></body></html>

6 列表样式

6.1 列表项符号

定义列表项符号

在HTML中，无序列表和有序列表是通过标签ul、ol的type属性来定义的

<ol type="a">    <li>my</li>    <li>your</li></ol><ul type="disc">    <li>my</li>    <li>your</li></ul>

接触了css后，得改成list-style-type属性来定义。HTML专心负责结构，CSS专心负责样式。

语法：

list-style-type: 取值;

说明：

ol元素的list-style-type属性值

属性值	说明
decimal	阿拉伯数字：1、2、3…（默认值）
lower-roman	小写罗马数字：i、ii、iii…
upper-roman	大写罗马数字：I、II、III…
lower-alpha	小写英文字母：a、b、c…
upper-alpha	大写英文字母：A、B、C…

ul元素的list-style-type属性值

属性值	说明
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        ol {            list-style-type: lower-alpha;        }        ul {            list-style-type: square;        }    </style></head><body>    <ol>        <li>my</li>        <li>your</li>    </ol>    <ul>        <li>my</li>        <li>your</li>    </ul></body></html>

去除列表项符号

随着技术和审美不断的提高，实际开发中都是直接去除列表项符号

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        ol,ul {            list-style-type: none;        }    </style></head><body>    <ol>        <li>my</li>        <li>your</li>    </ol>    <ul>        <li>my</li>        <li>your</li>    </ul></body></html>

有序列表或无序列表设置了list-style-type: none后，样式都一样了。

6.2 列表项图片

语法：

list-style-image: url(图片路径);

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        ul {            list-style-image: url("small.png");        }    </style></head><body>    <ul>        <li>my</li>        <li>your</li>    </ul></body></html>

list-style-image不能控制图片大小，实际开发中用background来替代

7 表格样式

7.1 表格标题位置

语法：

caption-side: 取值;

说明：

caption-side属性取值

属性值	说明
top	标题在顶部（默认值）
bottom	标题在底部

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        table,tr,th,td {            border: 1px solid gray;        }        table {            caption-side: bottom;        }    </style></head><body>    <table>        <caption>学生成绩</caption>        <tr>            <th>姓名</th>            <th>数学</th>        </tr>        <tr>            <td>曹操</td>            <td>85</td>        </tr>        <tr>            <td>刘备</td>            <td>75</td>        </tr>    </table></body></html>

7.2 表格边框合并

语法：

border-collapse: 取值;

说明：

border-collapse属性取值

属性值	说明
separate	边框分开，有空隙（默认值）
collapse	边框合并，无空隙

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        table,tr,th,td {            border: 1px solid gray;        }        table {            border-collapse: collapse;        }    </style></head><body>    <table>        <caption>学生成绩</caption>        <tr>            <th>姓名</th>            <th>数学</th>        </tr>        <tr>            <td>曹操</td>            <td>85</td>        </tr>        <tr>            <td>刘备</td>            <td>75</td>        </tr>    </table></body></html>

7.3 表格边框间距

语法：

border-spacing: 像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        table,tr,th,td {            border: 1px solid gray;        }        table {            border-spacing: 10px;        }    </style></head><body>    <table>        <caption>学生成绩</caption>        <tr>            <th>姓名</th>            <th>数学</th>        </tr>        <tr>            <td>曹操</td>            <td>85</td>        </tr>        <tr>            <td>刘备</td>            <td>75</td>        </tr>    </table></body></html>

8 图片样式

8.1 图片大小

语法：

width: 像素值;height: 像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        img {            width: 40px;            height: 40px;        }    </style></head><body>    <img src="small.png" alt=""></body></html>

8.2 图片边框

语法:

border: 1px solid red;

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        img {            width: 40px;            height: 40px;            border: 1px solid red;        }    </style></head><body>    <img src="small.png" alt=""></body></html>

8.3 图片对齐

水平对齐

语法：

text-align: 取值;

说明：

text-align属性取值

属性值	说明
left	左对齐（默认值）
center	居中对齐
right	右对齐

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        .i1 {            text-align: left;        }        .i2 {            text-align: center;        }        .i3 {            text-align: right;        }    </style></head><body>    <div class="i1">        <img src="small.png" alt="">    </div>    <div class="i2">        <img src="small.png" alt="">    </div>    <div class="i3">        <img src="small.png" alt="">    </div></body></html>

图片的水平对齐属性设置是在图片标签的父标签上实现的

垂直对齐

语法：

vertical-align: 取值;

说明：

vertical-align属性取值

属性值	说明
top	顶部对齐
middle	中部对齐
baseline	基线对齐
bottom	底部对齐

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        .i1 {            vertical-align: top;        }        .i2 {            vertical-align: middle;        }        .i3 {            vertical-align: baseline;        }        .i4 {            vertical-align: bottom;        }    </style></head><body>    <div>        <span>hello,world</span>        <img class="i1" src="small.png" alt="">        <span>hello,world</span>        <hr>    </div>    <div>        <span>hello,world</span>        <img class="i2" src="small.png" alt="">        <span>hello,world</span>        <hr>    </div>    <div>        <span>hello,world</span>        <img class="i3" src="small.png" alt="">        <span>hello,world</span>        <hr>    </div>    <div>        <span>hello,world</span>        <img class="i4" src="small.png" alt="">        <span>hello,world</span>        <hr>    </div></body></html>

8.4 文字环绕

语法：

float: 取值;

说明：

float属性取值

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        img {            float: left;        }    </style></head><body>    <img src="small.png" alt="">    <p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>

9 背景样式

9.1 背景颜色

语法：

background-color: 颜色值;

说明：

颜色值有两种表示方式，一种是颜色关键字，另外一种是16进制RGB值

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            width: 200px;            height: 100px;            /* 背景颜色 */            background-color: burlywood;        }    </style></head><body>    <div>hello,world</div></body></html>

9.2 背景图片

引入背景图片

语法:

background-image: url(图片路径)

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            height: 180px;            width: 180px;            background-image: url("small.png");        }    </style></head><body>    <div></div></body></html>

背景图片重复

语法：

background-repeat: 取值;

说明：

background-repeat属性取值

属性值	说明
repeat	在水平方向和垂直方向上同时平铺（默认值）
repeat-x	只在水平方向（x轴）上平铺
repeat-y	只在垂直方向（y轴）上平铺
no-repeat	不平铺

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            height: 180px;            width: 180px;            background-image: url("small.png");            background-repeat: repeat-x;        }    </style></head><body>    <div></div></body></html>

背景图片位置

语法：

background-position: 水平距离 垂直距离

通过像素值定图片位置

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            height: 180px;            width: 180px;            border: 1px solid red;            background-image: url("small.png");            background-repeat: no-repeat;            background-position: 10px 30px;        }    </style></head><body>    <div></div></body></html>

通过关键字定位图片位置

水平方向左left、中center、右right

垂直方向上top、中center、下bottom

通过水平方向、垂直方向组合出9种方式

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <style>        div {            height: 180px;            width: 180px;            border: 1px solid red;            background-image: url("small.png");            background-repeat: no-repeat;            background-position: center center;        }    </style></head><body>    <div></div></body></html>

背景图片固定

语法：

background-attachment: 取值;

说明：

background-attachment属性取值

属性值	说明
scroll	随元素一起滚动（默认值）
fixed	固定不动

10 超链接样式

语法：

a {}a:link {}a:visited {}a:hover{}a:active{}

说明：

伪类	说明
a:link	a元素未访问时的样式
a:visited	a元素访问后的样式
a:hover	鼠标经过a元素时的样式
a:active	鼠标点击时的样式

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        a {            text-decoration: none;        }        a:hover {            color: red;        }    </style></head><body><a href="#">百度</a></body></html>

实际开发，一般设置a、a:hover样式就可以了

11 盒子模型

每一个元素都是由内容区、内边距、边框、外边距组成

属性	说明
content	内容区，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
border	边框，用于定义元素的边框
margin	外边距，用于定义当前元素与其他元素之间的距离

11.1 内容区

语法：

width: 像素值;height: 像素值;overflow: 取值;

说明：

overflow属性值

属性值	说明
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        img {            width: 30px;            height: 30px;        }        p {            width: 50px;            height: 50px;            overflow: hidden;        }    </style></head><body><img src="small.png" alt=""><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>

如果要给行内元素设置宽高，则需要给元素设置display: inline-block属性

11.2 内边距

语法：

padding-top: 像素值;padding-right: 像素值;padding-bottom: 像素值;padding-left: 像素值;

padding: 上下左右像素值;padding: 上下像素值 左右像素值;padding: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        p {            border: 1px solid red;            padding: 10px;        }    </style></head><body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>

11.3 边框

边框知识参考2.6

11.4 外边距

语法：

margin-top: 像素值;margin-right: 像素值;margin-bottom: 像素值;margin-left: 像素值;

margin: 上下左右像素值;margin: 上下像素值 左右像素值;margin: 上像素值 右像素值 下像素值 左像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        p {            border: 1px solid red;            padding: 10px;            margin: 10px;        }    </style></head><body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>

12 浮动布局

正常文档流就是我们没有使用浮动或者定位去改变的默认情况，按照从上到下，从左到右顺序的元素布局情况。

12.1 定义浮动

语法：

float: 取值

说明：

属性值	说明
left	元素向左浮动
right	元素向右浮动

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        #f {            background-color: beige;            padding: 10px;        }        #s1 {            background-color: gray;            float: left;        }        #s2 {            background-color: aqua;            float: left;        }    </style></head><body>    <div id="f">        <div id="s1">box1</div>        <div id="s2">box2</div>    </div></body></html>

12.2 清除浮动

语法：

clear: 取值;

说明：

clear属性值

属性值	说明
left	清除左浮动
right	清除右浮动
both	同时清除左浮动和右浮动

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        #f {            background-color: beige;            padding: 10px;        }        #s1 {            background-color: gray;            float: left;        }        #s2 {            background-color: aqua;            float: left;        }        .clear {            clear: both;        }    </style></head><body>    <div id="f">        <div id="s1">box1</div>        <div id="s2">box2</div>        <div class="clear"></div>    </div></body></html>

13 定位布局

13.1 固定定位

语法：

position: fixed;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        #s1 {            position: fixed;            top: 20px;            left: 100px;            color: red;        }    </style></head><body>    <div id="f">        <div id="s1">回到顶部</div>        <div id="s2">            <p>内容区</p>            ......        </div>    </div></body></html>

13.2 相对定位

相对定位，指的是该元素的位置是相对于它的原始位置计算而来的

语法：

position: relative;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        #f div {            width: 100px;            height: 50px;            background-color: burlywood;            margin: 10px;        }        .s2 {            position: relative;            top: 5px;            left: 30px;        }    </style></head><body>    <div id="f">        <div class="s1">1</div>        <div class="s2">2</div>        <div class="s3">3</div>    </div></body></html>

13.3 绝对定位

把元素定位到任意你想要的位置，完全脱离文档流

语法：

position: absolute;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值;

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        #f div {            width: 100px;            height: 50px;            background-color: burlywood;            margin: 10px;        }        .s2 {            position: absolute;            top: 200px;            left: 200px;        }    </style></head><body>    <div id="f">        <div class="s1">1</div>        <div class="s2">2</div>        <div class="s3">3</div>    </div></body></html>

13.4 静态定位

用法：

position: static;

说明：

元素position属性的默认值是static

<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <style>        #f div {            width: 100px;            height: 50px;            background-color: burlywood;            margin: 10px;        }        .s2 {            position: static;            top: 200px;            left: 200px;        }    </style></head><body>    <div id="f">        <div class="s1">1</div>        <div class="s2">2</div>        <div class="s3">3</div>    </div></body></html>