h5 day15笔记 2021.09.03

怪异盒模型:(IE盒模型:丢失文档类型的时候,在IE低版本浏览器中会以怪异盒模型方式解析)

box-sizing:content-box(标准盒模型)/border-box(怪异盒模型)

特点:1)padding不会撑大容器大小;2)border向内长(button也是)

--不推荐PC端使用,建议在移动端使用;

弹性盒:   display:flex;(控制子级元素在父级元素上的排列方式)

-- 弹性盒属性要给父级添加,使父级形成弹性盒环境 控制子级元素;

-- 弹性盒中默认主轴方向是X轴(水平方向) 默认的侧轴是Y轴;

--弹性盒环境下所有的元素都可以直接设置宽高大小;

--居中方式:针对于单个元素设置(margin:auto);

注意:浮动在弹性盒的环境下是没有作用;定位、盒模型可以使用;

添加在父级元素上的属性:

控制弹性盒主轴方向: flex-direction:row(默认x轴)/column(主轴为Y轴,测轴为X轴)

主轴的对齐方式:justify-content:flex-start /flex-end /center /space-between(两端对齐,其他空间自动分配)/space-around(元素间间距自动分配)/space-evenly(元素间间距完全相等)

侧轴对齐方式:align-items:flex-start/ flex-end/ center/ baseline

换行:flex-wrap:nowrap/wrap   (弹性盒中默认所有的子级元素都会在一行内显示 进行挤压)

行间距:align-content:flex-start /flex-end /center /space-between(两端对齐,其他空间自动分配)/space-around(元素间间距自动分配)/space-evenly(元素间间距完全相等)

添加在子集元素上的属性:

align-items:表示侧轴上的对齐方式 控制所有的子级元素

align-self:表示侧轴上的对齐方式 控制单个子级元素

flex作为属性:

flex:数字  (表示所占份额)

flex:1 占主轴上的剩下的空间并且会撑大当前盒子的大小    重点!!!

居中方式的总结:

- 表格居中 align、valign

- 文本居中 text-align、line-height

- 版心居中 margin:0 auto

- 基线对齐 加标签 转类型 基线对齐 vertical-align 

- 背景居中 background-position

- 定位居中 已知(1. left50%、top50% + margin:-本身宽高的一半;  2.计算属性)和未知居中(上下左右都为0)

- 位移居中

- 弹性盒的主轴/侧轴居中

上一篇:React之ref


下一篇:Markdown基本语法操作,我的第一篇博客