目录
18、盒子模型
18.1、盒子模型概况
18.2、盒子模型—边框
18.3、盒子模型—内边距
18.4、盒子模型—外边距
19、盒子布局
19.1、水平布局
19.2、垂直布局
19.3、垂直外边距的折叠
19.4、内联元素的盒子
19.5、默认样式
19.6、盒子大小
19.7、阴影和圆角
18.1、盒子模型概况
1、文档流（normal flow）
网页是一个多层的结构,设置网页的样式，也是一层一层的设置
最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下，都在文档流中
元素分为两种状态：
在文档流中:才会区分块，行内，行内块
脱离文档流：就不会再区分块，行内，行内块了，原来元素在文档流中的特点也就都没
有了
元素在文档流中的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素（行内元素）
1:不会独占一行
2:宽度高度默认都是被内容撑开的，不能自己定义宽高
行内块元素
1、兼具块元素，行内元素的特点
2、三像素空白
1、盒模型是什么？
是一种布局的方式，将页面中所有的结构，划分成一个个小盒子，
页面就是由一个个小盒子构成
2、为什么要用盒模型
就像我们要布置一个客厅，沙发，茶几，桌子，椅子····
大小，位置，形状····
盒子就可以把元素的形状固定，固定成一个个矩形，我们在构建页面时，只需要考虑大小和位置即可
方便布局
3、具体怎么使用
盒模型 冰箱快递
内容区（content） 冰箱
内边距（padding） 泡沫
边框（border） 纸箱子
外边距（margin） 快递的位置
设置的width，height默认情况指的是盒模型内容区的大小
就是用来放内容的
18.2、盒子模型—边框
边框 ：是用来区分盒子内部，还是外部
设置边框：
border: 边框的大小 边框的颜色 边框的样式;
1、设置边框的完整写法
border-width: 10px;
border-color:green ;
border-style: solid;
border-style:
可选值： solid 实线
dashed 虚线
double 双线
dotted 点状的虚线
(1)、 可以跟多个参数
4个参数 上 右 下 左
3个参数 上 左右 下
2个参数 上下 左右
1个参数 上下左右
(2)、可以单独设置某一边
border-XXX-width: ;
border-XXX-color: ;
border-XXX-style: ;
其中 XXX 表示 : top,right,bottom,left
(3)、默认样式
border-width:;默认是1-3px
border-color:;默认是黑色
border-style:; 默认是none
2、设置边框的简写
border: 10px red solid;
单独设置某一边边框线
上 border-top: 10px red solid;
右 border-right:10px red solid;
下 border-bottom:10px red solid;
左 border-left:10px red solid;
去除某一边边框线
border-XXX: none ;
18.3、盒子模型—内边距
内边距（padding）：盒模型 边框与内容区之间的距离，属于盒子的内容
设置padding
1、padding：大小；
后可跟多个参数，规则跟border-width一样
2、设置某一边的内边距
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
盒模型的大小跟哪些组成部分有关系 ？
跟内容区，边框，内边距有关，跟外边距无关
18.4、盒子模型—外边距
外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top: ; 上外边距：设置一个正值：元素会向下移动。
设置一个负值：元素向上移动。
margin-right: ; 对于块元素来说，由于他独占一行，右侧没有其他元素，所以对页面没有影响。
margin-bottom: ; 下外边距：设置一个正值：其下边的元素会向下移动，挤别人。
设置一个负值：其下边的元 素会向上移动。
margin-left: ; 左外边剧：设置一个正值：元素会向右移动。
设置一个负值：元素向左移动。
由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改
变，而如果是设置右和下外边距会改变其他盒子的位置（挤别人）
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
规则和padding一样
19.1、水平布局
1、过度约束
一个元素水平方向是由7个值组成的，分别是：
margin-left+ border-left +padding-left +width +padding-right+ border-right+ margin-right=父元素内容区的宽度
浏览器规定这个元素水平方向的7个值相加必须要等于其父元素内容区的宽度,
如果等式不成立，浏览器就会自动调整这几个值，让等式成立，这个过程，我们叫过度约束
2、浏览器对过度约束是如何调整
浏览器会调整3个值，margin-left width margin-right
可以将以上3个值设置为auto
margin-left为auto
auto+0+0+100+0+0+0=600 auto=500
width为auto
0+0+0+auto+0+0+0=600 auto=600
margin-right为auto
0+0+0+100+0+0+auto=600 auto=500
margin-left width 为auto 调整的是width
width margin-right 为auto 调整的是width
margin-left margin-right 为auto 一起调整
margin-left width margin-right 都是auto 调整的是width
总结：
width为auto，只调整width，
width为固定值，margin-left margin-right同时为auto， 就两个都调整，把元素水平方
向挤到中间
19.2、垂直布局
一般情况下，我们不会给外层的父元素设置固定的高度，让它被子元素撑开，
这样，它就可以跟着子元素的变化而变化
overflow: ;
可选值：
visible 文本正常显示
hidden 裁剪多余的内容
auto 两侧自动生成滚动条
scroll 生成两侧的滚动槽
19.3、垂直外边距的折叠
兄弟元素
上面的元素的下外边距和下面的元素的上外边距重叠了
如果两个都是正值，谁大听谁的
如果一正一负，两者两加
如果两个都是负值，谁小听谁的（谁的绝对值大听谁的）
兄弟元素的外边距重叠一般情况不影响开发，不用做额外的处理
父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素,
导致父元素的位置发生变化，影响了整个页面布局，所以必须要处理
解决方案
1、隔开父子的垂直外边距 用透明的边框线隔开，但这种方式依然会影响页面布局
2、开启元素的隐藏属性 BFC
overflow:非visable的值；
3、解决方案
19.4、内联元素的盒子
从这几点分析：
内容区:只能被内容撑开，不可以自定义大小
内边距 、水平方向正常设置，垂直可以设置，而且不会影响其他元素的位置
边框 、可以设置，而且垂直方向不会影响其他元素
外边距、水平方向正常设置，外边距不会重叠
垂直方向设置没有效果
行内元素的盒模型
1: 不能设置width和height，被内容撑开
2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人
3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人
4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂
直外边距
display 用来设置元素显示的类型(元素类型的转换说过)
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 行内块块元素（即可以设置宽高，又不会独占一行）
table 将元素设置为一个表格
none 元素不在页面中显示（隐藏一个元素）
visibility 用来设置元素的显示状态
可选值：
visible 默认值 元素在页面中正常显示
hidden 元素不在页面中显示（隐藏一个元素），位置依然保留
19.5、默认样式
方式一：
1:清除浏览器的默认样式
方式二：
2:引入重置样式表（这两个文件，可找其他博客资源下载）
(1) 、 Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。
（2）、Normalize.css保持了许多默认的浏览器样式。 这就意味着你不用再为所有公共的
排版元素重新设置样式。
当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样
式保持一致并尽可能与现代标准相符合。
19.6、盒子大小
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
而我们设置width/height指的是内容区的大小
box-sizing 用来设置盒子尺寸的计算方式
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
19.7、阴影和圆角
知识点1:（文本样式说过）
box-shadow : ;
box-shadow : h-shadow v-shadow blur color;
h-shadow 阴影的水平位移距离 正值向右，负值向左 必写
v-shadow 阴影的垂直位移距离 正值向下，负值向上 必写
blur 阴影的模糊半径 值越大越模糊 可选 默认值0
color 阴影的颜色 可选 默认是字体的颜色
知识点2:
border-radius : ; 用来设置圆角
borde-top-right-radius: ; 右上角
border-top-left-radius: ; 左上角
border-bottom-left-radius: ; 左下角
border-bottom-right-radius: ; 右下角
border-radius: 50%; 画圆
到此这篇模型框架图（模型框架图中的公式一般用什么字体）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/79864.html