总结布局的坑

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

各种布局操作

浮动，绝对定位，网格:若高度撑开父元素，则不能用了

flex和table布局可以。

行内元素

设置margin：上下没效果，左右有用

设置padding：左右有用，上下其实是没用的，但是有效果，只是能看到，是不影响其他的

对于img来说：margin和padding都是有效的。

左右布局

若左侧设置了浮动，设置了宽度大小，右侧只要margin-left大于左侧宽度就可以自适应了

使用绝对定位进行对齐

定位

设置了定位之后，可以使用left top。。。

vertical-align：垂直对齐方式

z-index：设置元素的堆叠顺序 需要先设置绝对定位或者相对定位，数值越大的在上面

position

relative相对定位，可以设置偏移量,根据自己本身的位置移动，不会影响其他div位置

absolute绝对定位，脱离文档流

fixed脱离文档流，一直显示，默认值是auto（有文档会被挤下去）

static不可设置偏移量

浮动

三个块超过主容器的宽度，则会另起一行，若第一个长比第二个长，那第三个就会在第二个下面

若三个块都浮动了，那么下面的那个字体也会浮动

clear清除浮动，左右，或者两边都去掉

height

line-height行高

max-width最大的宽度

min-height最小的高度

visibility设置可见或不可见hidden隐藏

margin和padding

将margin设置为百分比，它是按照最近一个父元素的width来计算的

将padding设置为百分比

它是按照最近一个父元素的width来计算的

居中

固定宽高的话(left:默认auto，继承父级元素)

div{
	position:absolute;
	width:100px;
	height:100px;
	background-color:red;
	left:50%;
	top:50%;
	margin:-50px,0,0,-50px;
}

若是未知高管可以用这个
transform: translate(-50%,-50%);
若后面还有改transform的值，那么一定要让它们的数量一致，位置相同
不用考虑去计算的话

div{
    position:absolute;/flex/也行
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    width:100px;
    height:100px;
}

利用的是绝对定位和模型的特性
left+right+padding+margin+width=包含块的宽度
top+bottom+padding+margin+width=包含块的高度\

只对行内元素有用

<div class="qqq">
    <div class = "www">
        666
    </div>
</div>

.qqq{
	//为了跟容易看清
	background-color: #00FFFF;
}
.www{
	height: 100px;
	line-height: 100px;
	text-align: center;
}

弹性布局居中

/* 父元素 */
#qqq{
    width: 300px;
    height: 300px;
    background-color: #87CEEB;
    display: flex;
    align-items: center;/* 垂直居中 */
    justify-content: center;/* 水平居中 */
}
/* 子元素 */
#www{
    width: 50px;
    height: 50px;
    background-color: antiquewhite;
}

文字居中：

height：100px；

line-height：100px；

还可以这样：font：30px/200px；30为你设置的字体大小，200为你盒子的大小；

百分比计算

top，height参照于包含块的高度

left，margin，padding，width参照于包含块的宽度

translate（-50%，-50%）参照于自身的高宽

backgrouned-position参照于图片区域减图片的位图像素值：如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。