CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））
标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器怪异盒子的开启，box-siziing：bober-box把标准盒子变成怪异盒子content-box把怪异盒子变成标准盒子弹性盒子模型。通过设置弹性盒子模型，可以更改子容
标准盒子模型：内容+内边距+边框+外边距
特点，会撑开容器。内边距和边框都是往外取延申，内容的区域大小不变
怪异盒子模型：内容+内边距+边框+外边距
box-siziing：beber-box 开启。
特点，会压缩容器，内边距和边框都是往内延申，盒子总体容器不变，内容区域大小会被压缩
弹性盒子模型
特点，自动横向摆放，
能通过父级元素和子级元素按比例放置子容器的位置
目录
一，怪异盒子模型（box-siziing：beber-box 把标准盒子变成怪异盒子）
第一种，修改父级元素flex-direction属性 指定子元素在容器内的位置 镜像
第二种，设置子容器在父容器的水平对齐的方式 justify-content
第三种，设置子元素在父容器的垂直对齐方式 align-itmes
一，怪异盒子模型（box-siziing：beber-box 把标准盒子变成怪异盒子）
<!-- 什么是怪异盒子模型 怪异盒子 边框和内边距都是往自己内部扩展的 标准盒子 边框和内边距都是往外撑的 box-siziing：content-box 可以把怪异盒子变成标准盒子 box-siziing：bober-box 可以把标准盒子变成怪异盒子 在移动端用怪异盒子比较多 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>怪异盒子模型</title>
<!-- 什么是怪异盒子模型
怪异盒子 边框和内边距都是往自己内部扩展的
标准盒子 边框和内边距都是往外撑的
box-siziing：content-box 可以把怪异盒子变成标准盒子
bos-siziing：bober-box 可以把标准盒子变成怪异盒子
在移动端用怪异盒子比较多
-->
<style>
/*<!-- 这是一个标准盒子-->*/
.box{
width: 100px;
height: 100px;
background-color: #ffcccc;
/*外边距四周都是50*/
margin: 50px;
/*边框20宽 实线 颜色*/
border: 20px solid gray;
/*圆角给她倒角一下*/
border-radius: 10%;
padding: 50px;
}
.box2{
width: 100px;
height: 100px;
background-color: #ffcccc;
/*外边距四周都是50*/
margin: 50px;
/*边框20宽 实线 颜色*/
border: 20px solid gray;
/*圆角给她倒角一下*/
border-radius: 10%;
padding: 50px;
/*加上一个*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<p></p>
</div>
<div class="box2">
<p></p>
</div>
</body>
</html>
二，弹性盒子模型
1，开启弹性盒子 display：flex flex弯曲的意思
一个大容器包含了多个小容器，当大容器设置为弹性盒子的时候。
通过更改父级元素和子级元素，可以获得各种各样比例的样式
第一种，修改父级元素flex-direction属性 指定子元素在容器内的位置 镜像
1，flex-direction 属性 可以指定子弹性盒子元素在父容器的位置
flex-direcrion row 左对齐 默认的排列方式
flex-direcrion row-reverse 反转 也就是右对齐排列 镜像过来
column，纵向排列
conlumn 翻转 从下往上排列 往下镜像
/* 让这个盒子变成弹性盒子*/
display: flex;
/*这个是默认横向排列*/
flex-direction: row;
/*反转 也就是右对齐排列*/
/*flex-direction: row-reverse;*/
/*列排向 从上往下*/
/*flex-direction: column;*/
/*从下往上 镜像*/
/*flex-direction: column-reverse;*/
/*默认设置从左对齐*/注意，这个是镜像排列的。
第二种，设置子容器在父容器的水平对齐的方式 justify-content
justify-content 属性 指定子元素容器水平对齐方式 和上面的区别是她不会镜像了 它属于平移
flex-start 默认值 左对齐
flex-end 右对齐 无镜像
center 居中
space-between 水平平均摆放
space-around 水平 左右侧留白 平均摆放
代码：
/*justify-content: flex-start;*/
/*靠右对齐 这个的区别是不会镜像了*/
/*justify-content: flex-end;*/
/*居中*/
justify-content: center;
/*水平方向自动按间隔平均摆放*/
/*justify-content: space-between;*/
/*两边留白 然后平均分布*/
/*justify-content: space-around;*/
/*两边留白更多一点点 也是平均留白*/
/*justify-content: space-evenly;*/注意，这种是不会被镜像的， 是平移过去
第三种，设置子元素在父容器的垂直对齐方式 align-itmes
3，align-itmes 垂直对齐调整
flex-start 默认值 上对齐
flex-end 下对齐
center 居中
/*默认值 上对齐*/
/*align-items: flex-start;*/
/*下对齐*/
/*align-items: flex-end;*/
/*居中摆放*/
align-items: center;
以上三种都是修改父级元素实现的效果，
第四种，修改子级元素，flex-数值 权重比例
4，子元素属性
1，flex-grow 权重
1 数值 平均拉伸每一个元素
注意 flex 1 会改变子元素的宽度 元素的宽度的权重比flex低 flex会平均改变每个元素的宽度
.root div{
width: 100px;
height: 100px;
/*设置每个子盒子都外边距10px*/
margin: 0 10px;
/*平均拉伸每一个元素*/
/*flex: 1;*/
}
.box{
background-color: #fa4d15;
/*分为4份 第一个独占2分 也就是独占一半 */
flex: 2;
}
.box1{
background-color: #4135fa;
/*另外一个独占4分之1份 */
flex: 1;
}
.box2{
background-color:slateblue;
flex: 1;
}全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒子模型</title>
<!-- 弹性盒子模型
盒子模型分类
1，标准盒子模型
边框和内边距是向外扩展撑开整体 外边距不会
2，怪异盒子模型
边框和内边距是往内压缩整体 外边距不会
3，弹性盒子模型（css3的新特性）
适应不同的屏幕大小。更有效的弹性解决容器内部的子元素排列，对齐和分配空间
css有2给大型版本
1，css2
2，css3
-->
<!-- 设置弹性盒子
1,弹性盒子的开启，在父级容器里面加上 display:flex;
2,弹性盒子的特点 自动是横向摆放的
3，父元素属性
1，flex-direction 属性 可以指定子弹性盒子元素在父容器的位置
flex-direcrion row 左对齐 默认的排列方式
flex-direcrion row-reverse 反转 也就是右对齐排列 镜像过来
column，纵向排列
conlumn 翻转 从下往上排列 往下镜像
2，justify-content 属性 指定子元素容器水平对齐方式 和上面的区别是她不会镜像了 它属于平移
flex-start 默认值 左对齐
flex-end 右对齐 无镜像
center 居中
space-between 水平平均摆放
space-around 水平 左右侧留白 平均摆放
3，align-itmes 垂直对齐调整
flex-start 默认值 上对齐
flex-end 下对齐
center
4，子元素属性
1，flex-grow 权重
1 数值 平均拉伸每一个元素
注意 flex 1 会改变快度 元素的宽度的权重比flex低 flex会平均改变每个元素的宽度
-->
<style>
.root{
width: 500px;
height: 500px;
background-color: #ffcccc;
/* 让这个盒子变成弹性盒子*/
display: flex;
/*这个是默认横向排列*/
flex-direction: row;
/*反转 也就是右对齐排列*/
/*flex-direction: row-reverse;*/
/*列排向 从上往下*/
/*flex-direction: column;*/
/*从下往上 镜像*/
/*flex-direction: column-reverse;*/
/*默认设置从左对齐*/
/*justify-content: flex-start;*/
/*靠右对齐 这个的区别是不会镜像了*/
/*justify-content: flex-end;*/
/*居中*/
justify-content: center;
/*水平方向自动按间隔平均摆放*/
/*justify-content: space-between;*/
/*两边留白 然后平均分布*/
/*justify-content: space-around;*/
/*两边留白更多一点点 也是平均留白*/
/*justify-content: space-evenly;*/
/*默认值 上对齐*/
/*align-items: flex-start;*/
/*下对齐*/
/*align-items: flex-end;*/
/*居中摆放*/
align-items: center;
}
.root div{
width: 100px;
height: 100px;
/*设置每个子盒子都外边距10px*/
margin: 0 10px;
/*平均拉伸每一个元素*/
/*flex: 1;*/
}
.box{
background-color: #fa4d15;
/*分为4份 第一个独占2分 也就是独占一半 */
flex: 2;
}
.box1{
background-color: #4135fa;
/*另外一个独占4分之1份 */
flex: 1;
}
.box2{
background-color:slateblue;
flex: 1;
}
</style>
</head>
<body>
<div class="root">
<div class="box">我是0号盒子</div>
<div class="box1">我是2号盒子</div>
<div class="box2">我是3号盒子</div>
</div>
</body>
</html>
总结
标准盒子模型，外边距（margin），内边距（padding），线宽（border），内容。内边距和线框会撑开容器
怪异盒子模型，外边距（margin），内边距（padding），线框（border），内容。内边距和相框会压缩容器
怪异盒子的开启，box-siziing：bober-box 把标准盒子变成怪异盒子
box-siziing;content-box 把怪异盒子变成标准盒子
弹性盒子模型。
通过设置弹性盒子模型，可以更改子容器在父级容器的平均摆放距离
开启：display-flex
子容器会自动横向摆放
修改父级元素获得效果
1，flex-direction 镜像摆放
row 左对齐 默认值
row-reverse 反转 镜像过来
column 纵向排列
conlum 纵向反转
2，justify-content 指定子容器水平摆放 平移不镜像
flex-start 左对齐 默认值
flex-end 右对齐
center 居中
space-between 水平平均摆放
space-around 水平平均摆放 左右留白
3，algin-itmes 指定子容器垂直摆放
flex-start 上对齐
flex-end 下对齐
center 居中
通过修改子级别元素
flex-数值 根据权重比例不同 容器的位置也不同
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
21
0- 0
已为社区贡献4条内容
所有评论(0)