页面布局-浮动定位

Posted 2020-12-27 roc-atlantis

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面布局-浮动定位相关的知识，希望对你有一定的参考价值。

id选择器里面只能有一个值，class可以有多个值。

回顾

什么是盒子模型
元素(盒子) 实际大小(内容、边框、内边距)
块状元素内联元素
display 属性： none / inline / block / inine-block
标准文档流
盒子和盒子位置 margin塌陷
相关属性 display / overflow:auto/hidden/scroll overflow-x overflow-y margin visibility:visible/hidden

1 浮动

1.1 浮动

元素可以设置向左或者向右浮动（不会跳出父元素的宽）
元素浮动后，会脱离文档流。（对后面的元素产生影响）
元素一旦浮动，会转换为块状元素
浮动的元素并不独占一行(仍然是块状元素) 因为脱离标准文档流
浮动的元素，宽度默认会是auto，被内容撑开
多个元素浮动，会排成一行，宽度超过父元素宽度，会自动换行

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>同志浮动</title>
  6     <style>
  7         .box {
  8             padding: 20px;
  9             width: 1000px;
 10             border: 5px dashed red;
 11             margin-bottom: 10px;
 12         }
 13 
 14         .item {
 15             width:100px;
 16             height:100px;
 17             background:#ccc;
 18             border:1px solid orange;
 19     
 20         }
 21 
 22         .item02 {
 23             /*设置浮动*/
 24             /*float:left;*/
 25             width:50px;
 26             background:#ccc;
 27         }
 28         .item03 {
 29             width:80px;
 30             background:#369;
 31         }
 32 
 33         .item04 {
 34             width:100px;
 35             background:#f90;
 36         }
 37 
 38 
 39         .box02 .item02 {
 40             float:left;
 41         }
 42 
 43 
 44         /*第二个浮动*/
 45         .box03 .item03 {
 46             float: left;
 47         }
 48 
 49         /*第三个元素浮动*/
 50         .box04 .item04 {
 51             float: left;
 52         }
 53 
 54         /*第三个元素 向右浮动*/
 55         .box05 .item04 {
 56             float: right;
 57         }
 58 
 59         /*第二个元素向右浮动*/
 60         .box06 .item03 {
 61             float: right;
 62         }
 63         
 64 
 65         /*整体向左浮动*/
 66         .box07 .item {
 67             float: left;
 68         }
 69         .box07 .item02 {
 70             height: 150px;
 71         }
 72     </style>
 73 </head>
 74 <body>
 75     <h1>浮动</h1>
 76     <hr>
 77 
 78     <div class="box box01">
 79         <div class="item item02">1</div>
 80         <div class="item item03">2</div>
 81         <div class="item item04">3</div>
 82     </div>
 83 
 84     <h2>第一元素浮动</h2>
 85     <div class="box box02">
 86         <div class="item item02">1</div>
 87         <div class="item item03">2</div>
 88         <div class="item item04">3</div>
 89     </div>
 90 
 91 
 92     <h2>第二元素浮动</h2>
 93     <div class="box box03">
 94         <div class="item item02">1</div>
 95         <div class="item item03">2</div>
 96         <div class="item item04">3</div>
 97     </div>
 98 
 99     <h2>第三元素浮动</h2>
100     <div class="box box04">
101         <div class="item item02">1</div>
102         <div class="item item03">2</div>
103         <div class="item item04">3</div>
104     </div>
105 
106     <div style="clear:both"></div>
107 
108     <h2>第三元素向右浮动</h2>
109     <div class="box box05">
110         <div class="item item02">1</div>
111         <div class="item item03">2</div>
112         <div class="item item04">3</div>
113     </div>
114     
115     <div style="clear:both"></div>
116 
117     <h2>第二元素向右浮动</h2>
118     <div class="box box06">
119         <div class="item item02">1</div>
120         <div class="item item03">2</div>
121         <div class="item item04">3</div>
122     </div>
123 
124 
125     <h2>全部向左浮动</h2>
126     <div class="box box07">
127         <div class="item item02">1</div>
128         <div class="item item03">2</div>
129         <div class="item item04">3</div>
130     </div>
131 
132 </body>
133 </html>

浮动

首字符环绕以及文字环绕

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>首字符环绕</title>
 6     <style>
 7         p {
 8             width: 800px;
 9             padding: 10px;
10             border: 1px solid #ccc;
11         }
12 
13         p strong {
14             font-size:3em;
15             width: 40px;
16             /*浮动*/
17             float: left;
18         }
19     </style>
20 </head>
21 <body>
22     <h1>同志环绕</h1>
23     <hr>
24 
25     <p>
26         <strong>L</strong>orem ipsum dolor sit amet, consectetur adipisicing elit. Officia aliquid rerum temporibus, harum quia consequatur suscipit at facilis minima eveniet! Consectetur suscipit veniam doloremque, eligendi, porro soluta cupiditate voluptates eos? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut laborum ipsum adipisci recusandae dicta dignissimos repellat rerum similique dolores quod molestiae voluptatum sed, animi sequi, mollitia asperiores voluptates, quasi quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius vel nam assumenda, rerum ullam officiis molestiae veniam, quos tempora necessitatibus illum minima reprehenderit explicabo dignissimos! Quas consequuntur, doloribus qui, sequi eum tenetur quia. Laborum quisquam, sunt iusto ipsa provident quos amet commodi officiis consequatur eveniet? Sunt ipsum molestias aperiam esse saepe, dolorum corporis nostrum tempora rerum laboriosam mollitia culpa doloribus fuga temporibus assumenda natus? Incidunt a, numquam quisquam aspernatur. Placeat, nihil, excepturi! Consequatur illum accusamus eveniet praesentium dolores doloribus, suscipit assumenda veniam, laudantium aspernatur quas. Nemo quo debitis, sint cupiditate natus, id, facere, soluta a tenetur dolores magnam recusandae! Itaque!
27     </p>
28 </body>
29 </html>

首字符环绕

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文字环绕图片</title>
 6     <style>
 7         article {
 8             width: 600px;
 9             padding: 10px;
10             border: 2px solid #ccc;
11         }
12 
13         article img {
14             width:100px;
15             float: left;
16             margin-right:10px;
17         }
18     </style>
19 </head>
20 <body>
21     <h1>同志新闻</h1>
22     <hr>
23 
24     <article>
25         <img src="../../dist/images_one/10.jpg" alt="temporibus">
26         <p>
27             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente dicta sit eos magni alias, nesciunt veniam at reiciendis eius. Labore inventore, sunt nulla ullam! Voluptate iste, libero unde tempora corporis autem voluptatum similique repellat perspiciatis ducimus, vero natus aperiam aliquam, ut reiciendis nesciunt. Quod cum, enim. Voluptatum quae eum repellendus quo voluptatem dolorem earum ut modi inventore sint reiciendis culpa recusandae ea neque harum nesciunt alias, totam, omnis nemo! Tempore, sunt expedita nemo minus nihil recusandae temporibus maiores quia numquam dolores voluptatibus eaque voluptatem debitis eos, nisi, quod quas. Corporis laudantium dolore, ipsam hic commodi, ullam illum necessitatibus nesciunt repudiandae!
28         </p>
29     </article>
30 </body>
31 </html>

文字环绕图片

1.2 浮动的影响

对后面元素影响。后面元素会整体向前
对父元素有影响（父元素的高不能被撑开）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动</title>
 6     <style>
 7         .list {
 8             border: 2px solid red;
 9             width: 600px;
10             list-style: none;
11             padding: 0;
12         }
13 
14         .list li {
15             width:100px;
16             height: 100px;
17             background:#ccc;
18             border:1px solid green;
19 
20             float: left;
21         }
22     </style>
23 </head>
24 <body>
25     <ul class="list">
26         <li>1</li>
27         <li>2</li>
28         <li>3</li>
29         <li>4</li>
30         <li>5</li>
31         <li>6</li>
32         <li>7</li>
33         <li>8</li>
34     </ul>
35 </body>
36 </html>

多个浮动超过父元素宽度

1.3 消除浮动影响

消除元素对后面元素的影响，在后面的元素设置 clear:both/left/right
消除子元素浮动对父元素的影响。给元素浮动或者设置 overflow

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动影响</title>
 6     <style>
 7         header {
 8             /*居中 左右是auto*/
 9             margin: 0 auto;
10 
11             width: 800px;
12             /*height: 100px;*/
13             
14             color: #000;
15             text-align: center;
16 
17             border: 1px solid red;
18 
19             /*消除子元素浮动 对老子的影响*/
20             /*float: left;*/
21             overflow: auto; /*消除子元素浮动对父元素的影响*/
22         }
23 
24         .logo {
25             float: left;
26             width: 200px;
27 
28             /*行高100px， 对.logo里面的文字*/
29             line-height: 100px;
30             background: #f90;
31             height: 150px;
32         }
33         .logo h1 {
34             /*h1的行高，继承了父元素的行高 对h1里面的文字进行设置*/
35             margin: 0;
36         }
37         .banner {
38             float: right;
39             width: 580px;
40             line-height: 100px;
41             background: #369;
42         }
43 
44 
45         /*导航*/
46         nav {
47 
48             /*清楚前面的浮动对老子的影响*/
49         /*    clear: both;
50             clear: left;
51             clear: right;
52 */
53             clear: right;
54             clear: left;
55             clear: both;
56 
57             margin:10px auto;
58             width:800px;
59             text-align: center;
60             background:pink;
61             padding:10px 0px;
62         }
63         nav ul {
64             list-style:none;
65             margin:0;
66             padding:0;
67         }
68         nav li {
69             display: inline-block;
70         }
71 
72         
73     </style>
74 </head>
75 <body>
76     <!--页头-->
77     <header>
78         <div class="logo">
79             <h1>同志交友</h1>
80         </div>
81         <div class="banner">
82             Lorem ipsum dolor sit amet,
83         </div>
84     </header>
85 
86     <!--导航-->
87     <nav>
88         <ul>
89             <li><a href="#">首页</a></li>
90             <li><a href="#">博客</a></li>
91             <li><a href="#">论坛</a></li>
92             <li><a href="#">关于我们</a></li>
93             <li><a href="#">举报我们</a></li>
94         </ul>
95     </nav>
96 </body>
97 </html>

消除浮动影响

3 定位布局

3.1 相对定位

通过 position:relative 设置元素为相对定位元素
元素设置为相对定位之后，不会脱离文档流，不影响其他元素
可以通过 left、top、right、bottom给相对定位的元素设置位置
定位元素：根据原先默认的位置去定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>相对定位</title>
 6     <style>
 7         .box {
 8             width:150px;
 9             height: 150px;
10             border:2px solid red;
11             background: #ccc;
12 
13             /*设置为相对定位的元素*/
14             position: relative;
15             /*left:300px;*/
16             top:100px;
17             /*right:20px;*/
18             /*bottom: 100px;*/
19             /*left:100px; /*优先级高*/*/
20             /*right:100px;*/
21         }
22     </style>
23 </head>
24 <body>
25     <h1>同志-相对定位</h1>
26     <hr>
27 
28     <div class="box"></div>
29 
30     <hr>
31 
32     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facere vel exercitationem, sit saepe ut consectetur molestiae temporibus quasi earum praesentium. Molestiae autem, atque tempore. Veritatis odit ratione autem ipsam.</p>
33 </body>
34 </html>

相对定位

3.2 绝对定位

通过position:absolute来设置绝对定位
元素绝对定位后，脱离文档流，影响后面的元素。宽度默认会被内容撑开
可以通过 left、top、right、bottom给绝对定位的元素设置位置
定位规则：根据第一个定位的祖先元素，如果没有定位的祖先元素，根据html元素。祖先元素什么定位都可以

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绝对定位</title>
 6     <style>
 7         #box {
 8             width: 800px;
 9             padding: 20px;
10             border: 2px solid red;
11 
12             /*设置相对定位*/
13             position: relative;
14             /*position: absolute;*/
15         }
16         p {
17             border:1px solid #ccc;
18             padding: 20px;
19         }
20 
21         #inner {
22             width: 100px;
23             height:100px;
24             background: #f90;
25             
26             /*绝对定位*/
27             position: absolute;
28             left: 100px;
29             top: 100px;
30         }
31     </style>
32 </head>
33 <body>
34     <h1>绝对定位</h1>
35     <hr>
36 
37     <div id="box">
38         
39         <div id="inner">绝对定位</div>
40         
41         <hr>
42 
43         <p>
44             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, vitae veritatis porro perferendis harum sed minima eos exercitationem, praesentium id corporis deserunt eligendi laboriosam aliquid eius nesciunt temporibus a incidunt.
45         </p>
46     </div>
47 </body>
48 </html>

绝对定位

3.3 固定定位

定义使用的CSS属性

position:  
left
top
right
bottom
z-index

两个布局相关实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>布局实例</title>
 6     <style>
 7         body {
 8             margin: 0px;
 9         }
10         /*容器*/
11         .container {
12             margin: 0 auto;
13             width: 1000px;
14         }
15 
16         /*页头*/
17         .page-header {
18             overflow: hidden;
19             background: #999;
20             color: #fff;
21         }
22         
23         /*页面主体*/
24         .page-main {
25 
26         }
27         
28         /*页面侧边栏*/
29         .aside {
30             float: left;
31             width:300px;
32             height: 400px;
33             border-right: 1px solid #999;
34         }
35         
36         /*页面内容*/
37         .content {
38             float: right;
39             width:680px;
40             height:400px;
41         }
42         
43         /*页脚*/
44         .page-footer {
45             /*border:1px solid red;*/
46             clear: both;
47             overflow: hidden;
48             color: #fff;
49             background:#999;
50         }
51     </style>
52 </head>
53 <body>
54     <div class="container">
55         <div class="page-header">
56             <h1>老男孩牛逼</h1>
57         </div>
58         <div class="page-main">
59             <div class="aside">
60                 <p>
61                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut obcaecati a illum optio soluta expedita aperiam numquam, laudantium illo impedit natus dolore ducimus pariatur nostrum necessitatibus itaque nihil eligendi. Officiis.
62                 </p>
63             </div>
64             <div class="content">
65                 <h2>牛逼高端上档次</h2>
66                 <p>
67                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum doloremque non, perspiciatis modi sunt illo eveniet! Culpa quibusdam voluptatem laborum vel, nemo quidem ducimus impedit ad, perferendis rerum ab nostrum.
68                 </p>
69             </div>
70         </div>
71         <div class="page-footer">
72             <h2>牛逼的老男孩</h2>
73         </div>
74     </div>
75 </body>
76 </html>

实例一

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>布局实例</title>
  6     <style>
  7         /*通用的设置*/
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         body {
 13             font:12px ‘Microsoft YaHei‘,sans-serif;
 14             text-align: center;
 15         }
 16 
 17         .container {
 18             width: 1000px;
 19             margin: 0 auto;
 20         }
 21 
 22         .left {
 23             float: left;
 24         }
 25         .right {
 26             float: right;
 27         }
 28         .bg {
 29             background: #ccc;
 30         }
 31         .clearfix {
 32             height: 10px;
 33             clear: both;
 34         }
 35         .border {
 36             border: 1px solid #ccc;
 37         }
 38 
 39         /*end 通用设置*/
 40 
 41         /*page-header 页头*/
 42         .logo {
 43             width: 200px;
 44             height: 100px;
 45             margin-right: 10px;
 46         }
 47         .banner1 {
 48             width: 580px;
 49             height: 100px;
 50             margin-right: 10px;
 51         }
 52         .banner2 {
 53             width: 200px;
 54             height: 100px;
 55         }
 56 
 57         /*end page-header*/
 58 
 59         /*page-nav 导航*/
 60         .page-nav {
 61             height: 40px;
 62         }
 63         /*end page-nav*/
 64 
 65         /*page-main*/
 66             /*page-content*/
 67         .page-content {
 68             width: 790px;
 69         }
 70         .page-aside {
 71             width: 200px;
 72         }
 73         .item01 {
 74             width: 388px;
 75             height: 198px;
 76         }
 77         .item02 {
 78             width:188px;
 79             height: 198px;
 80             margin-right:10px;
 81         }
 82         .item02-last {
 83             margin-right: 0px;
 84         }
 85             /*endpage-content*/
 86             
 87             /*page-aside 侧边栏*/
 88         .item03 {
 89             height:128px;
 90         }
 91             /*endpage-aside*/
 92         
 93 
 94 
 95         /*end page-main*/
 96 
 97             
 98         /*page-footer 页脚*/
 99         .page-footer {
100             height: 60px;
101         }
102         /*end page-footer*/
103 
104 
105     </style>
106 </head>
107 <body>
108     
109     <div class="container">
110         <!--页头-->
111         <div class="page-header">
112             <div class="left bg logo">LOGO</div>
113             <div class="left bg banner1">BANNER01</div>    
114             <div class="left bg banner2">BANNER02</div>    
115         </div>
116         <!--end 页头-->
117             
118         <div class="clearfix"></div>
119         
120         <!--页面导航-->
121         <div class="bg page-nav">
122             导航    
123         </div>
124         <!--end 页面导航-->
125 
126         <div class="clearfix"></div>
127         
128         <!--页面主体，里面分为 左边的主要内容和右边的侧边栏-->
129         <div class="page-main">
130             <!--主要内容-->
131             <div class="left page-content">
132                 <div class="row">
133                     <div class="left border item01">栏目一</div>
134                     <div class="right border item01">栏目二</div>
135                 </div>
136 
137                 <div class="clearfix"></div>
138 
139                 <div class="row">
140                     <div class="left border item02">栏目三</div>    
141                     <div class="left border item02">栏目四</div>    
142                     <div class="left border item02">栏目五</div>    
143                     <div class="left border item02 item02-last">栏目六</div>    
144                 </div>
145 
146             </div>
147 
148             <!--侧边栏-->
149             <div class="right page-aside">
150                 <div class="border item03">栏目七</div>
151                 <div class="clearfix"></div>
152                 <div class="border item03">栏目八</div>
153                 <div class="clearfix"></div>
154                 <div class="border item03">栏目就</div>
155             </div>
156         </div>
157         <!--end 页面主体结束-->
158 
159         <div class="clearfix"></div>
160             
161         <!--页脚-->
162         <div class="bg page-footer">页脚</div>
163         <!--end 页脚-->
164     </div>
165 </body>
166 </html>

实例二

以上是关于页面布局-浮动定位的主要内容，如果未能解决你的问题，请参考以下文章

python 之前端开发（盒子模型页面布局浮动定位z-indexoverflow溢出）

DIV+CSS布局