前端笔记—从入门到坟墓[CSS][CSS盒子模型][7]

border

border边框属性，以空格为分割可传入属性分别是：边框宽度，边框样式，边框颜色。

border:5px solid red;

border-style边框样式，属性：none无样式，solid实线，dashed虚线，dotted点线。

border-style:solid;

注：在table表格里，有一个特殊样式：border-collapse：collapse可以设置相邻的单元格合并，共享一条边。

border-radius设置边框角的弧度。可写入值，如50%呈圆形。

border-radius: 50%;

注：利用border-radius样式画一个椭圆。

.div2 {
	width: 200px;
	height: 100px;
	background: red;
	border-radius: 50% / 50%;
}

<div class="div2"></div>

在这里插入图片描述

padding

padding（英译：填充）简写属性在一个声明中设置所有内边距属性。

padding:10px 5px 15px 20px;/*分别为上，右，下，左的内边距*/
padding:10px 15px 20px;/*分别为上，左右，下的内边距*/

在调节width与height时不会改变padding的值。而是直接控制content（蓝色区域）的范围。

margin

margin（英译：余量），简写属性在一个声明中设置所有外边距属性。

margin:2cm 4cm 3cm 4cm;

注：当margin的值为百分比时，其参考对象是其父级元素。

可以利用auto属性值，实现盒子靠右或者居中的布局。

.div4{
	width: 100px;
	height: 100px;
	margin-left: auto;
	background-color: #ccc;
	display: block;
}

执行结果：

在这里插入图片描述

.div4-5{
	width: 100px;
	height: 100px;
	background-color: #ccc;
	display: block;
	margin:auto;
}

执行结果：
在这里插入图片描述

css盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述

> 内外边距合并问题

一，两个并列的盒子模型，外边距合并，如图：
在这里插入图片描述

两个盒子间的距离是不是margin之和，而是两个盒子中最大的margin值。

解决方案：
1，使用float对两个元素进行浮动。

.div5-1{
	float: left;
	width: 100px;
	height: 100px;
	background-color: red;
	margin:100px;
}
.div5-2{
	float: left;
	width: 100px;
	height: 100px;
	background-color: red;
	margin:100px;
}

执行结果：
在这里插入图片描述
2，对后一个元素使用绝对定位position:absolute。

.div5-1{
	width: 50px;
	height: 50px;
	background-color: red;
	margin:50px;
}
.div5-2{
    position: absolute;
	width: 50px;
	height: 50px;
	background-color: red;
	margin:50px;
}

这时.div5-2元素已经脱离文档流，离开了父级元素。

在这里插入图片描述
3，改变两个元素显示模式，添加display: inline-block样式。

.div5-1{
	width: 50px;
	height: 50px;
	background-color: red;
	display: inline-block;
	margin:50px;
}
.div5-2{
	width: 50px;
	height: 50px;
	background-color: red;
	display: inline-block;
	margin:50px;
}

执行结果：
在这里插入图片描述
二，父级与子级盒子外边距合并问题，如图：

注：这种合并情况，只在垂直方向上产生。

解决方案：
1，利用border属性，为父级元素添加border样式。

.div6{
	background-color: #ccc;
	border: 1px solid #ccc;
}
.div6-1{
	width: 50px;
	height: 50px;
	background-color: red;
	margin:50px;
}

2，为父级元素添加padding样式。

.div6{
	background-color: #ccc;
	padding:1px;
}
.div6-1{
	width: 50px;
	height: 50px;
	background-color: red;
	margin:50px;
}

3，为父级添加overflow:hidden样式。

.div6{
	background-color: #ccc;
	overflow:hidden;
}
.div6-1{
	width: 50px;
	height: 50px;
	background-color: red;
	margin:50px;
}

执行结果：
在这里插入图片描述

盒子阴影（css3）

box-shadow为盒子设置阴影（IE9+），可传入六个参数，以空格为分割分别为：水平阴影距离，垂直阴影距离，模糊程度，尺寸，颜色，内/外阴影。

box-shadow: 0px 9px 15px 30px rgba(0,0,0,0.1) inset;

inset设置盒子阴影为内阴影模式。

例：当鼠标移动到盒子上时，显示出淡淡的阴影。

.div7{
width: 100px;
height: 200px;
background-color: red;
margin:auto;
}
.div7:hover{
box-shadow: 0px 15px 30px rgba(0,0,0,0.1); 
}

执行结果：
在这里插入图片描述