CSS盒子
盒子介绍
盒子必须是块元素
使用前需要添加
* {margin: 0;padding: 0;box-sizing: border-box;
}
让盒子根合理
盒子主要包括:盒子宽高,盒子边框,盒子内边距 ,盒子外边距,盒子阴影, 盒子圆角
先来看一个案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{/*宽高*/width: 200px;height: 200px;/*边框*/border: 1px silver solid;/* 外边距*/margin: 10px;/* 内边距*/padding: 10px;/* 阴影*/box-shadow: 1px 1px 5px silver;/* 圆角*/border-radius:6px 6px 6px 6px}</style>
</head>
<body><div>abc</div></body>
</html>
我们来解析这个盒子的个个属性
定义一个盒子
必须三要素 1. 块元素 2.宽高 3.边框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{/*将便签改为块元素 ,如果标签本身就是快元素 (可以省略此代码)*//*display: block;*//*宽高*/width: 200px;height: 200px;}</style>
</head>
<body>
<div>abc</div>
</body>
</html>
盒子边框
| 边框位置 |
|---|
| top 设置上边框 |
| right 设置右边框 |
| bottom 设置下边框 |
| left 设值左边框 |
不加边框位置就是设置4条边框
border-边框位置: 粗细 颜色 样式; 设置一条边框的所有样式
border: 粗细 颜色 样式; 设置4边框的所有样式
边框隐藏
border-边框位置:none ;
设置线条形状
solid 实线 dotted 点线 dashed 虚线 double 双线
border-边框位置-style: ?;
边框粗细
border-边框位置-width: ?px
边框颜色
border-边框位置-color: ? ;
案例:
<style>#div_id_1{width: 100px;height: 100px;/*边框线条样式*/border-style: dotted ;/*边框粗细*/border-width: 2px;/*边框颜色*/border-color: salmon;}</style><div id="div_id_1"></div>
简便方式
border: 2px salmon dotted;
水平线
<hr style="border-style: solid ; color: #d4e390 ;border-width: 1px ;width: 400px ">
盒子内边距
div{/*将便签改为块元素 ,如果标签本身就是快元素 (可以省略此代码)*//*display: block;*//*宽高*/width: 200px;height: 200px;/* 边框*/border: 1px silver solid;/* 内边距*/padding: 40px;}<div>abc</div>
先来看看什么是内边距 在游览器上按f12
红线画的就是内边距
定义内边距:
| 介绍 | 属性 | 单位 |
|---|---|---|
| 设置上内边距 | padding-top:?px; | px % 等… |
| 设置右内边距 | padding-right:?px; | px % 等… |
| 设置下内边距 | padding-bottom:?px; | px % 等… |
| 设置左 内边距 | padding-left:?px; | px % 等… |
| 设置内部 内容居中 | padding:auto; | px % 等… |
| 设置内部 内容距离顶部多少px 然后居中 | padding:60px auto; | px % 等… |
统一设置
如果设置3边距 或者2边距就找对边
4参数padding; 上? 右 ? 下 ? 左? ;
3参数padding; 上? 右 ? 下 ? ;
2参数padding: 上? 右?
1参数padding: 设置4边?;
盒子外边距
<style>div{/*将便签改为块元素 ,如果标签本身就是快元素 (可以省略此代码)*//*display: block;*//*宽高*/width: 200px;height: 200px;/* 边框*/border: 1px silver solid;/* 外边距*/margin: 40px;}</style><div >abc</div>
先来看看什么是外边距 在游览器上按f12
定义内边距:
| 介绍 | 属性 | 单位 |
|---|---|---|
| 设置上内边距 | margin-top:?px; | px % 等… |
| 设置右内边距 | margin-right:?px; | px % 等… |
| 设置下内边距 | margin-bottom:?px; | px % 等… |
| 设置左 内边距 | margin-left:?px | px % 等… |
| 设置内部 内容居中 | margin:auto; | px % 等… |
| 设置内部 内容距离顶部多少px 然后居中 | margin:60px auto; | px % 等… |
统一设置
如果设置3边距 或者2边距就找对边
4参数margin; 上? 右 ? 下 ? 左? ;
3参数margin; 上? 右 ? 下 ? ;
2参数margin: 上? 右?
1参数margin: 设置4边?;
盒子阴影
外部阴影和内部阴影
注意 一个元素中 内部阴影和外部阴影只能写一个
外阴影
box-shadow: 1px 1px 5px silver;
第一个属性是左右移动阴影
第二个属性是上下移动
第三个属性是阴影大小
第四个属性是阴影颜色
内阴影
在第一个属性前加inset
box-shadow:inset 1px 1px 5px silver;
盒子圆角
语法; border-radius: ? ? ? ?; 单位px
每个值代表一个角 左上 右上 右下 左下 的顺序 0为直角
设一个值 是全角相同变化
border-radius:6px;
设二个值是
- 参数1左上和右下 对角 变化
- 参数2右上和坐下 对角 变化
border-radius:6px 20px ;
设三个值是
- 参数1左上
- 参数2 右上左下对角变化
- 参数3右下
border-radius:5px 30px 15px ;
%50 或者50px的比例是圆形
<style>div{/*宽高*/width: 200px;height: 200px;/* 边框*/border: 1px silver solid;/*圆角*/border-radius:50% 50%;}</style>
宽度是高度的一倍或者三分二 都是椭圆
<style>div{/*宽高*/width: 200px;height: 100px;/* 边框*/border: 1px silver solid;/*圆角*/border-radius:50% 50%;}
</style>
锁定盒子大小
box-sizing:border-box;
//锁定盒子 不会随着padding和boder的加入而增大盒子的占用空间
自作卡片
代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div_id_1{position: relative;margin: auto;width: 200px;height: 300px;border: 1px silver solid;border-radius:15px;padding: 10px;box-shadow: 1px 1px 10px silver;}#div_id_2{width: 100%;height: 50%}img{border-radius:13px;box-shadow: 1px 1px 10px silver;}h5{font-size: 16px;color: #4d4d4d;text-align: center;}p{font-size: 12px;color: #ffabb9;}span{font-size: 9px;color: silver;position: absolute;bottom: 5%;right: 5%;}</style>
</head>
<body><div id="div_id_1"><div id="div_id_2" ><img src="2.jpg" width="100%" height="100%"></div><h5>神武赵子龙</h4><p>怒，林更新不抱网红抱女神</p><span>点击次数：242445次</span></div></body>
</html>
注意事项:
盒子外边框塌陷问题
和浮动塌陷问题类似,但是还有些不同
浮动塌陷的问题是因为父元素的宽高是由子元素的宽高撑起来的,而子元素脱离文档流,导致父元素因为没有内容而自动收缩宽高导致的,
盒子外边框塌陷问题是因为子元素的外边距没有作用在父元素,原因是父元素没有阻挡物体,从而导致子元素出去了,解决办法使用border: 1px solid black;设置边框或者使用overflow: hidden; 来给父级添加墙,这样子级设置外边距就会被墙所阻挡从而在父元素内移动
实例代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {width: 300px;height: 300px;background-color: burlywood;margin: 100px;/* overflow: hidden; */}.div2 {width: 200px;height: 200px;background-color: rgb(58, 214, 104);margin: 50px;/* overflow: hidden; */}.div3 {width: 100px;height: 100px;background-color: rgb(178, 223, 30);margin: 50px;}</style></head><body><div class="div1"><div class="div2"><div class="div3"></div></div></div></body></html>
父级元素内部有子元素，如果给子元素添加有margin-top或者margin-bottom值样式，那么父级元素也会跟着下来，造成外边距塌陷，如下：
而理想状况是子元素使用外边距是在父元素内向下移动而不是影响父元素,那么解决办法是给父元素.div1添加overflow: hidden;
可以看到子元素.div2的已经正常了,但是.div3还是塌陷,因为.div2没有设置overflow: hidden; 设置完后效果如下
![[GFCTF2021]文件查看器复现](https://img-blog.csdnimg.cn/img_convert/a5eff25acec63c1efad40edf531a5053.png)
