一、网页可以看成是盒子模型构造而成,这个盒子模型构造结构如图所示:
- 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;
- 第一个10px是表示阴影的X轴。
- 第二个10px是表示阴影的Y轴。
- 50px是表示阴影的浓淡程度。
- red是表示阴影的颜色。
如图所示:
- 注意:不同的浏览器会给盒子内部的元素设置默认的margin和padding,从而导致有时候我们的内容与外部有一定的距离。,所以有时候需要自己修改margin和padding。我们可以把margin和padding设置成我们想要的宽高。,如下面的代码:
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
- 我们运用上面的代码将网页中所有的margin和padding设置成0px。
*
表示所有的,这里表示所有
的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,规定了图片开始绘制的的区域,也就是它只相当于规定图片的左上角从什么地方开始,其他的它就不负责了;