前端笔记四（盒子模型）

一、网页可以看成是盒子模型构造而成，这个盒子模型构造结构如图所示：

• Content：内容区。
• padding：内容与盒子里面的边距。
• border：边框。
• margin：整个盒子的外壳，盒子与外部的边距，若是两个盒子，则是盒子与盒子之间的边距。
• 若 padding：1px 2px 3px 4px ;则依次是top，right，bottom，left四个方向，以顺时针方式排序。
• 块状元素可以设置宽高，如div，内联元素不可以，如span。
• 类修饰元素：p.ex{
width:50px;
height:50px;
  dsa}
  ...............................
<p class="ex">。。。。。。。。。。。。。。。</p>
  如图：
  

二、画圆 border-radius

div{
			border: solid red 1px;
				width: 150px;
			height: 150px;
			border-radius：100px；
			}

或者`

div{
			border: solid red 1px;
			
			width: 150px;
		height: 150px;

		/*画圆*/
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
	}`

效果如图：

三、box-shadow(盒子阴影)

box-shadow: 10px 10px 50px red;

1. 第一个10px是表示阴影的X轴。
2. 第二个10px是表示阴影的Y轴。
3. 50px是表示阴影的浓淡程度。
4. red是表示阴影的颜色。

如图所示：

• 注意：不同的浏览器会给盒子内部的元素设置默认的margin和padding，从而导致有时候我们的内容与外部有一定的距离。，所以有时候需要自己修改margin和padding。我们可以把margin和padding设置成我们想要的宽高。，如下面的代码：

<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
		
	</style>
</head>

1. 我们运用上面的代码将网页中所有的margin和padding设置成0px。
2. * 表示所有的，这里表示所有的margin和padding。

四、背景色填充

• 我们在做div盒子，在给盒子填充颜色时，默认是将除margin外都填充颜色，这样有时候是我们所不需要的，如下图：
• 我们可以修改样式，使颜色填充到我们想要填充的地方，如图我们只想要颜色填充到内容部分，我们可以在div标签选择器里面增加代码 background-clip: content-box;如图所示：填充的绿色只填充到了盒子的内容部分
• 如果我们还想使颜色填充到padding部分，则可以增加代码 background-clip: padding-box; 如图所示：
  
• 还可以继续对border进行填充颜色，增加代码 `background-clip: border-box;

`五、背景图片定位 background-origin

• background-origin:规定背景图片的定位区域，它的属性也有border-box、padding-box、content-box 这3种属性，但要注意他的描述是“背景图片”，也就是说它只能对背景做样式上的操作，它相当于positon,规定了图片开始绘制的的区域，也就是它只相当于规定图片的左上角从什么地方开始，其他的它就不负责了；

六、输入框（input）、表格（table）等边框变圆角样式：border-radius: 5px;overflow:hidden;