web前端学习

概述

盒子模型就是把HTML页面中的元素（特别是块状元素）看作是一个矩形的盒子，也就是一个盛装内容的容器。在浏览网页时，可以看到大部分网页的内容都是按照区域划分的，即由若干个盒子按照一定的秩序排列组成。

在网页中，一个区域由几个部分构成，包括元素内容content，元素内边距padding，元素边框border，元素外边距margin四个部分。

内    容 (content)：盒子里装的东西
内边距 (padding)：内部填充的泡沫
边    框 (border)）：盒子本身
外边距 (margin)：盒子摆放时与其他盒子之间预留的空隙
4个部分一起构成了CSS中元素的盒子模型。
				

1.盒子的宽和高

盒子的宽度和高度分别用width和height属性表示。 width和height属性的值可以使用绝对单位（如px）或使用相对单位（如%）父元素的百分比。

	
#test_box1{
	width: 100px;
	height: 50px;
	background-color: #aaaaff;
}

2.盒子的边框border

在CSS中，常用的边框样式属性有如下几种： 1.边框宽度（border-width）：自定义边框宽度（常以像素为单位）、thin（细边框）、medium（中等边框）、thick（粗边框）、inherit（继承父元素） 2.边框样式（border-style）：none、solid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove（凹型线）、ridge（凸型线）、inset（嵌入式）、outset（嵌出式）、inherit（继承父元素） 3.边框颜色（border-color）：颜色名称、#颜色十六进制值、颜色rgb代码、inherit（继承父元素）等 4.边框样式综合设置（border）：即上述设置的简写，可同时按序设置border-width border-style border-color 四个边框可以单独设置粗细，样式和颜色，在英文横线中插入left/right/top/bottom，例如border-top-style。

	
#test_box2{
	display: block;
	width: 100px;
	height: 50px;				
	border-width: 10px;
	border-style: groove;
	border-color: #00aaff;
}

3.盒子的外边距margin

网页是由多个盒子排列组成的，为了合理地布局网页，盒子与盒子之间需要设置一定的间距，这个间距称为外边距，用margin属性表示。各边可以单独定义，例如用：（1）上侧外边距：margin-top （2）右侧外边距：margin-right （3）下侧外边距：margin-bottom （4）左侧外边距：margin-left

设定方式	解析
四个参数	上、右、下、左四个方向的外边距，即顺时针原理
三个参数	上、左右、下方向的外边距
两个参数	上下、左右方向的外边距
一个参数	上下左右外边距同为一个值
单方向定义	单独定义一个方向的外边距
特殊用法	左右外边距设置为auto时，可实现相对于父元素盒子水平居中
外边距合并	两个垂直外边距相遇时，将取二者之间较大的值形成一个外边距

	
#test_box3{
	display: block;
	width: 100px;
	height: 50px;				
	border:2px solid red;
	margin: 20px;
}

4.盒子的内边距padding

内边距是指元素内容与边框之间的距离，用padding属性表示。各边可以单独定义，例如用：（1）上侧内边距：padding-top （2）右侧内边距：padding-right （3）下侧内边距：padding-bottom （4）左侧内边距：padding-left

设定方式	解析
四个参数	上、右、下、左四个方向的内边距，即顺时针原理
三个参数	上、左右、下方向的内边距
两个参数	上下、左右方向的内边距
一个参数	上下左右内边距同为一个值
单方向定义	单独定义一个方向的内边距

	
#test_box4{
	display: block;
	width: 100px;
	height: 50px;				
	border:2px solid red;
	padding: 10px;
	background-color: #00aaff;
	background-clip: content-box;
}

5.盒子尺寸box-sizing

box-sizing属性可设定为以下两个值：（1）content-box（默认值）：盒子的宽度（width）和高度（height）不包括内边距（padding）和边框（border）。（2）border-box：盒子的宽度（width）和高度（height）包括内边距（padding）和边框（border）。

	
#test_box12{
	width: 120px;
	height: 60px;
	box-sizing: content-box;
	padding: 10px;
	border:5px solid green;
	/* 为显示内部content区域 */
	background-color: #00aaff;
	background-clip: content-box;
}
#test_box13{
	width: 120px;
	height: 60px;
	box-sizing: border-box;
	padding: 10px;
	border:5px solid green;
}

6.盒子的阴影box-shadow

设置盒子边框阴影box-shadow:水平偏移、垂直偏移、深度偏移、阴影颜色依次书写，各属性值之间用空格隔开。

	
#test_box14{
	width: 120px;
	height: 60px;
	border:5px solid green;
	box-shadow: 10px 20px 10px #7f7f7f;
}

7.圆角属性border-radius

圆角半径大小具体值（通常以px为单位）或百分比；可以是一个参数、两个参数、三个参数、四个参数。

设定方式	解析
四个值	左上角，右上角，右下角，左下角
三个值	左上角，右上角和左下角，右下角
两个值	左上角与右下角，右上角与左下角
一个值	四个圆角值相同

	
#test_box15{
	width: 120px;
	height: 60px;
	border:5px solid green;
	border-radius: 10px 15px 20px 25px;
}

8.盒子倒影-webkit-box-reflect

css 倒影 -webkit-box-reflect的基本语法： -webkit-box-reflect: [ above | below | right | left ]? ? ? 方位：可以是above、below、left和right这4个值中的任意一个，分别表示在上、下、左、右进行倒影。偏移大小：表示倒影和原始元素的偏移距离，可以是数值，也可以是百分比值（相对于元素自身尺寸计算，百分比值对应的尺寸计算方位是根据倒影方向自动识别的。例如倒影方向是below或above，则偏移百分比值是根据原始元素的高度计算的；如果倒影方向是left或right，则偏移百分比值是根据元素的宽度来计算的。）遮罩图像：可以实现对元素倒影的遮罩控制，支持url()函数图像、任意的CSS渐变等，没有跨域限制，最多只能设置一张图像。 1）使用遮罩图像的时候，倒影的偏移值是不能缺省的。如果没有偏移，请使用0占位， 2）遮罩图像自身也会因倒影而翻转。

	
#test_box18{
	display: inline-block;
	width: 120px;
	height: 80px;
	border:5px solid #00aaff;
	background-color: #aa00ff;
	-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0, 0, 0, 0.3));
}
#img_cat{
	width: auto;
	height: 80px;
	-webkit-box-reflect: below 5px linear-gradient(transparent,rgba(0, 0, 0, 0.3));;
}