CSS布局
display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素: header 、 footer 、 section 等等
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素,它可以被用作链接。
居中布局
#main {
max-width: 600px;
margin: 0 auto;
}
设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。
一.水平居中
对于行内元素(inline):text-align: center;
对于块级元素(block):设置宽度且 marigin-left 和 margin-right 是设成 auto,使用 max-width 替代 width。
对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;(vertical-alinga:top);或者使用 flex 布局
二.垂直居中
1.对于知道高度的元素可以设置上下padding相等;
2.设置line-height和height相等
3.利用vertical-align,但是这属性只在tr,td中适用,故可将元素放置入table中在居中
左右布局
float浮动,将该块状区域脱离父级标签的文档流,left属性值使该区域向父级标签区域的左侧边界放置,right属性值使该区域块向父级标签的右侧边界放置,如是利用该属性可以实现左右布局。
不过使用浮动都会有一个BUG。
需要在使用浮动的父亲元素加一个clearfix属性。
.clearfix::after {
content: '';
display: block;
clear: both;
}
左中右布局
三栏自适应布局:两边定宽,中间block宽度自适应。
可以使用浮动或者绝对定位。
当某些元素的位置要根据父元素的大小自适应,内容宽度无法确定时,建议使用浮动
当特定元素的位置是相对父元素固定,或者内容宽高确定,需要精确定位甚至以后要用js操作变换位置时,建议使用浮动。