CSS布局

Posted on Edited on

单栏布局

方式: 定宽+水平居中

1
2
3
4
5
6
<style>
.layout{
max-width: 100px;
margin: 0 auto;
}
</style>

通栏的话再加一层 div,单独给 div 设置背景色即可

双列布局

固定 margin+浮动元素

先设置浮动,再设置普通元素,最后清除浮动

flex 布局(弹性盒子)

display:flex

一个容器 设置了display:flex属性,就定义了一个 flex 容器.它的直接子元素会接受这个 flex 环境.

常规布局是基于块和内联流方向，而 Flex 布局是基于flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应。

在布局上有了比以前更加灵活的空间。

这个是 ms 图床

这个是路过图床

flex-direction

1
2
3
.container{
    flex-direction: row | row-reverse | column | column-reverse;
}

设置子元素在父容器中的位置

  1. row 默认值,水平从左到右
  2. row-reverse,从右到左
  3. column,垂直从上到下
  4. column-reverse,垂直从下到上

flex-wrap

设置换行

1
2
3
4
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
依次为:不换行,换行,换行且颠倒顺序

flex-flow

flex-direction和flex-wrap的缩写,默认值row nowrap

flex-flow: <'flex-direction'> || <'flex-wrap'>

justify-content

设置子元素在水平方向上的对齐方式

1
2
3
4
.container{
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
分别是水平靠左,水平靠右,水平居中,均匀分布,均匀分布且两端保留子元素间距一半(空间包裹)

align-items

设置子元素在垂直方向上的对齐方式

1
2
3
4
.container{
  align-items: flex-start |  flex-end | center | baseline | stretch;
}
分别是垂直靠上,垂直靠下,垂直居中,垂直基线对齐,垂直方向拉伸

align-content

设置子元素整体内容的在垂直方向上的对齐方式

1
2
3
4
.container{
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
分别是整体靠上,整体靠下,整体居中,整体垂直均匀排列,整体均匀分布且垂直两端保留间距一半空间,整体垂直拉伸占用剩余空间

用在子元素上的属性

order

默认情况下 flex order 会按照书写顺序排列,可以通过 order 属性改变,数值小的在前面,也可以是负数.

1
2
3
.item {
  order: <integer>;
}

flex-grow

.item {flex-grow: 1}

按比例瓜分父元素剩余的空间,1 即分一份.不写默认是 0

flex-basis

基准宽度

flex-shrink

按比例吸收超出的空间.不写默认是 1

flex

flex-grow,flex-shrink,flex-basis的缩写

1
2
3
.item{
  flex: none | [ <'flex-grow'> <'flex-shrink'> || <''flex-basis'>]
}

aglin-self

单独修改自身的属性

Grid 布局

父元素 Grid container 的属性

display

将元素定义为 gird container,并为其建立新的网格格式化上下文

1
2
3
4
.container{
  display: grid | inline-grid |   subgrid;
}
分别是生成一个块级网格;一行网格;如果本身是gird-item,可从父元素获取行列大小

gird-template-columns 和 gird-template-rows

设置网格的列和行

1
2
3
4
.container{
  gird-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

简化写法:

1
2
3
4
5
6
7
.container{
 gird-template-columns: repeat(3, 20px [col-start]) 5%;
}
等价于
.container{
  gird-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}

“fr”单位允许将轨道大小设置为网格容器自由空间的一部分.

如下代码会将每个 gird item 设置为 gird container 宽度的三分之一

1
2
3
.container{
  .grid-template-columns: 1fr 1fr 1fr;
}

gird-template-areas

  1. — 使用 gird-area 属性设置的网络区域的名称
  2. .  — 点号代表一个空网格单元
  3. none — 没有定义网格单元
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是 footer 区域组成。

媒体查询(响应式)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  /* 屏幕宽度为300px-325px时的css样式  */
  @media(min-width: 300px) and (max-width: 325px){
    body{
     background: red;
    }
  }

  /* 屏幕宽度小于450px时的css样式  */
  @media(max-width: 450px){
    body{
     background: black;
    }
  }
  /* 这样前面那个就没用了，被覆盖了  */
</style>

一般不用第一个方法，直接引用一个手机版的 css 即可

<link rel="stylesheet" media="(max-width:768px)" href="mobile.css">

在屏幕宽度小于 768px 时，就会渲染这个 css，要把这个引用写在 main.css 之后，把 main.css 覆盖。

并加上 meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

让视口等于理想视口,禁止用户缩放.