李洪强和你一起学习前端之(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)
固定定位不占位置
将行内元素转化为行内快元素