HTML|CSS之布局相关总结

知识内容：

1.浮动相关

2.display属性

3.居中显示

4.盒模型和box-sizing

5.position属性

6.响应式设计

7.flex布局

8.其他

参考：http://zh.learnlayout.com/

1.浮动相关

(1)float

float可以让一个元素浮动起来，可以让其向左浮动或者向右浮动

float实例：

 1 <!--__author__ = "wyb"-->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>文字环绕图形</title>
 7     <style>
 8         img{
 9             float: right;
10             width: 100px;
11             height: 100px;
12             margin: 5px;
13         }
14     </style>
15 </head>
16 <body>
17 
18 <p style="margin: 0 auto; width: 333px;">
19     <img src="1.jpg" alt="">
20     This is some text. This is some text. This is some text.
21     This is some text. This is some text. This is some text.
22     This is some text. This is some text. This is some text.
23     This is some text. This is some text. This is some text.
24     This is some text. This is some text. This is some text.
25     This is some text. This is some text. This is some text.
26     This is some text. This is some text. This is some text.
27     This is some text. This is some text. This is some text.
28     This is some text. This is some text. This is some text.
29     This is some text. This is some text. This is some text.
30 </p>
31 
32 </body>
33 </html>

文字环绕图片