目录
一、盒子模型分类
标准盒子模型(W3C官方盒子):width指的是内容的宽度
怪异盒子模型(IE盒子模型):width指的是内容+内间距+边框的总和
通过box-sizing控制盒子模型的分类
a)取值为content-box;=====标准盒子
b)取值为border-nox;=======怪异盒子
二、flex弹性盒布局
作用:就是控制子元素的布局
1.弹性盒子里的概念
a)容器====父元素(放子元素的盒子)
b)项目====子元素(所有弹性盒子里面的子元素)
2.形成弹性盒的语句
在父元素上写display:flex
3.特点
a)当父元素变成弹性盒子之后,子元素默认横向显示 (默认主轴x轴,另外一个叫做侧轴)
b)当父元素变成弹性盒子之后。子元素都能直接设置宽高
c)margin:auto是生效的。
d)如果子元素总宽度大于父元素,那么是不会超出父盒子,也不会自动换行,而是会挤压。
4.设置主轴方向
flex-direction: row | row-reverse | column | column-reverse;
a)row:横向、x轴(常用)===== 规定主轴方向在横向(默认值)
b)column:纵向、y轴(常用)====规定主轴方向在纵向
c)row-reverse:x轴反向排列====规定主轴方向在横向,项目反向排列
d)column-reverse:y轴反向排列==规定主轴方向在纵向,项目反向排列
5.设置子元素在主轴的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
a)flex-start:主轴的开始位置对其,没有间距
b)flex-end:主轴的结束位置对其,没有间距
c)center:居中==主轴的中间位置对其,没有间距
d)space-between:主轴上面两端对其,元素与元素之间的距离自动分配(常用)
元素与元素之间的距离是靠边元素与父元素之间的2倍
e)space-around:自动分配距离、左右间距都一样。(常用)
f)space-evenly:自动分配剩余空间,所有的距离都一样
6.设置子元素在侧轴的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch(默认值);
a)flex-start:侧轴的开始位置
b)flex-end:侧轴的结束位置
c)center:侧轴的中间位置
d)baseline:和flex-start等效
e)stretch拉伸,要想让拉伸起作用,前提是子元素不能定宽度或者高度。
7.设置子元素是否换行
flex-wrap: nowrap | wrap | wrap-reverse;
a)nowrap:不换行
b)wrap:换行
c)wrap-reverse:反向换行
换行之后,行间距自动分配;行间距比较大
8.多行对齐方式
(对于单行子元素不起作用。)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
a)flex-start:侧轴开始位置对其,没有行间距
b)flex-end:侧轴结束位置对其,没有行间距
c)center:侧轴中间位置对其,没有行间距
d)space-between:2端对齐,中间自动分配
e)space-around:自动分配间距
三、设置在子元素上的属性
1.align-self:控制自己在侧轴的对齐方式
a)auto:默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
b)stretch=======元素被拉伸以适应容器。(如果没有宽度、高度)
c)center========侧轴的居中位置
d)flex-start======侧轴的开始位置
e)flex-end=======侧轴的结束位置
f)baseline==========侧轴的基线位置,实现效果与开始位置一样
2.order:排序
控制子元素的排列顺序,数字越大越往后排,默认0,支持负数
3.flex:设置子元素如何分配空间
a)flex:1把剩余空间全部分配给当前元素
b)如果每一个子元素都有flex:1,那就是平均分配
c)如果有3个子元素:分别设置flex:1、flex:2、flex:3。那么就是把整个盒子分成了6份,第一个占1份,第二个占2份,第三个占3份。
4.flex-shrink:元素是否挤压
一般用于制作移动端的横向滚动。
a)0=====不挤压
b)1=====挤压【默认】
5.布局
1.双飞翼布局
2.圣杯布局