01、水平居中
margin 左右方向可以设置自适应 auto,这样他所修饰的块属性标签就会在左右方向上自动居中
注意:auto 只能控制水平方向的自动居中,不能控制垂直方向上的自动居中
margin:0 auto;
auto的原理
auto的值 = (父元素的宽度-当前元素的宽度)/2;
02、浮动
浮动的原理:设置浮动的元素超出文档流
文档流:就是元素从上到下从左到右的布局顺序
浮动的作用:从整体出发,把标签元素进行横向布局
使用 inline-block 横向布局的弊端:
1.元素之间有缝隙,需要解决
2.低版本浏览器不支持 inline-block
浮动的特点:
1.浮动的元素超出文档流
2.块属性标签浮动之后,不再独自占据一行空间,如果不设置宽高,则他的宽高由内容撑开
3.块属性标签浮动之后,他的margin 属性的auto值失效
4.行属性标签浮动之后,可以设置宽和高,并且支持上下padding和上下margin
03、清浮动
当子级元素产生浮动的时候,他的父级元素会因此产生影响,由于浮动元素脱离文档流,父元素没有被子元素撑开,导致父元素没有高度,这样在布局的时候,会产生混乱
清除浮动产生的影响(清浮动)
1.给浮动元素的父级,添加 overflow:hidden
2.给父元素设置指定高度,确保布局正确
3.给父级元素添加 display:inline-block,该方法兼容性差
4.给父元素添加浮动,可能会影响布局
5.设置一个空标签,在空标签中设置属性
.clear {
clear:both;
/* 防止ie低版本具有默认高度 */
height:0;
overflow:hidden;
}
6.通过after伪元素清浮动
.clearfix::after {
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
04、浮动练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动练习</title>
<style>
* {
margin: 0;
padding:0;
}
.wp {
border: 1px #f00 solid;
width: 800px;
margin: 0 auto;
}
.wp img {
width: 200px;
height: 150px;
border: 1px #f00 solid;
float: left;
}
.clearfix::after {
content: '';
clear: both;
height: 0;
overflow: hidden;
display: block;
}
.top-bar {
height: 100px;
background-color: #4a4a4a;
}
.nav {
width: 1100px;
margin: 0 auto;
height: 100px;
/* background-color: rgba(255, 255, 255, 0.5); */
}
.logo,.logo a,.logo img {
float: left;
width: 100px;
height: 80;
}
.nav-list {
float: right;
}
.nav-list a {
float: left;
line-height: 100px;
text-decoration: none;
color: #fff;
margin-left: 20px;
}
.layout {
width: 1100px;
height: 1000px;
margin: 20px auto;
}
.l {
float: left;
width: 880px;
height: 100%;
background: #04be02;
}
.r {
float: right;
width: 200px;
height: 50%;
background: #00f;
}
</style>
</head>
<body>
<div class="wp clearfix">
<img src="/Day03/image/a.jpg" alt="">
<img src="/Day03/image/a.jpg" alt="">
<img src="/Day03/image/a.jpg" alt="">
</div>
<!-- 布局 -->
<div class="top-bar">
<div class="nav clearfix">
<!-- 设置logo -->
<h1 class="logo">
<a href="###">
<img src="/Day03/image/wlop1.jpg" alt="">
</a>
</h1>
<div class="nav-list">
<a href="###">首页</a>
<a href="###">列表页</a>
<a href="###">关于我们</a>
</div>
</div>
</div>
<div class="layout clearfix">
<div class="l"></div>
<div class="r"></div>
</div>
</body>
</html>