html盒⼦模型⼦元素怎么⽔平占满⽗元素_CSS盒模型常见盒模型区域
书写元素内容区域：width+height
盒⼦可以实体化的区域：width+height+padding+border (背景可显⽰)
盒⼦实际占位的位置：width+height+padding+border+margin
宽度 width
!注意:
如果⼀个元素不添加width 属性，默认属性值为auto，不同的元素浏览器会根据其特点⾃动计算出实际宽度.
<div> 元素等独占⼀⾏的，其 width 属性的值会⾃动撑满⽗元素的 width 区域
<span> 元素等不需要独占⼀⾏的，其 width属性的值是内部元素内容⾃动撑开的宽度。
<body> 元素⽐较特殊，不需要设置 width 属性，宽度会⾃动适应浏览器窗⼝的宽度。
百分⽐
⾼度 height
与宽度类似
但如果⼀个元素不添加 height 属性，默认属性值为auto，浏览器会⾃动计算出实际⾼度，也就是内部元素内容⾃动撑开的⾼度。元素的⾼度⾃适应内部内容的⾼度。
边框的线条形状border-style
可以根据属性值类型进⾏单⼀属性划分border-⽅向-类型
细分时必须先写⽅向划分再写类型划分，否则属性名错误
p{border-right-color: pink;}
清除默认样式
⼤部分标签都有⼀个浏览器加载的默认样式，会对布局造成⼀些影响。为了避免默认样式对整体布局效果造成影响，⼀定要清除默认样式。盒模型属性中内外边距：⼤部分容器级标签都有默认边距，要么⽤标签选择器的并集⽅式，或通配符清除。
<ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。
<a> 标签的默认样式，设置页⾯中常⽤的a的公共样式：设置 color 和 text-decoration。
清除默认加粗效果：设置font-weight。(标题)
设置公共样式
给 <body> 标签设置整体⽂字样式，让⼤部分后代标签全部去继承。
overflow 属性
设置了⾼度的盒⼦，如果内部元素的加载⾼度超过⽗级，会出现溢出效果。可以通过⼀个溢出的属性 overflow，进⾏溢出部分内容的显⽰效果设置。
html怎么让所有内容居中margin实现元素⽔平居中
针对类似 <div> 样式上必须独占⼀⾏的盒⼦，如果 ⼦盒⼦宽度低于⽗盒⼦宽度，可以设置⼦盒⼦的 margin 值，⽔平⽅向的值都设置为auto。
原因：auto 只在⽔平⽅向有作⽤，⽔平⽅向的 margin 如果设置为 auto，边距会⾃动⽆限增⼤，直到撑满整个⽗元素除了⼦元素宽度之外剩余的区域，如果两个⽔平⽅向都是 auto，两边都要⽆限⼤，只能达到⼀个平衡，两边距离相同，导致盒⼦居中。
.box{ width:300px; height:300px; margin: 0 auto;}
margin 塌陷现象
margin 塌陷现象：标准流布局中 垂直⽅向如果有两个元素的外边距相遇，浏览器中加载的真正的外边距不是两个间距的加和，⽽是两个边距中值较⼤的，边距值⼩的塌陷到了边距值⼤的值内部。
同级元素塌陷
上⾯的元素有下边距 下⾯的元素有上边距 两边距相遇，真正盒⼦间距离是较⼤边距值。
⽗⼦元素塌陷
⽗⼦元素之间也会出现 margin 塌陷，⽗元素和⼦元素都设置了同⽅向的margin-top 值，两个属性之间
没有其他的内容进⾏隔离，导致两个属性相遇，发⽣margin 塌陷。
本⾝⽗元素与上⼀个元素的距离是0，⼦元素如果设置了垂直⽅向的上边距，会带着⽗级⼀起掉下来。
解决⽅法
①同级元素：如果两个元素垂直⽅向有间距，只需要设置给⼀个元素，不要进⾏拆分。
②⽗⼦元素：
让两个边距不要相遇，中间可以使⽤⽗元素 border 或 padding 将边距分隔开；
!更加常⽤的⽅法，⽗⼦盒模型之间的距离就不要⽤⼉⼦的 margin 去踹出来，⽽是⽗级的 padding 挤
出来。
!注意：⽔平⽅向的 margin 没有塌陷现象
浮动的元素也没有margin塌陷现象
盒模型⾃动内减
⽗⼦盒模型中，只有⼀个⼦元素，且⼦元素是类似 <div> 标签必须占⼀⾏的。不设置⼦元素的 width 属性，⼦元素的 width 属性值会⾃动加载⽗级元素的 width。
如果同时设置了⼦元素⽔平⽅向的 padding 和 border 、margin，不需要⼿动去进⾏内减，⼦元素的 width 会⾃动收缩尺⼨。
⼦元素所有的⽔平⽅向的位置所有属性的加和等于⽗元素的 width 。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。