弹性盒

最新推荐文章于 2024-10-11 08:32:11 发布

置顶 xiaoliu998

最新推荐文章于 2024-10-11 08:32:11 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/xiaoliu998/article/details/105037035

版权

calc(x-y)方法：运算符号前后一定要空格

pointer-events:none;穿透到当前元素

标准盒模型：box-sizing:content-box

宽高是独立的

内边距是独立的，会把元素撑大

边框是独立的

注意：宽高不包含边距和边框

怪异盒模型：box-sizing:border-box

宽高包含内边距和边框

怪异盒模型触发方式：1、丢失<!doctype html>在ie678下触发

2、给元素加box-sizing:border-box

弹性和布局（flex):display:flex;

作用：控制子集在主轴上排列

显示规则：所有的子元素都会在主轴上排列，默认为x轴

如果设置x为主轴，那y为侧轴

如果设置y为主轴，那x为侧轴

设置方式：父元素必须为弹性盒display:flex;

display:inline-flex;(两个元素会在一行显示)

设为弹性盒：1、弹性盒子元素默认在主轴上排列

2、父级元素为弹性盒，子元素都能设置宽高

3、父元素为弹性盒，让子元素在弹性盒中上下左右居中，只设置margin:auto;

设置display:flex/inline-flex;对子元素的影响

子元素的float和clear都无效

vertical-align(元素垂直方式对齐)无效

vertical-align:元素垂直对齐方式

top 顶部对齐

middle中间对齐

bottom底部对齐

针对inline-block和inline元素有用

容器（父元素）属性：flex-direction:;

row水平方向主轴

row-reveres水平反向主轴

column垂直方向主轴

column-reveres垂直反向主轴

flex-wrap:;子元素是否换行

nowarp不换行

warp换行

warp-reveres反向换行

flex-flow:设置主轴是否换行

justify-content:;子元素在主轴上的对齐方式

flex-start 起始位置

flex-end终点位置

center居中

space-around完全自动分配

space-between 两端对齐

align-items:;子元素在侧轴上的对齐方式

flex-start起始位置

flex-end终点位置

center居中

baseline基线对齐

stretch默认位置对齐

align-content:;多行元素在侧轴上的对齐方式
（多行元素才有效）

flex-start起始位置

flex-end终点位置

center居中

space-around完全自动分配

space-between两端对齐，中间

项目（子元素）属性：align-self:;子元素在侧轴上的对齐方式

给本身添加

flex-start起始位置

flex-end终点位置

center居中

stretch拉伸（此元素不设置高度或者宽度）

auto默认值(如果父元素有此属性设置，则继承align-items;属性设置)

order:;数值越大，子元素越靠后