左右布局、左中右布局(这2个差不多。都是 横向布局)
- float,写法:
- 每个li上加上float
- li的父元素加上clearfix类
.clearfix::after{
content:'';
display:block;
clear:both;
}
- flex(因为现在的浏览器几乎都支持 flex 了,所以尽量用 flex ,不用 float )
在要左右布局的元素上,加上 width:50%,父元素写 diaplay:flex
水平居中
- 行内元素:爸爸加 text-align:center
- 块级元素+定宽:margin:auto;
-
块级元素+不定宽:有2种方法:a、把它变成行内元素,设置 display:inline-block,爸爸加 text-align:center。b、让它宽度固定。
垂直居中
文字垂直居中:
内联元素:给一个line-height,再给个padding,凑出要的高度,千万别写死height!(这样做的好处是,当文字很多的时候,不会出现bug)
- table
- flex
实际工作中,这两种足够了,其他方法都是炫技的。
其他小技巧
- 不到情非得已,千万不要手工给height!
- 媒体查询功能:如果给 link 标签加 media=“print” 属性,那么它就只给打印提供样式。
- 文字打断(该什么时候断,就什么时候断,不用管它是不是一个整体)
word-break:break-all
一些感想:
写css其实跟画画很像,比如布局时,把border显示出来,会更容易知道这个元素身居何处。画画也是,先起一个大稿,画每个物体的框框,然后再画细节。
CSS 所有的布局方式,都可以简化为,横向布局或纵向布局。
什么是网格系统/栅格系统?
就是把一个 div 分成 N 个部分(N = 12,16,24...),每个部分无空隙或者有空隙。
完。
css 一些要特别注意的地方:
如果父元素没有border、padding、overflow(就是没有什么东西挡着),那么子元素的 margin 的上下方向,会跟父元素的 margin 合并
注意 overflow:hidden 不到万不得已,千万不要加。
内联元素的宽高、块级元素的宽高
span 的高度是由行高决定的
宽度是由 内容+padding+margin+border 决定的
div的宽 是自适应父元素(最好别去改)
如何实现一个1比1的 div
padding-top:100%