【CSS】关于CSS的布局、水平居中、垂直居中、以及其他

左右布局、左中右布局(这2个差不多。都是 横向布局)

• float，写法：

1. 每个li上加上float
2. li的父元素加上clearfix类

.clearfix::after{
  content:'';
  display:block;
  clear:both;
}

• flex(因为现在的浏览器几乎都支持 flex 了，所以尽量用 flex ，不用 float )

在要左右布局的元素上，加上 width：50%，父元素写 diaplay:flex

 

 

水平居中

1. 行内元素：爸爸加 text-align:center
2. 块级元素+定宽：margin:auto;

3. 块级元素+不定宽：有2种方法：a、把它变成行内元素，设置 display:inline-block，爸爸加 text-align:center。b、让它宽度固定。

 

垂直居中

 

文字垂直居中：

内联元素：给一个line-height，再给个padding，凑出要的高度，千万别写死height！（这样做的好处是，当文字很多的时候，不会出现bug）

 

1. table
2. flex

实际工作中，这两种足够了，其他方法都是炫技的。

 

其他小技巧

1. 不到情非得已，千万不要手工给height！
2. 媒体查询功能：如果给 link 标签加 media=“print” 属性，那么它就只给打印提供样式。
3. 文字打断（该什么时候断，就什么时候断，不用管它是不是一个整体）

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%