【CSS3】布局

浮动布局：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <header>header</header>
10     <aside>aside</aside>
11     <section>section</section>
12     <footer>footer</footer>
13 </body>
14 </html>

*{
    margin:0;
    padding: 0;
}
header{
    height: 100px;
    background:rgba(10,180,10,0.5);
}
aside{
    width: 30%;
    height:450px;
    background:rgba(180,10,10,0.5);
    float: left;
    border:1px solid blue;/*aside的width加上section的width等于100%，此句会多出2px宽，影响正常布局。*/
    box-sizing: border-box;/*content-box总宽不包括外边框。border-box总宽包括外边框，可以解决上面那个问题。*/
}
section{
    width: 70%;
    height: 450px;
    background:rgba(10,10,180,0.5);
    float: left;
}
footer{
    height: 100px;
    background:pink;
    clear: left;
}

定位布局：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <header>header</header>
10     <aside>aside</aside>
11     <section>section</section>
12     <footer>footer</footer>
13     
14     <div id="div1">
15         <div id="div2"></div>
16     </div>
17 </body>
18 </html>

 1 *{
 2     margin:0;
 3     padding: 0;
 4 }
 5 body{
 6     /*border:1px solid red;*/
 7     width: 800px;
 8     margin:0 auto;
 9     position: relative;
10 }
11 header{
12     width: 800px;
13     height: 100px;
14     background:red;
15 }
16 aside{
17     width: 200px;
18     height: 300px;
19     background:green;
20 }
21 section{
22     width: 600px;
23     height: 300px;
24     background:blue;
25     position: absolute;
26     left: 200px;
27     top: 100px;
28 }
29 footer{
30     width: 800px;
31     height: 100px;
32     background:orange;
33 }
34 
35 #div1{
36     width: 500px;
37     height: 400px;
38     background:rgba(200,20,20,0.2);
39     margin:50px;
40     position: relative;/*此属性设置后其子元素则相对父元素定位*/
41 }
42 #div2{
43     width: 100px;
44     height: 80px;
45     background:rgba(20,20,200,0.5);
46     position: absolute;/*以body左上角坐标为基准点*/
47     left: 10px;/*左上角距body左边距离*/
48     top: 10px;/*左上角距body上边距离*/
49 }

多列布局：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <section>
10         <h1>标题h1</h1>
11         <p>多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局</p>
12         <p>多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局多列布局</p>
13     </section>
14 </body>
15 </html>

 1 p{
 2     text-indent: 2rem;/*首先缩进*/
 3     line-height: 2rem;/*行间距*/
 4 }
 5 section{
 6     padding: 1em;
 7     background:rgba(20,200,20,0.3);
 8     column-width: 300px;
 9     /*-webkit-column-300px;*/
10     -webkit-column-count:3;
11     -webkit-column-rule-style: solid;
12     -webkit-column-rule-width: 2px;
13     -webkit-column-rule-color: red;
14     -webkit-column-gap: 40px;
15 }
16 h1{
17     background:rgba(180,18,18,0.7);
18     text-align: center;
19     -webkit-column-span:2;/*规定元素可横跨的列数，默认为1，不横跨。all为横跨所有列。*/
20 }

弹性布局：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <section>
10         <h1>标题h1</h1>
11         <p id="p1">多列布局多列布局多列布局多列</p>
12         <p id="p2">多列布局多列布局多列布局多列布局多列布局</p>
13         <p id="p3">多列布局多列布局多列布局多列布局多</p>
14         <p id="p4">多列布局多列布局多列布局多列布局多</p>
15         <p id="p5">多列布局多列布局多列布局多列布局多</p>
16         <p id="p6">多列布局多列布局多列布局多列布局多</p>
17         <p id="p7">多列布局多列布局多列布局多列布局多</p>
18         <p id="p8">多列布局多列布局多列布局多列布局多</p>
19         <p id="p9">多列布局多列布局多列布局多列布局多</p>
20     </section>
21 </body>
22 </html>

 1 p{
 2     text-indent: 2rem;/*首先缩进*/
 3     line-height: 2rem;/*行间距*/
 4     width: 200px;
 5     margin:20px;
 6 }
 7 p:nth-child(2){
 8     background:rgba(190,19,19,0.5);
 9 }
10 p:nth-child(3){
11     background:rgba(19,190,19,0.5);
12 }
13 p:nth-child(4){
14     background:rgba(19,19,190,0.5);
15 }
16 section{
17     width: 1000px;
18     height: 500px;
19     background: rgba(180,18,18,0.1);
20     display: flex;/*弹性盒子属性开启后浮动float、clear、vertical-align、CSS多列(CSS columns)将失效。*/
21     flex-direction:;/*row默认横向布局。row-reverse从右到左布局，且内容反转。column竖向布局。column-reverse纵向反转布局。*/
22     flex-wrap:;/*nowrap不换行。wrap换行。wrap-reverse换行且反转排列*/
23     justify-content: ;/*flex-start默认排列方式。flex-end从结束处开始对齐。center剧中排列。space-between两端分散等距排列对齐，两端无空。space-around类似space-between，但两端有空。*/
24     /*横向排列则x为主轴主y为侧轴，竖向排列则y为主轴x为侧轴。*/
25     align-items: ;/*flex-start默认顶端对齐。flex-end底端对齐。center剧中对齐。baseline基线对齐，基线可理解为小写字母a下划线，底线可理解为小写字母g下划线，顶线可理解为上写字母b上划线，中线可理解为小写字母a中划线。stretch拉伸。*/
26     align-content:;/*flex-start、flex-end、center、baseline、stretch*/
27 }
28 h1{
29     background: red;
30     height: 90px;
31     order: 2;/*值越小越靠前*/
32 }
33 #p1{
34     height: 200px;
35     order: 1;
36     flex-grow: 1;/*所有子元素设为1后则所有子元素会平均分配空间使得全部充满父元素。子元素扩展充满父元素时的比例因子*/
37     flex-shrink: ;/*父元素收缩时子元素所占空间的比例因子，值越大父元素收缩时子元素分担的越大即子元素收缩越多*/
38     flex-basis: 30px;/*设置固定值，不受其他元素收缩影响*/
39 }
40 #p2{
41     height: 180px;
42 }
43 #p3{
44     height: 160px;
45     /*align-self: flex-end;*//*作用同align-items，只中align-items设置在父元素上作用于子元素，align-self是设置在子元素上作用于子元素本身。*/
46 }
47 #p4{
48     background: pink;
49     height: 150px;
50 }
51 #p5{
52     background: orange;
53     height: 140px;
54 }
55 #p6{
56     background: pink;
57     height: 130px;
58 }
59 #p7{
60     background:green;
61     height: 120px;
62 }
63 #p8{
64     background: blue;
65     height: 110px;
66 }
67 #p9{
68     background: yellow;
69     height: 170px;
70 }

给HTML设置边框：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             border:2px solid green;
 9             margin:2px;/*给所有的加边框，包括html*/
10         }
11         body,html{
12             height: 100%;/*此设置会使div的高度百分比设置生效*/
13         }
14         div{
15             width: 100%;
16             height: 50%;
17             background:red;
18         }
19     </style>
20 </head>
21 <body>
22     <div>div</div>
23 </body>
24 </html>

弹性盒子布局简单示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>    
 9     <header>header头部</header>
10     <section>
11         <nav>nav导航</nav>
12         <article>article正文</article>
13         <aside>aside右侧栏</aside>
14     </section>
15     <footer>footer底部</footer>
16 </body>
17 </html>

 1 *{
 2     margin:0;
 3     padding: 0;
 4 }
 5 body,html{
 6     height: 100%;/*若不设置此属性则flex-grow不会生效*/
 7     font-weight: bold;
 8     font:2em 黑体;
 9 }
10 header,footer{
11     background:rgba(110,11,11,0.5);
12     padding: 10px;
13     text-align: center;
14     line-height: 2rem;
15     color: #fff;
16     /*flex-grow: 1;*//*头底各占一份*/
17 }
18 section{
19     background:rgba(17,170,17,0.5);
20     /*flex-grow: 8;*//*中间占8份*/
21     flex-grow: 1;
22 
23     display: flex;
24     flex-flow: row;
25 }
26 nav{
27     background:rgba(18,18,180,0.5);
28     width: 150px;
29 }
30 article{
31     min-width: 400px;
32     background:rgba(110,110,20,0.5);
33     flex-grow: 1;
34 }
35 aside{
36     background:rgba(30,120,120,0.5);
37 }
38 body{
39     display: flex;/*开启弹性盒子布局模式*/
40     flex-flow: column;
41 }