CSS布局&居中
2018-05-21 本文已影响0人
leiuno
块级元素和内联元素的高度
文档流：文档内元素的流动方向
块级元素：从上往下，可以设置宽高，可以设置padding,margin
内联元素：从左往右，设置宽高无效,可以设置padding,左右margin有效，上下margin无效
内联元素若需要设置宽高，display:inline-block;
1、div高度由其内部文档流元素的高度总和决定
内联元素是英文单词的话，不论多长，是不会自动换行的，若需要换行设置以下属性
word-break: break-all
2、内联元素的高度基本是不可测的，在font-size比较小的时候可以用line-height来控制内联元素所占的高度，如果想要一个特定的高度，可以再在基础上添加padding来增加。
span里面设置display:block;就相当于div
页面布局
1、两栏布局
float 浮动
- 父元素加clearfix清除浮动
<div class="wrap clearfix">
<div class="aside"></div>
<div class="main"></div>
</div>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.aside{
border: 1px solid red;
width: 100px;
height: 200px;
float: left;
}
.main{
border: 1px solid blue;
float: left;
width: 100px;
height: 200px;
}
positon 绝对定位
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
.wrap{
position: relative;
}
.aside{
border: 1px solid red;
width: 100px;
height: 200px;
}
.main{
border: 1px solid green;
height: 200px;
width: 200px;
position: absolute;
top: 0;
left: 100px;
}
2、三栏布局
float 浮动，方法同两栏布局
position 绝对定位，方法同两栏布局
居中
1、 水平居中
- 在父元素上设置 text-align: center 使文字/图片水平居中。
.container {
text-align: center;
}
- 在父元素上设置margin值
.container {
margin: 0 auto;
}
2、 垂直居中
- 文本居中,在父元素上设置上下padding值
.container{
padding: 40px 0;
text-align: center;
}
- 绝对定位实现居中——主要适用于页面弹框
. container{
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
width: 400px;
height: 300px;
text-align: center;
border: 1px solid;
}
- vertical-align实现居中——主要适用于图片居中
<body>
<div class="box">
<img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>
</body>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid #000;
text-align: center;
}
.box img{
vertical-align: middle;
background: #CCC;
}
.box:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
- table-cell实现居中
<body>
<div class="box">
<img src="http://cdn.jirengu.com/public/logo-tiny.png" alt="">
</div>
</body>
<style>
.box{
width: 400px;
height: 300px;
border: 1px solid #000;
display: table-cell;
text-align: center;
vertical-align: middle;
</style>
