CSS中盒子样式的几种设置

css背景颜色设置:可以将盒子背景设置一定的颜色。如:
<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
</style>

背景图片设置:需要使用 background-image 属性来设置,而图片的路径需要写在 “url()”的括号内,如果背景图片并没有所设容器大,将会把背景图平铺后再显示,如需设置其平铺效果,则有以下四种:
1.no-repeat:不平铺
2.repeat-x:x轴方向平铺
3.repeat-y:y轴方向平铺
4.repeat:为默认方式,铺满容器
使用 background-position 属性来指定背景图所在位置:
1.left top:左上角(默认值)
2.right top:右上角
3.left bottom:左下角
4.right bottom:右下角
5.left center:左中间
6.right center:右中间
7.center center:正中心
边框属性设置:指定边框可以使用 border-left/top/right/bottom-color来设置颜色
                                                       border-left/top/right/bottom-style来设置样式
                                                       border-left/top/right/bottom-width来设置宽度
它的语法格式为:
border:线的宽度 线的样式 线的颜色

盒子模型:

盒子的内边距设置:容器中的内容和容器的边线之间的距离就是内边距,内边距的制定时使用 padding 属性来设置的。
1.左边使用 padding-left
2.上边使用 padding-top
3.右边使用 padding-right
4.下边使用 padding-bottom
根据设置值的不同,所表示的边也不同,如:
a.如果设置四个值,则表示:上,左,下,右
b.如果设置三个值,则表示:上,左右,下
c.如果设置二个值,则表示:上下,左右
d.如果设置一个值,则表示:上右下左的值都是一样的

盒子的外边距设置:容器与另一个容器之间的距离就叫外边距,外边距使用 margin 属性来指定。它的使用和语法格式与 padding 相同。
1.margin-left
2.margin-top
3.margin-right
4.margin-bottom
根据设置值的不同,所表示的边也不同,如:
a.如果设置四个值,则表示:上,左,下,右
b.如果设置三个值,则表示:上,左右,下
c.如果设置二个值,则表示:上下,左右
d.如果设置一个值,则表示:上右下左的值都是一样的

浮动:默认情况下,li中的内容是竖着显示的,如果想要横着显示,那么需要浮动
浮动是使用 float 属性来定义,它有两个值:
1.left:左浮动
2.right:右浮动

阴影:定义阴影效果的使用 box-shadow 属性,它的语法格式为:
box-shadow: h-shadow v-shadow blur spread color position;
1.h-shadow:必需,水平阴影的位置。允许负值。
2.v-shadow:必需,垂直阴影的位置。允许负值。
3.blur:可选,模糊距离。
4.spread:可选,阴影的尺寸。
5.color:可选,阴影的颜色。
6.position:可选,将外部阴影(outset)改为内部阴影。默认为inset
如:
 <style>
        .box {
            width: 100px;
            height: 100px;
            background: deeppink;
            box-shadow: 50px 50px 2px gray;
        }
    </style>

圆角:定义圆角使用 border-radius 属性来定义,它的语法为:
border-radius:length/persentage;
如:
  <style>
        .box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
          }
    </style>

上一篇:《解决HTML中footer保持在页面底部问题》


下一篇:15-01-10 C# 面向对象 09