标签：盒子 样式 元素 默认 padding 内边 设置 外边 margin
1 盒子模型深入讲解
1.1 盒子模型的组成
① 盒子模型的相关概念
1. 每个元素都可以比作成一个盒子，页面布局就是盒子的排列和堆砌
2. 盒子模研究的概念： 内容、内边距、边框、外边距
内容（content）： 内容区域是元素中最主要的区域，元素中的文本内容以及后代元素都显示在内容区域。
内边距（padding）： 是内容与元素边界（边框）的距离。
边框（border）： 在元素的边界上。
外边距（margin）： 是元素与父元素或其他兄弟元素的距离。
② 影响盒子大小的因素
1. 元素的总宽总高 = 内容宽高 + 内边距 + 边框宽度
2. 外边距主要影响元素（盒子）的位置
1.2 盒子中的内容区域
① 设置内容区域的宽高的 CSS 属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| width | 固定宽度 | 长度 |
| max-width | 最大宽度 | 长度 |
| min-width | 最小宽度 | 长度 |
| height | 固定高度 | 长度 |
| max-height | 最大高度 | 长度 |
| min-height | 最小高度 | 长度 |
② 设置内容宽高的规则
1. 设置最小最大宽高更多地用于限制默认计算的宽高
2. 最小最大宽高一般不与固定宽高一起设置
③ 元素的默认宽度
行内元素和行内块元素：
默认宽度和高度都是被里面的内容撑开
块级元素
默认高度被内容撑开
默认宽度根据父元素内容的宽度进行计算
块级元素的默认宽度的计算规则：
元素的默认总宽度 = 父元素内容宽度 - 该元素的左右外边距
元素的默认内容宽度 = 父元素内容宽度 - 该元素的左右外边距 - 该元素的左右边框 - 该元素的左右内边距
1.3 盒子的内边距 padding
① 相关 CSS 属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| padding-left | 左内边距 | 长度 |
| padding-right | 右内边距 | 长度 |
| padding-top | 上内边距 | 长度 |
| padding-bottom | 下内边距 | 长度 |
| padding | 复合属性 |
② padding 设置规则
padding 复合属性的设置规则：
/* 所有方向的内边距 */
padding: 20px;
/* 上下 左右 */
padding: 30px 15px;
/* 上 左右 下 */
padding: 15px 20px 10px;
/* 上 右 下 左 */
padding: 10px 20px 30px 40px;
padding 值设置的规则：
1. 使用百分比设置内边距，不论任何方向的内边距参照的都是父元素内容的宽度
2. 内边距的值不能是负值（⭐️）
不同显示模式的元素设置内边距：
1. 块级元素、行内块元素可以完美设置各个方向的内边距。
2. 行内元素可以完美设置左右内边距，上下内边距设置不完美。
1.4 边框 border
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| border-style | 边框风格 | none：没有边框。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。 hidden：边框隐藏 |
| border-color | 边框颜色 | 颜色 |
| border-width | 边框宽度 | 长度（不能用百分比） |
| border | 复合属性 | |
| border-left-style border-left-color border-left-width border-left border-right-style border-right-color border-right-width border-right border-top-style border-top-color border-top-width border-top border-bottom-style border-bottom-color border-bottom-width border-bottom |
具体不作介绍 |
边框有默认宽度(1.5px)和颜色，只是没有样式
1.5 外边距 margin
① 相关 css 属性
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| margin-left | 左外边距 | 长度 |
| margin-right | 右外边距 | 长度 |
| margin-top | 上外边距 | 长度 |
| margin-bottom | 下外边距 | 长度 |
| margin | 复合外边距 | 长度 |
设置上外边距和左外边距，影响的是本元素的位置
设置下外边距和右外边距，影响的是兄弟元素的位置
② margin 设置规则
margin 复合属性的设置规则：
1个值： 4个方向一起设置
2个值： 上下 左右
3个值： 上 左右 下
4个值： 上 右 下 左
margin 值设置的规则：
1. 使用百分比设置外边距，不论任何方向的外边距参照的都是父元素内容的宽度
2. 外边距可以设置负值 （⭐️）
3. 块级元素的左右外边距同时设置为 auto，该元素在父元素中水平居中
不同显示模式的元素设置外边距：
1. 块级元素、行内块元素可以完美设置各个方向外边距
2. 行内元素只能设置左右外边距，上下外边距设置无效
③ margin 塌陷
什么是 margin 塌陷？
1、 第一个子元素的上外边距和最后一个子元素的下外边距，会塌陷到父元素上
2、 只有块级元素的上下外边距才会发生塌陷。
如何解决 margin 塌陷？
1. 方案一： 给父元素设置边框
2. 方案二： 给父元素设置内边距
3. 方案三： 给父元素设置 overflow:hidden;
我理解就是就是将子元素与父元素各自的外边距分开
④ margin 合并
什么是 margin 合并？
1. 上面兄弟元素的下外边距与下面兄弟元素的上外边距会合并，两者之间页面展示的距离取较大的外边距
2. 只有块级元素的上下外边距才会发生合并
如何解决 margin 合并？
不需要解决！
1.6 内容溢出
| CSS 属性名 | 功能 | 属性值 |
|---|---|---|
| overflow | 设置溢出内容的显示方式 | visible：显示，默认值。 hidden：隐藏。 auto：如果溢出显示滚动条。 scroll：不论是否溢出都显示滚动条。 |
| overflow-x | 水平方向溢出内容的显示方式 | 同上 |
| overflow-y | 垂直方向溢出内容的显示方式 | 同上 |
auto 和 scroll 的区别：
1. auto：如果内容不溢出没有滚动条，内容溢出有滚动条
2. scroll：不论是否溢出都显示滚动条。
1.7 隐藏元素
display 属性：
display: none;
彻底隐藏元素，不占据任何位置！
visibility 属性：
visibility: hidden;
元素虽隐藏但是仍然占据位置！
2 样式继承和默认样式
2.1 样式继承
1. 后代元素可以继承祖先元素上设置的样式
2. 那些样式可以继承？
字体样式： font-size font-family font-weight font-style font
文字颜色： color
文本样式： text-align text-indent text-decoration line-height letter-spacing word-spacing
注意： vertical-align 该样式不可以被继承
2.2 默认（自带）样式
body: 自带8px的外边距
h1~h6：自动上下外边距、粗体字、字体大小
p：自带上下外边距
ul、ol：自带左内边距、上下外边距
a: 自带下划线、文字颜色、鼠标光标
....
2.3 继承的样式、默认（自带）的样式、直接设置的样式
直接设置的样式 > 默认（自带）的样式 > 继承的样式
标签：盒子,样式,元素,默认,padding,内边,设置,外边,margin 来源： https://www.cnblogs.com/yunyublog/p/16030271.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。