CSS盒子模型(border、padding、margin设置)、行内块或行内元素水平居中、去除li小圆点、圆角、盒子阴影、文字阴影
java哥
阅读：246
2022-06-06 14:12:52
评论：0
目录
1. 盒子模型的组成
1. border边框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
width: 300px;
height: 300px;
border: 5px dotted red;
border-right: 10px dashed yellow;
}
</style>
</head>
<body>
<div>盒子一</div>
</body>
</html>
参数说明如下：
- border3个参数分别是border-width、border-style、border-color, 其中border-style的值可以是none(默认)、solid、dashed(虚线)
- 还可以设置border-top、border-left、border-bottom
- border会使盒子实际尺寸变大
显示效果如下：
1.1 border-collapse: collapse
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
table {
border-collapse: collapse;
}
th,td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>赵四</td>
<td>19</td>
</tr>
</tbody>
</table>
</body>
</html>
- 设置
border-collapse: collapse可以使表格之间的间隙没有，而且设置的border相邻的部分会被合并
显示效果如下：
2. padding内边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
width: 300px;
height: 300px;
padding: 40px 30px 20px 10px;
}
P {
padding: 40px 30px 20px 10px;
}
</style>
</head>
<body>
<div>
<p>段落一</p>
</div>
</body>
</html>
- 当padding值为1个时，则表示周围4块。当padding值为两个时，则第一个表示上下，第二个表示左右。当padding值为4个，则分别表示上、右、下、左
- 也可以用padding-left、padding-right、padding-top、padding-bottom单独指定
如果盒子指定了width/height，再指定padding值，padding会使盒子变大
如果盒子没有指定width/height，但指定padding值，padding不会使盒子变大
3. margin外边距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
width: 300px;
height: 300px;
background-color: red;
margin: 10px auto 30px auto;
}
</style>
</head>
<body>
<div>盒子一</div>
</body>
</html>
说明：
- 因为浏览器会给不同盒子设置不同的margin和padding，为了统一，需要将margin和padding设置为0
- 当margin值为1个时，则表示周围4块。当margin值为两个时，则第一个表示上下，第二个表示左右。当margin值为4个，则分别表示上、右、下、左
- 也可以用margin-left、margin-right、margin-top、margin-bottom单独指定
- 块元素水平居中的条件：
- 块元素设置了width
- 块元素左、右margin设置为auto
显示效果如下：
3.1 margin-top塌陷问题
如果父盒子和子盒子都有margin-top，则会引起盒子塌陷问题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.outer {
width: 300px;
height: 300px;
background-color: red;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
background-color: yellow;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">盒子一</div>
</div>
</body>
</html>
正常显示效果如下：
如果不加overflow: hidden;，显示效果如下：
4. 行内块或行内元素水平居中
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<span>行内元素</span>
<img src="images/baidu.png"/>
</div>
</body>
</html>
只需给父元素添加text-align: center;即可
显示效果如下：
5. 去除li小圆点
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
li {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>元素一</li>
<li>元素二</li>
<li>元素三</li>
</ul>
</body>
</html>
显示效果如下：
6. border-radius圆角
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
width: 800px;
height: 300px;
background-color: red;
border-radius: 10px 50% 50% 40px;
}
</style>
</head>
<body>
<div>盒子一</div>
</body>
</html>
参数说明如下：
- 百分比的长度, 为长和宽最大的百分值
- 当border-radius值为1个时，则表示4个圆角。当border-radius值为两个时，则第一个表示左上角和右下角，第二个表示右上角和左下角。当border-radius值为4个，则分别表示左上角、右上角、右下角、左下角
- 也可以用border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius单独指定
显示效果如下：
7. 盒子阴影box-shadow
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
div {
width: 800px;
height: 300px;
background-color: red;
box-shadow: 10px 20px 5px 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div>盒子一</div>
</body>
</html>
参数说明如下：
- 盒子阴影不占用空间，不影响其它盒子排列
- 第一个参数h-shadow，必选，表示阴影偏移x的位置，大于0往右偏，小于0往左偏
- 第二个参数v-shadow，必选，表示阴影偏移y的位置，大于0往下偏，小于0往上偏
- 第三个参数blur，表示阴影模糊的程度，默认为0px不模糊，数值越大越模糊
- 第四个参数spread，表示阴影的大小，数值越大，阴影越大
显示效果如下：
8. 文字阴影
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test title</title>
<style>
h4 {
text-shadow: 3px 6px 2px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<h4>我是有阴影的文字</h4>
</body>
</html>
参数说明如下：
- 第一个参数h-shadow，必选，表示阴影偏移x的位置，大于0往右偏，小于0往左偏
- 第二个参数v-shadow，必选，表示阴影偏移y的位置，大于0往下偏，小于0往上偏
- 第三个参数blur，表示阴影模糊的程度，默认为0px不模糊，数值越大越模糊
显示效果如下：
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
