CSS 的一些布局 居中 小技巧

2018-07-05  本文已影响0人  U17

布局

文档流布局: 这是最基本的布局方式,就是按照文档的顺序一个一个显示出来,块元素独占一行,行内元素共享一行,所以只需要给块级元素加上display:inline-block  元素就会按照文档流的顺序从左到右排列

浮动布局: 浮动方式布局就是使用 float 属性,使元素脱离文档流,浮动起来。 给元素添加 float 属性  通过margin 和padding 控制位置 如果元素上有float属性则一定要在其父元素上清理浮动 要不然会有BUG, 一般使用    .clearfix::after{ content:''; display: block; clear:both;} 

浮动布局

定位布局:给父元素 position:relative;  子元素position: absolute  这样子元素就可以相对父元素进行绝对定位 ,可以通过top left right button 设置位置

定位布局

fixed布局: 生成绝对定位的元素,相对于浏览器窗口进行定位。top,bottom,left,right的值确定定位元素的位置。

fixed布局

居中

当元素有固定宽高时,可以通过margin-left:auto; margin-right:auto; 

通过 margin-left:auto; margin-right:auto;  居中

当元素宽度不确定时,先给子元素一个display:inline-block; 让他变成内联元素 再给父元素设置 text-align: center;

text-align: center; 居中

通过绝对定位居中 父元素设置position: relative;  子元素设置position: absolute;  在通过left:50% top:50% 设置 子元素左上角顶点到父元素中心的位置 然后 通过margin-top:-50px; margin-left:-50px;  这里的数值一定要是 子元素宽高的一半  这样子元素的中心才能调整到父元素的中心

绝对定位居中
上一篇 下一篇

猜你喜欢

热点阅读