盒模型 FLEX

盒模型（内容）

处理元素的溢出内容：over-flow

取值：

overflow：visible（溢出的内容依旧显示）

overflow：hidden（超出区域的部分隐藏）

overflow：scroll（会出现滚动条）

over-flow-x：scroll（水平方向出现滚动条）

over-flow-y：scroll（垂直方向出现滚动条）

over-flow：auto（内容超过了区域会自动出现滚动条）

盒模型（边框）

取值：

solid（实线）dashed（虚线）double（双实线）dotted（小圆点)

border：1px solid red（边框的粗细 样式 颜色）

注意：border中的的三个值样式是不能省略的。边框粗细是默认3px，边框颜色没有的时候是和文字一样的颜色。

边框的粗细

border-width：

边框的样式

border-sytle：

边框的颜色

border-color：

用CSS画一个三角形

1.创建一个块级元素

2.块级元素宽高为0

3.设置边框颜色为透明色

4.最后给某个方向的边框一个颜色，三角形就出来了。

盒模型（内边距）

padding：10px（上右下左的内边距都为10像素）

盒模型（外边距）

margin：10px（上右下左的外边距都为10像素）

重点：常规文档流，设置元素水平居中

首先给块级元素设置一个固定宽度，再添加命令

命令：margin：auto

外边距合并

两个值都为正值时，取最大的值

两个都是负值时，去最小值

一正一负就相加

轮廓

outline（不会增加元素的像素）

标准盒模型

box-sizing:content-box

IE盒模型

box-sizing:border-box

使用场景：在标签尺寸的基础上又添加类pandding或border的尺寸为了实现标签在页面的实际尺寸依然是设置的宽高。

则需要改变当前标签的box-sizing的取值border-box（边框盒）

CSS定位

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static（默认不定位)

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative(相对定位）

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute（绝对定位）

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed(固定定位）

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

判断标签的定位体系（所以标签只能在某一个定位体系中）

1.常规流

2.浮动

3.绝对定位（absolute）

判断标签的定位体系（优先级）

1.绝对

2.浮动

3.常规流

注意：当一个标签同时拥有浮动和绝对，浏览器会自动修改float的值为none

 

 

Flex布局：弹性布局

容器与项目：父子元素关系

容器：针对父元素进行display: flex；

父元素就是容器，子元素就是项目

目的：容器里的项目在水平方向一行显示,并且不会超过当前容器的尺寸（除图片）

主轴和交叉轴：

主轴：默认情况：水平向右方向（x轴正方向）

交叉轴：默认情况：垂直向下（y轴负方向）

 

创建弹性布局 ： display: flex;

flex-wrap属性：

默认值：不换行：  flex-wrap: nowrap;

换行：  flex-wrap: wrap;

换行且第一行在最下方： flex-wrap: wrap-reverse;

 

定义项目在多跟轴线上的对齐方式：align-content:;

Y轴起点对齐： align-content: flex-start;

Y轴居中：  align-content: center;

Y轴终点对齐：  align-content: flex-end;

当项目没有设置高度：或者高度为auto: align-content: stretch;

 

剩余空间交叉轴：

两端距离为0： align-content: space-between;

两端距离等于轴线距离*0.5： align-content: space-around;

两端距离等于轴线距离*1

 

主轴方向改变 ：

主轴默认：水平向右  flex-direction: row;

主轴水平向左：     flex-direction: row-reverse;

主轴垂直向下：    flex-direction: column;

主轴垂直向上：    flex-direction: column-reverse;

 

主轴起点对齐： justify-content: flex-start;

主轴中间对齐： justify-content: center;

主轴终点对齐： justify-content: first baseline;

 

剩余空间x轴：

两端距离为0： justify-content: space-between;

两端距离等于轴线距离*0.5： justify-content: space-around;

两端距离等于轴线距离*1 justify-content: space-evenly;

 

交叉轴对齐方式：

交叉轴起点对齐：    align-items: flex-start;

交叉轴中间对齐：    align-items: center;

交叉轴终点对齐：    align-items: flex-end;

没有设置项目高度：

容器高度撑满：    align-items: stretch;

基线对齐：    align-items: baseline;

 

 

项目属性：

显示顺序：order：

定义项目的顺序：默认为0 数字越小越靠前,越大越靠后

flex:flex是计算剩余空间时，会把当前尺寸累加到剩余空间进行计算

flex-grow放大属性：前提：所有项目之和小于容器

定义项目的放大比例,默认为0，flex-grow: 1;

项目默认0 不变 设置为1的项目空间等于剩余空间加项目本身空间之和

 

flex-shrink缩小属性：所有项目之和大于容器

定义项目的缩小比例：

默认都是为1，当某个项目设置为0时，该项目不缩小，其他项目缩小并所有项目占满整个容器

 

flex-basis 属性：

 

flex属性：缩写属性：（flex-grow ，flex-shrink ，flex-basis）

 

align-self属性：