阅读量

“20230327有关盒子模型和弹性盒模型”

2023-03-27

盒子模型和弹性盒模型

1.盒子模型基础

又是偷偷引用别人的文章挂在开头，忘记了就看看：

宽度和高度

css里的width和height指填充以里的内容范围
元素宽度=左边界+左边框+左填充+内容宽度+右边界+右边框+右填充
元素高度同理

背景色

1 2	div{background-color：red；}

使用border为盒子加边框（即围绕着内容及补白的线，可设置其粗细，样式和边框）

 border-width:2px;  也可以设置为thin/medium/thick
border-style:soild/dash/dotted 分别为实线/虚线/点线
border-color：red；

也可以单独选择四周：

1 2	border-bottom/right/left/top :1px soild red (简写）

设置圆角：

1
2
3

div{border-radius:20px 10px 15px 30px;（按照下方顺序）
也可以分开写左上，右上，右下，左下： div{border-top-left：20px；···}

特别注意：左上右下，右上左下同可写成：

1	border-radius：20px 10px；

若全等则只写一个像素值即可

一个正方形当设置圆角效果值为元素宽度一半，显示为圆形

使用padding为盒子设置内边距（填充）

内容与边距可设置距离，称为“内边距”（填充），可分为上右下左（顺时针）

1 2	div(padding:20px 10px 15px 30px;}

同border-radius可以分开写padding-top，bottom，left，right；
全同写一个
注意：上下同，左右同写俩个

使用margin为盒子设置外边距顺序：上右下左（顺时针同padding）

1	div{margin:20px 10px 15px 20px;}

同padding：也可分为margin-top/right/left/bottom
上下同，左右同：写俩像素
全同直接写一个

不同padding：padding在边框内，margin在边框外

2.弹性盒模型

flex

1
2
3

设置display：flex；可把块级元素同排显示
flex需要加在父元素，改变子元素排列顺序
默认从左往右一次排列和父元素右边无间隙

##使用justify-content设置横轴排列式

1
2

justify-content：flex-start（交叉轴的起点对齐）/flex-end（右对齐）
justify-content：center(居中)/space-between(俩端对齐，项目间间距相等)/space-ground（每个项目俩侧距离相等所以项目间隔项目边框间隔俩倍）

使用 align-items设置纵轴排列方式

1
2
3

align-items:flex-start(上对齐)/flex-end(下对齐)
align-items：centter/baseline/stretch
分别为：居中；与项目第一行文字对齐；如项目未设置子项目高或者为auto将占满整个容器

给元素设置flex占比

例子：即在每个子元素中加入：flex：1；（数字任意定，看比例）

注：flex属性占比是相对父元素而言
只能设置为正整数
设置了flex后宽度失效（自动占满整个父元素）

本文作者： lllry
本文链接： http://wusterlllry.xyz/2023/03/27/%E2%80%9C20230327%E6%9C%89%E5%85%B3%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E5%92%8C%E5%BC%B9%E6%80%A7%E7%9B%92%E6%A8%A1%E5%9E%8B%E2%80%9D/
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！