css

CSS,层叠样式表(Cascading Style Sheet),给网页中的HTML标签设置样式

CSS样式引入方式

外部样式

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

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

内部样式

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

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

行内样式

CSS写在标签的style属性中

三种区别

图片[1]-css-秋风落叶

基础选择器

选择器,就是选取(查找)需要设置样式元素方式

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

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

元素选择器

通过元素名称,选取(查找)相同元素,然后对相同元素设置CSS样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我爱中国</p>
    <p>我爱人民</p>
    <div>我爱家乡</div>
</body>
</html>
图片[2]-css-秋风落叶

小结:

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

类选择器

通过类名称,找到页面中所有带这个类名称的元素,然后对其设置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>
图片[3]-css-秋风落叶

小结:

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

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>
图片[4]-css-秋风落叶

小结:

1、所有元素都有id属性

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

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

通配符选择器

查找页面中所有的元素,然后对其设置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>
图片[5]-css-秋风落叶

小结:

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

后代选择器

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #one p {
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">
        <p>1</p>
        <p>2</p>
        <div>3</div>
        <div>
            <p>4</p>
            <p>9</p>
        </div>
    </div>
    <div id="two">
        <p>10</p>
        <p>11</p>
        <div>12</div>
        <div>
            <p>13</p>
            <p>14</p>
        </div>
    </div>
</body>
</html>
图片[6]-css-秋风落叶

群组选择器

根据多个选择器各自查找符合条件的元素,然后对其设置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>
图片[7]-css-秋风落叶

字体样式

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

字体相关的CSS属性

图片[8]-css-秋风落叶

字体类型

语法:

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>
图片[9]-css-秋风落叶

字体大小

语法:

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>
图片[10]-css-秋风落叶

字体粗细

语法:

font-weight: normal/bold/100~900
图片[11]-css-秋风落叶

实际开发一般会设置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>
图片[12]-css-秋风落叶

字体风格

语法:

font-style: 取值
图片[13]-css-秋风落叶

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

font连写

语法:

font: style weight size family;

说明:

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

不常用,作为了解

字体颜色

语法:

color: 颜色值

说明:

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

问题一:给同一个元素设置了相同的属性样式,哪个生效?

答:样式会层叠(覆盖),写在最后面的会生效。

问题二:html里面有注释,css有没有注释,如何写?

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

文本样式

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

文本相关CSS属性

图片[14]-css-秋风落叶

首行缩进

语法:

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>
图片[15]-css-秋风落叶

水平对齐

语法:

text-align: 取值

说明:

text-align属性取值

图片[16]-css-秋风落叶
<!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>
图片[17]-css-秋风落叶

文本修饰

语法:

text-decoration: 取值

说明:

text-decoration属性值

图片[18]-css-秋风落叶
<!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>
图片[19]-css-秋风落叶

大小写转换

语法:

text-transform: 取值

说明:

text-transform属性取值

图片[20]-css-秋风落叶
<!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>
图片[21]-css-秋风落叶

行高

语法:

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
图片[22]-css-秋风落叶

间距

字间距

语法:

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>
图片[23]-css-秋风落叶

词间距

语法:

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>
图片[24]-css-秋风落叶

边框样式

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

图片[25]-css-秋风落叶

边框的宽度

语法:

border-width: 像素值;

说明:

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

边框的外观

语法:

border-style: 取值;

说明:

border-style取值有三个

图片[26]-css-秋风落叶

边框的颜色

语法:

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>
图片[27]-css-秋风落叶

边框样式简写

语法:

border: border-width border-style border-color;
div {
    border: 1px solid red;
}

边框局部样式

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

<!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>
图片[28]-css-秋风落叶

列表样式

列表项符号

列表项符号

在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属性值

图片[29]-css-秋风落叶

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

图片[30]-css-秋风落叶
<!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>
图片[31]-css-秋风落叶

去除列表项符号

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

<!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>
图片[32]-css-秋风落叶

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

列表项图片

语法:

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>
图片[33]-css-秋风落叶

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

表格样式

表格标题位置

caption-side: 取值;

说明:

caption-side属性取值

图片[34]-css-秋风落叶
<!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>
图片[35]-css-秋风落叶

表格边框合并

border-collapse: 取值;

说明:

border-collapse属性取值

图片[36]-css-秋风落叶
<!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>
图片[37]-css-秋风落叶

表格边框间距

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>
图片[38]-css-秋风落叶

图片样式

图片大小

width: 像素值;
height: 像素值;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        img {
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
    <img src="small.png" >
</body>
</html>
图片[39]-css-秋风落叶

图片边框

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" >
</body>
</html>
图片[40]-css-秋风落叶

图片对齐

水平对齐

语法:

text-align: 取值;

说明:

text-align属性取值

图片[41]-css-秋风落叶
<!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" >
    </div>
    <div class="i2">
        <img src="small.png" >
    </div>
    <div class="i3">
        <img src="small.png" >
    </div>
</body>
</html>
图片[42]-css-秋风落叶

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

垂直对齐

语法:

vertical-align: 取值;

说明:

vertical-align属性取值

图片[43]-css-秋风落叶
<!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" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i2" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i3" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
    <div>
        <span>hello,world</span>
        <img class="i4" src="small.png" >
        <span>hello,world</span>
        <hr>
    </div>
</body>
</html>
图片[44]-css-秋风落叶

文字环绕

语法:

float: 取值;

说明:

float属性取值

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

背景样式

背景颜色

语法:

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>
图片[47]-css-秋风落叶

背景图片

引入背景图片

语法:

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>
图片[48]-css-秋风落叶

背景图片重复

语法:

background-repeat: 取值;

说明:

background-repeat属性取值

图片[49]-css-秋风落叶
<!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>
图片[50]-css-秋风落叶

背景图片位置

语法:

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>
图片[51]-css-秋风落叶

通过关键字定位图片位置

水平方向左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>
图片[52]-css-秋风落叶

背景图片固定

语法:

background-attachment: 取值;

说明:

background-attachment属性取值

图片[53]-css-秋风落叶

超链接样式

语法:

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

说明:

图片[54]-css-秋风落叶
<!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样式就可以了

盒子模型

图片[55]-css-秋风落叶

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

图片[56]-css-秋风落叶

内容区

图片[57]-css-秋风落叶
<!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" >
<p>舜发于畎亩之中,傅说举于版筑之间,胶鬲举于鱼盐之中,管夷吾举于士,孙叔敖举于海,百里奚举于市。故天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。</p>
</body>
</html>
图片[58]-css-秋风落叶

内边距

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

外边距

图片[61]-css-秋风落叶
<!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>
图片[62]-css-秋风落叶

浮动布局

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

定义浮动

图片[63]-css-秋风落叶
<!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>
图片[64]-css-秋风落叶

清除浮动

图片[65]-css-秋风落叶
<!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>
图片[66]-css-秋风落叶

定位布局

固定定位

图片[67]-css-秋风落叶
<!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>
图片[68]-css-秋风落叶

相对定位

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

图片[69]-css-秋风落叶
<!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>
图片[70]-css-秋风落叶

绝对定位

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

语法:

position: absolute;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;
<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>
图片[71]-css-秋风落叶

静态定位

用法:

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>
图片[72]-css-秋风落叶

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容