CSS盒子模型
网页布局三大核心:盒子模型、浮动和定位
网页布局过程:
- 先准备好网页元素,网页元素基本都是盒子Box
- 利用css设置盒子样式
- 往盒子里面装内容
网页布局核心本质:利用css摆盒子
1.盒子模型组成
就是把HTML页面中元素看作是一个矩形的能盛装内容的盒子,CSS盒子模型本质上是一个盒子封装周围的HTML元素。它包括:边框(border)、外边距(margin)、内边距(padding)和实际内容(content)
2.边框(border)
边框由三部分组成:边框宽度(粗细)、边框样式和边框颜色
border
:
border-width
:border-top-width
border-bottom-width
border-right-width
border-left-width
border-style
:同理
border-color
:同理
div {
width: 300px;
height: 200px;
/* border-width 边框的粗细 一般情况下用px */
border-width: 5px;
/* border-style 边框的样式 solid实线边框 dashed虚线边框 dotted点线边框 double双线 groove立体效果线 */
/* border-style: solid; */
/* border-style: dashed; */
border-style: dotted;
/* border-color 边框的颜色 */
border-color: pink;
}
边框简写:没有顺序
div {
width: 300px;
height: 200px;
/* 边框的复合写法 */
border: 5px dotted pink;
}
边框分开写法:
div {
width: 200px;
height: 200px;
/* 上边框 */
border-top: 5px solid red;
/* 下边框 */
border-bottom: 5px solid blue;
/* 左边框 */
border-left: 5px solid blue;
/* 右边框 */
border-right: 5px solid blue;
}
层叠性:
div {
width: 200px;
height: 200px;
/* 层叠性 */
border: 1px solid blue;
border-top: 1px solid red;
}
表格的细线边框:
border-collapse: collapse
将相邻边框合并在一起
边框会影响盒子实际大小:
- 测量盒子不量边框
- 测量盒子包含边框,但需要
width
/height
减去边框宽度
/* 我们需要一个200*200的盒子,但这个盒子有10px的红色边框 */
div {
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid red;
}
如何让边框不会影响盒子大小:
box-sizing: border-box
article {
border: solid 2px #ddd;
width: 300px;
height: 300px;
padding: 50px;
box-sizing: border-box;
}
3.内边距(padding)
边框与内容之间的距离(可以是负值)
div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
内边距简写(4种情况)
div {
width: 200px;
height: 200px;
background-color: pink;
/* 内边距复合写法 */
/* 上下左右内边距都为5px */
padding: 5px;
/* 上下内边距为5px 左右内边距为10px */
padding: 5px 10px;
/* 上内边距为5px 左右内边距10px 下内边距为20px */
padding: 5px 10px 20px;
/* 上5px 右10px 下20px 左30px (顺时针) */
padding: 5px 10px 20px 30px;
}
内边距会影响盒子实际大小
需要width
/height
减去内边距大小
div {
width: 160px;
height: 160px;
background-color: pink;
padding: 20px;
}
实际开发时都使用padding
值控制文字与边框距离,而不使用text-indent
如果盒子没有指定weight/height属性,内边距则不会撑开盒子weight/height
h1 {
height: 100px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
/* 宽度默认继承父类 高度默认为0 */
padding: 30px;
background-color: skyblue;
}
4.外边距(margin)
控制盒子和盒子之间的距离(可以是负值)
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* .one {
margin-bottom: 20px;
} */
.two {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
<div class="one">1</div>
<div class="two">2</div>
简写和padding一致
外边距的典型应用:让块级盒子水平居中,必须满足两个条件:
- 盒子必须指定了宽度(width),不然默认和浏览器宽度一致
- 盒子左右的外边距都设置为auto
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
常见的三种写法:
margin-left: auto
margin-right: auto
margin: auto
margin: 0 auto
让行内元素/行内块元素水平居中:给其父元素添加text-align: center
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 让行内元素/行内块元素水平居中,给其父元素添加text-align: center */
text-align: center;
}
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="../Day02/imgs/one.png" alt="">
</div>
</body>
5.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
- 相邻块元素垂直外边距的合并
两个块元素之间的垂直间距不是margin-bottom
+margin-top
,而是取两个值中的较大者。因此尽量只给一个盒子添加margin值。
.alison,
.ruby {
width: 200px;
height: 200px;
background-color: pink;
}
.alison {
margin-bottom: 100px;
}
.ruby {
/* 两个div间垂直边距为200px */
margin-top: 200px;
}
<div class="alison">Alison</div>
<div class="ruby">Ruby</div>
- 嵌套块元素垂直外边距的塌陷
两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加
overflow: hidden
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* 为父元素定义上边框 */
/* border: 1px solid transparent; */
/* 为父元素定义上内边距 */
/* padding: 1px; */
/* 为父元素添加overflow: hidden */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
<div class="father">
<div class="son"></div>
</div>
6.清除内外边距
网页元素很多都带有默认的内外边距,不同的浏览器不一致。因此在布局前,需要清除网页元素的内外边距。
/* css的第一行代码 */
* {
margin: 0;
padding: 0;
}
123
<ul>
<li>abcd</li>
</ul>
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不设置上下内外边距。但是转换为块级和行内块元素就可以了。
新知识点:去掉li前面的项目符号(小圆点)
7.轮廓线
和边框的不同是:轮廓线不会占用空间
outline
:outline-style
outline-width
outline-color
article {
margin-top: 100px;
width: 300px;
height: 300px;
border: solid 2px red;
/* 轮廓线不占用空间位 */
outline-style: double;
outline-width: 15px;
outline-color: #ddd;
/* outline: solid 15px #ddd; */
}
h2 {
background: green;
}
* {
margin: 0;
padding: 0;
}
<article>
<div>Yooo</div>
</article>
<h2>Alison</h2>
因为轮廓线不占用空间,因此会将h2遮盖住。
应用场景:去掉表单自带轮廓线效果
在浏览器中,点击表单会自动加入轮廓线效果,使用outline: none
去掉。
input {
/* 鼠标点击后表单自带轮廓线,可以去掉 */
outline: none;
}
input:focus {
/* 获取焦点时 */
outline: none;
}
8.圆角控制详情使用
border-radius
:border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
可简写(左上 右上 右下 左下)px或者百分数
article {
width: 300px;
height: 300px;
border: solid 2px red;
/* 简写 */
border-radius: 10px 40px 80px 100px;
border-top-left-radius: 10px;
border-top-right-radius: 40px;
border-bottom-right-radius: 80px;
border-bottom-left-radius: 100px;
/* 从边20%的位置开始画圆 */
border-radius: 20%;
/* 正圆 */
border-radius: 50%;
}
div>em {
border-bottom: solid 2px red;
border-radius: 50%;
}
<body>
<article>
<div>Yooo <em>Alison</em></div>
</article>
</body>
9.尺寸控制
(1)限制范围
max-width
min-width
max-height
min-height
当图片过大,图片会被置为max-width
max-height
尺寸;若过小则被置为min-width
min-height
。
div {
width: 300px;
height: 200px;
border: solid 2px #ccc;
padding: 30px;
margin: auto;
}
div img {
/* 不超过width*90% */
max-width: 90%;
max-height: 90%;
/* 不小于width*50% */
min-width: 50%;
min-height: 50%;
}
(2)自动撑满父元素可用空间
height/width: -webkit-fill-available
块级元素可直接使用,行级元素需要先转为行内块再使用。
main {
width: 100vw;
height: 100px;
background: purple;
}
div {
background: orange;
/* 块级元素可直接使用
自动撑满父元素main */
height: -webkit-fill-available;
}
span {
background: brown;
/* 行级元素需要先转为行内块 */
display: inline-block;
height: -webkit-fill-available;
width: -webkit-fill-available;
}
(3)自身尺寸根据内容自适应
width:fit-content
宽度由自身内容大小决定。
div {
background: orange;
width: fit-content;
margin: auto;
padding: 10px;
}
(4)父元素盒子根据内容尺寸自适应
width: max-content||min-content
盒子宽度适应盒子内最大/最小元素的宽度
main {
/* 宽度适应盒子内最大元素的宽度 */
width: max-content;
/* 宽度适应盒子内最小元素的宽度 */
width: min-content;
height: 100px;
background: purple;
}
10.盒子阴影
box-shadow:水平偏移量 垂直偏移量 模糊度(羽化度) 颜色
div {
width: 300px;
height: 300px;
border: solid 3px #ddd;
/* 水平偏移量 垂直偏移量 模糊度(羽化度) 颜色 */
box-shadow: 5px 5px 10px rgba(100, 100, 100, 0.2);
}