- width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 )
- border 边框
- border-radius 圆角
- box-shadow 阴影
- overflow 溢出
- float 浮动 ( 父元素塌陷问题 )
盒子模型
(Box Model )是指在网页设计中,用于描述和布局元素的一种模型
。它将每个元素看作是一个具有四个边界的矩形盒子,包括内容区域
(content)、内边距
(padding)、边框
(border)和外边距
(margin)
width 宽度 、height 高度 、padding 内边距 、margin 外边距 ( 外边距合并、子元素外边距塌陷问题 )
margin / padding | 说明 | margin / padding | 说明 |
---|---|---|---|
1个值 | 四方相同 | 2个值 | 上下 左右 |
3个值 | 上 左右 下 | 4个值 | 上 右 下 左 |
浏览器会自带 8px 的 margin 外边距
<style>div{/* 内容区域 */width: 200px;height: 200px;/*padding-方位名词 margin-方位名词设置元素水平居中(margin: x auto;)*/margin: 10px 20px 30px 40px;padding: 20px;/* 盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸 */border: 1px solid red;/* 防止盒子撑大方法:(1)手动减法 border/padding 的尺寸(2)内减模式 box-sizing:border-box 自动去计算占据的宽高 */box-sizing: border-box;}
</style>
<div></div>
效果:
外边距合并问题
垂直排列的兄弟元素,
上下 margin
会合并
,取
两个 margin 中较大值
生效;左右则会相加
<style>.one,.two,.three,.four{ width: 200px;height: 50px; float: left;}.clear::after{content: "";display: block;clear: both;}.one{background-color: #145eff;margin-right: 20px;}.two{background-color: #ffec00;margin-left: 30px;}.three{background-color: #09c90c;margin-right: 40px;}.four{background-color: #ee00ff;margin-left: 60px;}.div1{margin-bottom: 30px;}.div2{margin-top: 20px;}
</style>
<div class="clear div1"><div class="one"></div><div class="two"></div>
</div>
<div class="clear div2"><div class="three"></div><div class="four"></div>
</div>
效果:
子元素外边距塌陷问题
<style>/*父子级的标签;子元素 margin-top 会将值传递给父元素产生塌陷问题,导致父级一起向下运动;子元素 margin-bottom 会将值给传递使父元素产生下外边距*/.one,.four{ width: 180px;height: 50px;}.one{ background-color: #0067ff; }.four{ background-color: #ff0000; }.two{background-color: #fdf10d;width: 100px;height: 100px;margin-top: 20px; /* 导致父元素下拉 */}.three{background-color: #ed0dfd;width: 100px;height: 100px;margin-bottom: 20px; /* 使父元素产生下外边距 */}.fu{width: 180px;background-color: #00b905;/* 解决方法:1.给父元素加边框2.给父元素设置 overflow: hidden(也能触发BFC)3.给父元素通过 ::before 或 ::after 添加子元素(推荐).clear::after,.clear::before{content: "";display: table;clear: both;}4.设置内边距(方法1,方法4会将元素扩大)*//*overflow: hidden;*//*border: 1px solid red;*//*padding: 10px 0;*/}.clear::after,.clear::before{content: "";display: table;clear: both;}
</style>
<div class="one"></div>
<div class="fu clear"><div class="two"></div><div class="three"></div>
</div>
<div class="four"></div>
效果:
border 边框
none
:无边框;solid
:实线边框,默认;double
:双线边框;dashed
:虚线边框;dotted
:点线边框。允许单独对某一方向的边框线: top bottom left right
<style>body{display: flex;}div{width: 200px;height: 100px;margin-left: 20px;}div:nth-of-type(1){border: 10px double #0048ff;}div:nth-of-type(2){border-top: 10px double #ffea00;border-bottom: 10px dashed #0fa612;border-left: 10px dotted #ff00dd;border-right: 10px solid #ff0000;}
</style>
<div></div>
<div></div>
效果:
border-radius 圆角
个数 | 说明 | 个数 | 说明 |
---|---|---|---|
1个值 | 四个角相同 | 2个值 | 左上+右下 左下+右上 |
3个值 | 左上 右上+左下 右下 | 4个值 | 左上 右上 右下 左下 |
<style>body{display: flex;align-items: center;flex-wrap: wrap;}div{width: 120px;height: 120px;border: 1px solid red;margin: 0 20px 20px 0;}div:nth-of-type(1){border-radius: 30px;}div:nth-of-type(2){border-radius: 50%;}div:nth-of-type(3){width: 150px;height: 70px;border-radius: 50px;}div:nth-of-type(4){border-radius: 5px 50% 50% 50%;}div:nth-of-type(5){border-radius: 50% 0% 0% 50%;}div:nth-of-type(6){border-radius: 10% 100% 10% 0%;}
</style>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
效果:
box-shadow 阴影
属性值:
x轴偏移量
、γ轴偏移量
、模糊半径
、扩散半径
、颜色
、内 \ 外阴影
。可以设置多个阴影效果
,每个阴影效果之间用逗号分隔
<style>div{width: 100px;height: 100px;border: 1px solid red;margin: 20px;float: left;}#div1{/*x轴偏移量(必写)γ轴偏移量(必写)模糊半径(值越大阴影越模糊)扩散半径(阴影的半径大小,值越大阴影越大)颜色内外阴影(外阴影默认;内阴影inset,而且扩散半径数值越大阴影往内扩散越大,直到铺满盒子)*/box-shadow: 10px -10px 5px 2px red;}#div2{box-shadow: -10px 10px 5px 2px #46b5ff;}#div3{box-shadow: -10px -10px 20px 2px #ffda4a inset;}#div4{box-shadow: 10px 10px 5px 2px #67ff38 inset;}#div5{box-shadow: -10px 5px 8px 30px #b3ff07 inset;}#div6{box-shadow: -10px 5px 8px 20px #ffb8f3;}#div7{box-shadow: 10px 5px 8px 7px #6fffe5,25px 5px 8px 15px #db8fff;}
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
效果:
overflow 溢出
<style>div{width: 200px;height: 200px;border: 1px solid red;/* visible:默认值 hidden:溢出隐藏(有清除浮动、清除margin-top塌陷的功能)scroll:溢出滚动(无论是否溢出,均显示滚动条位置) auto:溢出滚动(溢出才显示滚动条位置)*/overflow-y: scroll;}
</style>
<div><h6>文字1</h6><h6>文字2</h6><h6>文字3</h6><h6>文字4</h6><h6>文字5</h6><h6>文字6</h6>
</div>
效果:
float 浮动 ( 父元素塌陷问题 )
left
:左对齐,right
:右对齐。浮动元素会脱离标准流
(脱标),不再保留原先的位置
。浮动的元素会具有行内块元素的特性
,此时不会有
行内块元素间隙问题
。浮动元素一行显示且顶端对齐排列
,超出父级宽度就换行。父元素一般不设置高度而由内容决定,内容浮动后就会造成塌陷问题
<style>.one div{width: 100px;height: 100px;float: left;/*1.给塌陷的父元素最后添加一个没有意义的儿子元素(不推荐).clearDiv{ clear: both; }2.给父元素设置overflow: hidden,能够解决因为触发了BFC(BFC是一种块级格式化文档,是一种网页的隐藏格式,默认渲染页面是不会触发)3.谁塌陷就给谁加 class="clear"(推荐)*/}.clear::after{content: "";display: block;clear: both;}.one{overflow: hidden;}.one div:nth-of-type(1){ background-color: #0fa612;}.one div:nth-of-type(2){ background-color: #ffec00;}.one div:nth-of-type(3){ background-color: #145eff;}.one div:nth-of-type(4){ background-color: #d655ff;}
</style>
<div class="one clear"><div>块1</div><div>块2</div><div>块3</div><div>块4</div>
</div>
效果: