一、布局方式
1.标准流/静态流
默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示
2.浮动布局
主要用于设置块元素的水平排列
1）属性:float
2）取值: 可取left或right，设置元素向左浮动或向右浮动. 示例:float:left/right;
3）特点:
- 元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位
- 元素设置浮动,就具有块元素的特征,可以手动调整宽高
- "文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示
4）常见问题: 子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局
5）解决:
- 对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)
- 在父元素的末尾添加空的块元素。设置clear:both;清除浮动
- 为父元素设置overflow:hidden;解决高度为0
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #box{
8 width:500px;
9 height:500px;
10 margin:0 auto;
11 background:orange;
12
13
14 }
15 #d1,#d2,#d3{
16 width:200px;
17 height:200px;
18 }
19 #d1{
20
21 background:red;
22 float:right;
23
24 }
25 #d2{
26 height:300px;
27 background:green;
28 float:right;
29 }
30 #d3{
31 background:blue;
32 float:right;
33 }
34 span{
35 float:right;
36 width:200px;
37 height:200px;
38 background:pink;
39 <!--clear:both;-->
40
41 }
42 </style>
43 </head>
44 <body>
45 <div id="box">box
46 <div id="d1">d1</div>
47 <div id="d2">d2</div>
48 <div id="d3">d3</div>
49 <span>span1</span>
50
51 </div>
52 <!--脱离文档流的元素在文档中不在站位,可以手动调宽高-->
53 <span>span2</span>
54 </body>
55 </html>
浮动布局演示1
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div{
8 width:200px;
9 height:200px;
10 background:red;
11 float:left;
12 margin-right:30px;
13 }
14 h1{
15 background:green;
16
17 }
18 input{
19 /*正常元素在文档流中找位置，浮动元素在上层中找位置*/
20 float:left;
21 }
22 </style>
23 </head>
24 <body>
25 <div></div>
26 <span>行内元素</span>
27 <input type="text">
28 <h1>浮动元素只能遮挡元素的位置，但是不影响内容显示</h1>
29 </body>
30 </html>
浮动布局演示2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #nav{
8 width:900px;
9 height:24px;
10 background:gray;
11 }
12 .left{
13 width:300px;
14 float:left;
15 background:green;
16 }
17 .right{
18 float:right;
19 background:red;
20 width:300px;
21 }
22 ul{
23 margin:0;
24 passing:0;
25 /*去掉列表符号*/
26 list-style:none;
27 }
28 li{
29 float:left;
30 margin-right:50px;
31 }
32 #main{
33 margin-top:50px;
34 width:900px;
35 /*解决子元素全部浮动造成父元素告诉为0的问题*/
36 /*解决方法1：height:400px;*/
37 /*解决方法2：overflow:hidden;*/
38 overflow:hidden;
39 background:pink;
40 }
41 .item1{
42 width:580px;
43 height:400px;
44 background:gray;
45 float:left;
46 }
47 .item2,.item3{
48 width:300px;
49 height:190px;
50 background:gray;
51 float:right;
52 }
53 .item2{
54 margin-bottom:20px;
55 }
56 #i1,#i2{
57 width:200px;
58 height:200px;
59 background:red;
60 }
61 #i1{
62 background:green;
63 float:left;
64 }
65 #i2{
66 /*使文档中正常元素不受前面浮动元素影响*/
67 /*clear:left/right/both*/
68 clear:left;
69 }
70 .clear{
71 clear:both;
72 }
73 </style>
74 </head>
75 <body>
76 <div id="nav">
77 <div class="left">
78 <ul>
79 <li id="d1">首页</li>
80 <li id="d2">物流</li>
81 <li id="d3">客户</li>
82 </ul>
83 </div>
84 <div class="right">右侧导航</div>
85 </div>
86 <div id="main">
87 <div class="item1">1</div>
88 <div class="item2">2</div>
89 <div class="item3">3</div>
90 <div class="clear">1</div>
91 </div>
92 <div>
93 联系我们
94 <div id="i1">1</div>
95 <div id="i2">2</div>
96 </div>
97 </body>
98 </html>
浮动布局演示3
3.定位布局
结合偏移属性调整元素的显示位置
1）属性: position
2）取值: 可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位） 示例:postion:relative/absolute/fixed
3）偏移属性:设置定位的元素可以使用偏移属性调整距离参照物的位置
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #banner{
8 width:300px;
9 height:250px;
10 /*相对定位*/
11 position:relative;
12 }
13 #d1{
14 color:#fff;
15 /*绝对定位*/
16 position:absolute;
17 height:30px;
18 right:0px;
19 /*根据参照物对应方向的值计算偏移量（250*50%）*/
20 top:50%;
21 margin-top:-15px;
22 }
23 #d2{
24 color:#fff;
25 /*绝对定位*/
26 position:absolute;
27 height:30px;
28 /*根据参照物对应方向的值计算偏移量（250*50%）*/
29 top:50%;
30 margin-top:-15px;
31 }
32 #fixed_{
33 position:absolute;
34 width:150px;
35 top:230px;
36 color:#fff;
37 }
38 </style>
39 </head>
40 <body>
41 <div id="banner">
42 <img src="northStar.jpg" class="c1" alt="">
43 <a href="" id="d1">下一张</a>
44 <img src="timg.gif" class="c2" alt="">
45 <a href="" id="d2">上一张</a>
46 </div>
47 <div id="fixed_">
48 固定定位
49 </div>
50 </body>
51 </html>
固定定位演示
4）分类
relative 相对定位(原来的位置占位)
元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #d1,#d2{
8 width:200px;
9 height:200px;
10 background:red;
11 margin:0 auto;
12 }
13 #d1{
14 background:green;
15 /*相对定位，已定位的元素可以设置偏移属性，调整元素的显示位置*/
16 position:relative;
17 /*
18 top:100px;
19 left:-100px;
20 */
21 bottom:-100px;
22 right:100px;
23 }
24 </style>
25 </head>
26 <body>
27 <div id="d1"></div>
28 <div id="d2"></div>
29 </body>
30 </html>
相对定位演示
absolute 绝对定位（原来的位置不占位）
1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口进行偏移
2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高 使用绝对定位 :
"父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #box{
8 width:500px;
9 margin:0 auto;
10 background:orange;
11 position:relative;
12 }
13 #d1,#d2{
14 width:200px;
15 height:200px;
16 background:red;
17
18 }
19 #d1{
20 background:green;
21 /*绝对定位*/
22 position:absolute;
23 top:0;
24 left:0;
25
26 }
27 body{
28 /*设置为定位元素*/
29 position:relative;
30
31 }
32 </style>
33 </head>
34
35 <body>
36 <div id="box">
37 <div id="d1"></div>
38 <div id="d2"></div>
39 </div>
40 </body>
41 </html>
绝对定位演示
fixed 固定定位（不占位）
1. 参照窗口进行定位,不跟随网页滚动而滚动
2. 脱离文档流
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #main{
8 height:1500px;
9 background:pink;
10 }
11 #chat{
12 width:300px;
13 height:300px;
14 background:orange;
15 /*固定定位:脱离文档流，参照窗口偏移；
16 不跟随页面滚动而滚动*/
17 position:fixed;
18 right:0;
19 bottom:0;
20 }
21 </style>
22 </head>
23 <body>
24 <div id="main"></div>
25 <div id="chat">千年传奇，值得你拥有，快注册吧，注册就送屠龙刀。</div>
26 </body>
27 </html>
固定定位演示
5）堆叠次序
元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：
属性 : z-index
取值 : 无单位的数值,数值越大,越靠上
堆叠：
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div{
8 width:200px;
9 height:200px;
10 background:red;
11 }
12 #d1{
13 background:green;
14 position:relative;
15 /*只有定位元素才能使用偏移属性调位置*/
16 /*
17 position:relative;
18 top:100px;
19 left:100px;
20 */
21 z-index:1
22 }
23 #d2{
24 /*永远定位元素在上*/
25 position:relative;
26 left:100px;
27 bottom:-100px;
28
29 }
30 #d2:hover{
31 /*调整堆叠次序，属性：z-index
32 取值为无单位的整数，值越大越靠上
33 只有定位元素能够使用z-index属性调整次序*/
34 z-index:2;
35 }
36
37 </style>
38 </head>
39 <body>
40 <!--正常元素与定位元素发生堆叠，永远定位元素在上方显示-->
41 <!--同为定位元素发生堆叠，根据标签的书写顺序，后来者居上-->
42 <div id="d2"></div>
43 <div id="d1"></div>
44 <h1>
45 实现网页：
46 上方为导航栏（包含若干导航项，包含下拉菜单）
47 下方为轮播图区域（包含图片，图片索引，左右按钮）
48 </h1>
49 </body>
50 </html>
z-index示例
二、背景属性
1.背景颜色
background-color: red;
2.背景图片相关
1）设置背景图片:background-image : url("路径");
设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号
2）设置背景图片的重复方式
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
取值 ：
-
-
- repeat 默认值，沿水平和垂直方向重复平铺
- repeat-x 沿X轴重复平铺
- repeat-y 沿Y轴重复平铺
- no-repeat 不重复平铺
-
background-repeat:repeat/repeat-x/repeat-y/no-repeat
3）设置背景图片的显示位置:默认显示在元素左上角 background-position:x y;
取值方式：
1. 像素值：设置背景图片的在元素坐标系中的起点坐标
2. 方位值
-
- 水平 ：left/center/right
- 垂直 ：top/center/bottom
注：如果只设置某一个方向的方位值，另外一个方向默认为center
3. 百分比：类似于方位值，根据百分比计算背景图片的显示坐标。
计算方式：
横坐标 = (元素宽度 - 背景图片宽度）* x%
纵坐标 = (元素高度 - 背景图片高度) * y %
特殊值：
0% 0% 左上角
100% 100% 右下
50% 50% 居中显示
精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标
4）设置背景图片的尺寸：background-size:width height;
取值方式 ：
1. 像素值
1. 500px 500px; 同时指定宽高
2. 500px; 指定宽度，高度自适应
2. 百分比：百分比参照元素的尺寸进行计算
1. 50% 50%; 根据元素宽高,分别计算图片的宽高
2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放
3.背景属性简写:background:color url("") repeat position;
注意 ：
1. 如果需要同时设置以上属性值，遵照相应顺序书写
2. background-size 单独设置
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 div,h1{
8 width:100px;
9 height:100px;
10 margin:200px auto;
11 background-color:pink;
12 background-image:url(northStar.jpg);
13
14 /*y轴重复*/
15 background-repeat:repeat-y;
16 /*x轴重复*/
17 background-repeat:repeat-x;
18 /*不重复*/
19 background-repeat:no-repeat;
20 /*background-position:-100px -100px;*/
21 background-position:100% 100%;
22 }
23 div:hover{
24 background-position:-160px -40px;
25 }
26 h1{
27 width:500px;
28 height:500px;
29 margin:0 auto;
30 /*
31 background-size特殊取值：
32 cover：覆盖 将图片等比拉伸至足够大，完全覆盖元素，超出部分不可见(最小的边距和元素块一样大)
33 contain:包含 将图片等比拉伸至刚好被元素容纳（最大的边距不超过元素块）
34 */
35 background-size:cover;
36 }
37 h2{
38 width:500px;
39 height:500px;
40 background:cyan url(northStar.jpg) no-repeat center;
41 font: 400 36px "宋体";
42 }
43 </style>
44 </head>
45 <body>
46 <h2>字体样式展示</h2>
47 <h1></h1>
48 <div></div>
49 </body>
50 </html>
背景属性演示
三、文本属性
1.字体相关
1）设置字体大小：font-size:20px;
2）设置字体粗细程度
取值 ：
-
- normal（默认值）等价于400
- bold (加粗) 等价于700
3）设置斜体：font-style:italic;
4）设置字体名称：font-family:Arial,"黑体";
取值 :
1. 可以指定多个字体名称作为备选字体,使用逗号隔开
2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号
例 : font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5）字体属性简写：font : style weight size family;
注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项
2.文本样式
1）文本颜色：color:red;
2）文本装饰线：text-decoration:none;
取值 :
-
- underline 下划线
- overline 上划线
- line-through 删除线
- none 取消装饰线
3）文本内容的水平对齐方式：text-align:center;
取值 :
-
- left(默认值) 左对齐
- center 居中对齐
- right 右对齐
- justify 两端对齐
4）行高：line-height:30px;
使用 :文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
-
- line-height = height 设置一行文本在元素中垂直居中
- line-height > height 文本下移显示
- line-height < height 文本靠上显示
特殊 :line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高
5）font属性简写2：font : size/line-height family;
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 p{
8 font-size:32px;
9 font-weight:bold;
10 /*font-style:italic;*/
11 font-family:"宋体","黑体";
12 color:blue;
13 text-decoration:none;
14 width:200px;
15 background:orange;
16 height:200px;
17 /*居中*/
18 text-align:justify;
19 /*和文本高度一样（居中效果）*/
20 /*根据字体大小计算行高*/
21 line-height:2;
22 }
23 span{
24 /*行高*/
25 font:italic 700 32px/2 "黑体";
26 background:red;
27
28 }
29 </style>
30 </head>
31 <body>
32 <h1>python</h1>
33 <p>hello python hello python hello python hello python hello python hello python</p>
34 <span>人生苦短</span>
35 </body>
36 </html>
文本属性演示
原文地址：https://www.cnblogs.com/maplethefox/p/11179111.html