css盒子模型
盒子模型
一、display:block
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
二、display:inline
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
三、display:inline-block
- 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
行内元素(display:inline)
只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：
text-align: center
适用元素：文字，链接，及其其它inline或者inline-*类型元素
（inline-block，inline-table，inline-flex）
块状元素(display:block)
#块级元素一个占一行
设置
.center {
margin-left :auto;
margin-right :auto;
}
需要居中的块级元素必须有固定的宽度，否则占据整个宽度
多个块级元素居中
#设置为inline-block
.center{
display:inline-block;
}
#设置父节点: text-align: center;
body{
text-align:center;
}
<div class="center">水平居中的块状元素</div>
<div class="center">水平居中的块状元素</div>
其他方法
使用flexbox布局:
只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可
单行行内元素垂直居中
#将原来的inline元素设置为
height = line-height = 父元素的高度
a {
height :200px;
line-height :200px;
}
多行的行内元素
#设置父元素属性：
display:table-cell;
vertical-align: center;
已知高度的块状元素
.item {
top: 50%;
margin-top:-50px; //设置为高度的一半
position:absolute
padding: 0;
}
未知高度的块级元素
.item{
top: 50%;
position: absolute;
transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}
水平垂直居中
.item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; //控件高的一半
margin-left: -75px;
}
未知宽度和高度的控件水平垂直居中
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
使用flex布局实现水平垂直居中
.item{
background: #222;
color: #FFF;
width: 100px;
height: 100px;
}
.parent{
display: flex;
justify-content:center;
align-items: center;
/* 注意这里需要设置高度来查看垂直居中效果 */
background: #AAA;
height: 300px;
}
