前端——盒子模型
1.内容区域——content width+height 高度和宽度组成
2.内边距——padding
- 会撑开盒子大小 但是不会改变内容区域的大小
- 背景颜色会延伸到padding里面
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
/* 内边距 上下左右都有10像素的内边距 */
/* padding: 10px; */
/*200 变成 220 总盒子宽度: 内容200+ 左右都是10*/
/* 内边距单例样式写法 */
/* 顶部内边距 */
/* padding-top: 10px; */
/* 右侧内边距 */
/* padding-right: 20px; */
/* 底部内边距 */
/* padding-bottom: 30px; */
/* 左侧内边距 */
/* padding-left: 40px; */
/* 二个值 复合写法 上下10 左右各20 */
padding: 10px 20px;
/* 三个值 上10 左右各20 下30 */
padding: 10px 20px 30px;
/* 四个值 按照顺时针 上:10 右 20 下 30 左 40 */
padding: 10px 20px 30px 40px;
}
</style>
3.边框——border
- 边框是包裹在内容和内边距的外侧
- 边框是会改变盒子大小 但是不会改变内容区域的大小
- 背景颜色是延伸到边框下面的
<style>
.box {
width: 200px;
height: 300px;
background-color: green;
/* 边框 */
/* border: 10px solid red; */
/* 边框大小: 10 边框风格: solid实线 边框颜色:红色 */
/* 边框无 */
border: none;
/* 点状线 */
/* border: 1px dotted red; */
/* 双边线 */
/* border: 10px double skyblue; */
/* 虚线 */
/* border: 10px dashed orange; */
/* 一个盒子 设置四条不一样的边框风格 */
/* 边框拆分 单个边框 */
/* 顶部边框 */
border-top: 10px solid red;
/* 右侧边框 */
border-right: 10px dotted orange;
/* 底部边框 */
border-bottom: 10px dashed skyblue;
/* 左侧边框 */
border-left: 10px double pink;
}
.wrap {
width: 300px;
height: 300px;
background-color: skyblue;
/* border: 5px solid red; */
/* 边框大小 */
border-width: 5px;
/* 边框风格 */
border-style: solid;
/* 边框颜色 */
border-color: pink;
/* 细拆分 单个边框的写法 */
/* border-top: 10px solid red; */
/* 顶部边框 大小/粗细 */
border-top-width: 10px;
border-top-style: solid;
border-top-color: orange;
}
</style>
4.外边距——margin
- 不会改变盒子大小 但是可以移动盒子位置
外边距合并问题:
（1）父子外边距合并
给父级设置一个支撑点 包裹起来
- 边框——border
- 内边距——padding
（2）兄弟外边距合并(上下外边距)——解决方法: 给任意一个兄弟添加 行内块属性就可以解决
<style>
/* 清除默认自带的内外边距 */
* {
margin: 0px;
padding: 0px;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
/* 外边距 上下左右 都是10像素 */
/* margin: 10px; */
/* 单例样式 */
/* 顶部外边距 盒子与顶部的距离 盒子向下移动 */
/* margin-top: 50px; */
/*左侧外边距 盒子会向右移动 */
/* margin-left: 100px; */
/*右侧外边距 控制当前盒子与右侧盒子中间距离 */
/* margin-right: 100px; */
/* 控制盒子与底部盒子的距离 */
/* margin-bottom: 150px; */
/* 两个值 上下各50 左右各100 */
/* margin: 50px 100px; */
/* 三个值 上 10 左右各20 下30 */
/* margin: 10px 20px 30px; */
/* 四个值: 上 右 下 左 */
/* margin: 10px 20px 30px 40px; */
/* 外边距 左右自适应居中 */
/* margin: 100px auto; */
/* 可以写负数值 开发中不怎么推荐 了解就可以 写负数是反方向 */
/* margin-top: -100px; */
}
.wrap {
width: 500px;
height: 500px;
background-color: green;
/* border: 1px solid red; */
padding: 1px;
}
.son {
/* 百分比取值 取值是取决于你的父级宽度 */
width: 50%;
height: 50%;
background-color: pink;
/* 左右自适应居中 */
/* margin: auto; */
/* 上下居中效果 */
margin: 125px auto;
}
.brother1 {
/* 行内块属性 */
/* display: inline-block; */
width: 200px;
height: 300px;
background-color: pink;
/* 底部外边距 */
margin-bottom: 100px;
}
.brother2 {
display: inline-block;
width: 300px;
height: 300px;
background-color: skyblue;
/* 顶部外边距 */
margin-top: 100px;
}
</style>
5.溢出隐藏
/* 默认值 内容超出盒子 是正常显示 */
/* overflow: visible; */
/* 溢出部分隐藏 常用 */
/* overflow: hidden; */
/* 内容不会超出盒子 出现滚动条 */
/* overflow: scroll; */
/* 只要你的内容超出盒子范围就会显示滚动条 不超出则不显示 */
overflow: auto;
6.清除默认样式
* {
/* 外边距 */
margin: 0px;
/* 内边距 */
padding: 0px;
/* 清除默认自带的小黑点 */
list-style: none;
/* 边框 */
border: none;
}
作业练习: ——需求：定义一个盒子，上2/3部分放置图片，下1/3部分放文字
如下图示例
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
/* 外边距 */
margin: 0px;
/* 内边距 */
padding: 0px;
/* 清除默认自带的小黑点 */
list-style: none;
/* 边框 */
border: none;
}
.box{
width: 220px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
}
.box>img{
width: 100%;
height: 200px;
}
.text1{
color: pink;
/* 外边距 */
/* margin-bottom: 30px;
margin-left: 10px;
margin-top: 10px; */
padding: 10px;
}
.text2{
color: #A27341;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="./1.webp" alt="">
<p class='text1'>
哪里找到这么好看的小姐姐
</p>
<p class='text2'>
认真学习代码
</p>
</div>
</body>
</html>运行结果：
