1.左右布局:
方法一:
给子元素加上“float:left、right,父元素加上clearfix
方法二:
利用position。position可使元素脱离文档流。父元素设position: relative; 子元素设position: absolute 并且设置距离上下左右的位置即可
方法三:
属性:table-cell:
2.左中右布局
左中右布局与左右布局类似
方法一:利用float
方法二:利用position
方法三:
类似左右布局中使用table-cell。
3.水平居中:
行内元素居中:设置text-align:center即可
块级元素居中
(1)单个块级元素:设置: margin左右为auto;
(2)多个块级元素:子元素设display: inline-block,父元素设text-align:center
4.垂直居中
方法一: 设置height和line-height的高度一致;
方法二:设置padding和margin
5.其他
1.内联元素设置宽高是无效的;设置margin-top和margin-bottom也是无效的
2.要好好利用box-sizing: border-box/content-box; border-box设置width是包括border及padding的,content-box的width只是指内容的宽度,不包括border和padding
3.设置宽度时设置max-width比设置width要更好
4。尽量不要设置width和height,多想想设置padding和margin
5. 伪类”xxx: nth-child(even/odd)可选中第偶数/单数个元素对其进行设置
其实方法有很多,最重要是根据实际情况需要运用不同的方法