阅读 393

【CSS】CSS布局

布局分为两种

  • 固定宽度布局,一般宽度为960/1000/1024px
  • 不固定宽度布局,主要靠文档流的原理来布局
  • 第三种布局:响应式布局(意思就是PC上固定宽度,手机上不固定宽度)

目录

  1. float布局
  2. flex布局
  3. grid布局

float布局

  • 在子元素上加float:leftwidth
  • 在父元素上加 .clearfix

注意:如果一个元素里只有浮动元素,那它的高度会是0。如果你想要它自适应即包含所有浮动元素,那你需要清除它的子元素。一种方法叫做clearfix,即clear一个不浮动的 ::after 伪元素。

clearfix要写三句话,如下:

.clearfix:after{
 content: '';
 display: block;
 clear: both;
 }
复制代码

经验

  • 有经验者会留一些空间或者最后一个不设width
  • 不需要做响应式,手机上没有IE,此布局是为IE准备的
  • IE6/7存在双倍 margin bug,解决方法如下:
  • 将错就错,针对IE6/7把margin减半
  • 神来一笔,在加上一个display:inline-block

代码示例

flex布局

  • container 容器(一般用来做父元素)
  • items 项目(一般用来做子元素)

container属性

让一个元素变成flex容器

.container{
  display: flex;/* or inline-flex*/
}
复制代码

改变items流动方向(主轴)

.container{
  flex-direction: row | row-reverse | colun | colun-reverse;
}
复制代码

改变折行

.container{
  flex-wrap:nowwrap | wrap | wrap-reverse;
}
复制代码

主轴对齐方式(默认主轴是横轴,除非你改变了flex-direction方向)

.container{
  justify-content: flex-start | flex-end | center | space-between;
}
复制代码

次轴对齐方式(默认主轴是纵轴)

.container{
  align-items: flex-start | flex-end | center | stretch;
}
复制代码

多行内容(内容分布,很少用到)

.container{
  align-content: flex-start | flex-end | center | stretch;
}
复制代码

items属性

items上加order

.items{
  order: 0;
}
复制代码

items上加flex-grow(控制变胖)

.items{
  flex-grow: 0;
}
复制代码

items上加flex-shrink(控制变瘦,一般写flex-shrink:0防止变瘦,默认是1)

.items{
  flex-shrink: 0;
}
复制代码

items上加flex-basis(控制基本宽度,默认auto) flex:flex-grow flex-gshrink flex-basis(缩写)

.items{
  flex: 1 1 100px;
}
复制代码

align-self定制align-items(某一个items可以特立独行,不常用)

.items{
  align-self: flex-start | flex-end;
}
复制代码

重点属性

  • display: flex让一个元素变成flex容器
  • flex-direction: row/column表示流动方向横着还是竖着
  • flex-wrap: wrap是否换行
  • justify-content: conter/space-between主轴(横轴)方向怎么对齐
  • align-items: center次轴(纵轴)方向怎么对齐

代码示例

经验

  • 永远不要把width和height写死,除非特殊说明
  • 用 min-width / max-width / min-height / max-height

Grid布局

二维布局用Grid,一维布局用flex

css-tricks.com/snippets/cs…

属性

让一个元素变成flex容器

.container{
  display: grid | inline-grid; 
}
复制代码

行和列

.container {
  grid-template-columns:  40px 50px auto 50px 40px;
  grid-template-rows:  25% 100px auto;
}
复制代码

item设置范围

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
复制代码

fr-free space 巧记:份

.container {
grid-template-columns: 1fr 1fr 1fr;
}
复制代码

空隙 gap

分区 grid-template-areas

文章分类
前端
文章标签