构成	语言	描述
结构	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>

本文分类：建站百科
本文标签：无
浏览次数：100 次浏览
发布日期：2024-11-11 08:40:29
本文链接：https://www.zuowangzhan.net.cn/baike/rm8G0zpQXO.html

下一篇 > CSS基础教程：轻松掌握CSS核心技巧

手机网站建设包含什么工作？ 2024-11-18 10:08:38
网站建设哪些类型比较常见？ 2024-11-18 09:54:34
网站建设如何构建合理的内链系统？ 2024-11-18 09:39:13
在做网站时标准的网站建设报价单的有哪些内容？ 2024-11-18 09:25:09
怎么制作一个网站：企业网站制作流程！ 2024-11-18 09:10:59
网站上线前一定要检查的的28项内容 2024-11-18 08:55:13

零基础入门前端CSS知识整理