李洪强和你一起学习前端之(8)浮动,网页布局,定位
2.1標準流(文檔流)
塊級元素獨占一行顯示,標準流的顯示方式
讓兩個盒子在一行顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.one{
width: 100px;
height: 100px;
background-color: red;
/*讓兩個盒子在一行顯示*/
display: inline-block;
}
.two{
width: 100px;
height: 100px;
background-color: greenyellow;
display: inline-block;
}
</style>
</head>
<body>
?
<div class="one">
?
</div>
<div class="two">
?
</div>
</body>
</html>
?
?
一個靠左邊,一個靠右邊
2.2浮動
Float: left/right
設置了浮動的元素,不在原來的位置(脫標)
設置可以浮動可以讓塊級元素在一行上顯示
浮動可以將行內元素轉化為行內塊元素
?
模式轉化的過程中,能用display就用display
?
浮動用來解決文字圖片的環繞問題
浮動的第二個作用: 制作導航欄
?
實現導航欄一:?
代碼:?
?
?
<!DOCTYPE html>
?
<html>
?
<head>
?
<meta charset="utf-8" />
?
<title></title>
?
<style type="text/css">
?
?
?
/*文字寬度不一樣,不建議給a設置寬度*/
?
.nav{
?
height: 50px;
?
background-color: pink;
?
/*讓文字垂直居中
?
放在這里也可以,發到下面,因為可以繼承*/
?
line-height: 50px;
?
}
?
li{
?
list-style: none;
?
/*設置在一行上顯示*/
?
float: left;
?
}
?
li a{
?
/*不起作用? 行內元素
?
高度是盒子的高度50px? 不起作用,因為是行內元素
?
需要轉化為行內快元素*/
?
height: 50px;
?
display: inline-block;
?
padding: 0 10px;
?
}
?
li a:hover{
?
background-color: yellowgreen;
?
padding:? 0 10px;
}
?
</style>
</head>
<body>
<div class="nav">
<ul>
?
<li>
?
<a href="">百度</a>
?
</li>
?
<li>
?
<a href="">百度一下</a>
?
</li>
?
<li>
?
<a href="">么么噠</a>
?
</li>
?
</ul>
?
?
?
</div>
?
</body>
?
</html>
?
?
實現導航欄二:
代碼:?
?
?
<!DOCTYPE html>
?
<html>
?
<head>
?
<meta charset="utf-8" />
?
<title></title>
?
<style type="text/css">
?
*{
?
margin: 0;
?
padding: 0;
?
}
?
.nav{
?
height: 55px;
?
background: url(img/head_bg.jpg);
?
border-top: 1px solid red;
?
/*這是為了設置垂直居中
?
可以繼承*/
?
line-height: 55px;
?
}
?
.nav li{
?
/*這是設置去掉點*/
?
list-style: none;
?
/*在一行顯示*/
?
float: left;
?
/*背景默認在左邊顯示*/
?
background: url(img/li_bg.png) no-repeat right;
?
/*padding-left: 10px;*/
?
/*padding-right: 10px;*/
?
}
?
ul{
?
margin-left: 390px;
?
}
?
?
?
a{
?
height: 55px;
?
display: inline-block;
?
padding: 0 10px;
?
}
?
a:hover{
?
background: yellowgreen;
?
}
?
</style>
?
</head>
?
<body>
?
?
?
<div class="nav">
<ul>
?
<li>
?
<a href="">智能手機</a>
?
</li>
?
<li>
?
<a href="">智能手機</a>
?
</li>
?
<li>
?
<a href="">智能手機</a>
?
</li>
?
?
?
</ul>
</div>
? </body>
</html>
?
網頁布局
案例一: 實現以下效果:?
?
代碼:?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
{
/*CSS初始化*/
h1,h2,h3,h4,h5,h6,body{
margin: 0;
padding: 0;
}
.box{
width: 980px;
height: 200px;
background-color: #DBDBE0;
margin: 0 auto;
}
.header{
height: 50px;
background-color: black;
}
.container{
height: 600px;
background-color: red;
}
.contet{
width: 680px;
height: 600px;
background-color: blue;
float: left;
}
.sidebar{
width: 300px;
height: 600px;
background-color: palegoldenrod;
float: right;
}
.footer{
height: 50px;
background-color: fuchsia;
}
}
</style>
?
</head>
<body>
<!--主題盒子-->
<div class="box">
文字
<!--頭部-->
<div class="header">
?
</div>
<!--內容部分-->
<div class="container">
<!--內容里面有兩個盒子-->
<!--內容盒子左邊-->
<div class="contet">
?
</div>
<!--內容盒子右邊-->
<div class="sidebar">
?
</div>
?
</div>
<!--尾部-->
<div class="footer">
?
</div>
?
</div>
</body>
</html>
?
案例二:實現以下效果:
?
實現思路:?
?
?
?
實現代碼:?
?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*css初始化*/
h1,h2,h3,h4,h5,h6,body{
margin: 0;
padding: 0;
}
.box{
width: 980px;
height: 700px;
background-color: goldenrod;
margin: 0 auto;
}
.header{
height: 50px;
background-color: black;
}
.content{
height: 600px;
background-color: palegreen;
}
.left{
width: 90px;
height: 600px;
background-color: blue;
float: left
}
.right{
width: 90px;
background-color: blueviolet;
height: 600px;
float: left;
}
.middle{
width: 800px;
background-color: pink;
height: 600px;
float: left;
}
.m-top{
width: 800px;
height: 300px;
background-color: hotpink;
}
.m-bottom{
width: 800px;
height: 300px;
background-color: seagreen;
}
.footer{
height: 50px;
background-color: red;
}
?
</style>
</head>
<body>
<!--主題盒子-->
<div class="box">
<!--頭部-->
<div class="header"></div>
<!--主體部分-->
<div class="content">
<!--主體-左邊-->
<div class="left"></div>
<!--主體-中間-->
<div class="middle">
?
<div class="m-top"></div>
<div class="m-bottom"></div>
</div>
<!--主體-右邊-->
<div class="right"></div>
</div>
<!--尾部-->
<div class="footer"></div>
</div>
?
</body>
</html>
?
2.3清除浮動
清除浮動不是刪除浮動
清除浮動指的是清除浮動的影響
?
注意:?
當子元素設置了浮動,父元素沒有高度的時候,造成頁面混亂
這種情況下進行清除浮動
?
?
?
?
/*清除浮動一*/
?
.clearfix{
?
clear: both;
?
}
?
/*清除浮動方式二*/
/*overflow: hidden;*/
?
?
?
/*清除浮動方式三:*/
?
/*.clearfix:after{
?
content:'';
?
display: table;
?
clear: both;
?
height: 0;
?
/*line-height: 0;*/
?
/*visibility: hidden;*/
?
/*}*/
?
?
?
?
2.4清除浮動的幾種方式
使用: clear: left/right/both
在要清除浮動的元素后面添加一個標簽
?
?
?給父盒子設置overflow:hidden
?
如果父盒子中有定位的元素,一般不推薦使用該種方式清除浮動
?使用偽元素清除浮動
?
?2.5 Overflow的使用
?
hidden: 將超出的部分進行隱藏
?
?
auto
如果內容超出盒子,那么給盒子設置滾動條
如果內容沒有超出盒子,那么不顯示滾動條?
?
?
scorll
?
?
?
3.定位
?方位名稱:
left right top bottom
?
?3.1靜態定位(static)
?
用法:?
Position:static
?
?靜態定位就是元素標準流的顯示方式
?
3.2 絕對定位(absolute)看臉型
用法:?
Position: absolute
?
特點:
1. 當給一個單獨的元素設置絕對定位,以瀏覽器左上角(body)為
基準設置定位的
2. 當盒子發生嵌套關系的時候,如果父盒子沒有設置定位,子盒子設置
定位以瀏覽器的左上角為基準設置定位
3. 當盒子發生嵌套關系的時候,如果父盒子設置定位,子盒子設置定位的
時候,會以父盒子左上角為基準,設置定位
4. 給盒子設置了絕對定位,該盒子不占位置(脫標)
5. 給行內元素設置絕對定位后,該元素轉化為了行內塊元素
?
注意: 元素設置了絕對定位后,通過具體的方位名稱可以隨便設置元素的
位置
?
3.3 相對定位(relative)(自戀型)
?
元素設置了相對定位后占原來的位置
設置相對定位,以自己的位置為參照設置位置
相對定位不能進行元素的模式轉換
子絕父相(子元素設置絕對定位,父元素設置相對定位)
?
3.4固定定位 (fixed)
?
?
?固定定位不占位置
將行內元素轉化為行內快元素
?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的李洪强和你一起学习前端之(8)浮动,网页布局,定位的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu 3183 A Magic Lam
- 下一篇： Mac下安装的MySQL root账号无