关于盒模型
背景应用于由content和padding, border组成的区域。
width 和 height 指的是content的宽度和高度
padding, margin百分数值是相对于其父元素的 width 计算的
-
外边距合并: 两个垂直外边距直接接触时，形成一个外边距
-- 高度合并为最大的那个
image.png
-- 内部嵌套的时候也会合并，除非有padding分割
image.png
-- 普通文档流中块框才会发生margin合并。行内框、浮动框或绝对定位之间的外边距不会合并。 -
定位
-- z-index只能用于定位情况，flex absolute relative
-- 存在卡住的情况
image.png 行内元素、块级元素
-- 行内元素：
span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
-- 块级元素
div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dlclear 清除浮动
不允许某一侧出现浮动元素
几大布局
flex布局，参阅阮一峰老师的文章
- 子元素的float、clear和vertical-align属性失效
- main-axis 是x轴，cross-axis是y轴
- 容器属性-父组件
flex-direction：主轴方向，row | row-reverse | column | column-reverse
flex-wrap：一行排不下怎么换行，nowrap | wrap | wrap-reverse
（reverse从最后往前）
flex-flow：缩写上面两个属性 <flex-direction> <flex-wrap>;
justify-content：项目在主轴上的排列方式，flex-start | flex-end | center | space-between | space-around;
align-items：cross-aixs上排列方式，flex-start | flex-end | center | baseline | stretch
align-content：多根轴线的对齐方式，flex-start | flex-end | center | space-between | space-around | stretch; - 每个item子组件属性
order：数值越小，排列越靠前，默认为0
flex-grow：默认为0，即使有剩余空间也不放大。根据比例划分剩余空间
flex-shrink：默认为1，若没有剩余空间则缩小。 按照比例缩小，当然0的时候不变
flex-basis：默认auto，分配之前占据的空间，从而计算出上述的剩余空间
flex：none | <'flex-grow'> <'flex-shrink'> <'flex-basis'>
align-self：单独指定某个item的在cross-axis上样式，参考上面的align-items;
Grid布局
display:grid | inline-grid
- 定义在container父容器上面
- grid-template-columns：每一列的列宽，grid-template-rows：每一行的行高
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(3, 33.33%); // repeat(n | auto-fill,value)，auto-fill尽可能容纳多的单元格
grid-template-rows: repeat(3, 33.33%);
grid-template-columns: 1fr 2fr; // fr(nfr, nfr)，n根据倍数分布
grid-template-columns: 1fr 1fr minmax(100px, 1fr); // minmax(100px，1fr) 宽度范围
grid-template-columns: 100px auto 100px; // auto 自己决定
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4, c5]; // 指定网格线的名称，一根可以有多个名字
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
- grid-row-gap ，grid-column-gap ，grid-gap 设置行间距、列间距、合并
- grid-template-areas 一个区域由单个或多个单元格组成
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd . f'
'g . i'; // 使用"点"（.）表示不需要用的。a-i命名了区域，每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end
}
- grid-auto-flow 排放顺序
grid-auto-flow：row | column, dense 默认row按行排列，dense则是尽可能紧密排放 - 对齐：container的每个item
.container {
justify-items: start | end | center | stretch; // 水平
align-items: start | end | center | stretch; //垂直
place-items: <align-items> <justify-items>; // 合并写法
}
- 对齐：当前设置容器的本身
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 水平
align-content: start | end | center | stretch | space-around | space-between | space-evenly; //垂直
place-content: <align-content> <justify-content> // 合并
}
- 不赞同：grid-template 合并、grid合并
- 定义在每个item上
- 指定每个item靠在哪条网格线上，除了设置数字（第几条），还可以使用名称。
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / 3; //合并
grid-row-start: 2;
grid-row-end: 4;
grid-row: 2 / 4; //合并
grid-column-start: header-start;
grid-column-end: header-end;
grid-column-start: span 2; // item-1的左距离右跨越2个网格
grid-column-end: span 2; // 等同于上面
}
- grid-area
指定项目放在哪一个区域，对应grid-template-areas，可以合并grid-area: <row-start> / <column-start> / <row-end> / <column-end>; - item的对齐
justify-self：水平，类比justify-items，只作用于单个项目。
align-self：垂直，类比align-items，只作用于单个项目。
place-self: <align-self> <justify-self>; 合并
