四十一、CSS相关属性

CSS属性相关

宽和高

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

 <style>
        div {
            height: 50px;
            width: 100px;
        }
        /*给行内标签设置长宽没有任何影响*/
        span {
                height: 50px;
                width: 100px;
            }
    </style>

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

 <style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight: lighter;
            /*color: red;*/
            /*color: #4e4e4e;*/
            /*color: rgb(128,128,128);*/
            /*color: rgba(0,0,0,1.0);  最后一个参数只能调节颜色的透明度 不能调节文本*/
        }
    </style>

字体大小

p {
  font-size: 14px;
}

如果设置成inherit表示继承父元素的字体大小值。

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐 
文字属性
     <style>
                                              对齐排列
        p {
            font-size: 16px;                  字体大小
            text-indent: 32px;                缩进多少
            /*text-align: center;*/           居中对齐
            /*text-align: left;*/             左对齐
            /*text-align: right;*/            右对齐
            /*text-align: justify;*/
                                               字体装饰

            /*text-decoration: underline;*/    下划线
            /*text-decoration: overline;*/     上划线
            /*text-decoration: line-through;*/ 删除线
        }
        a {
            text-decoration: none;             消除装饰（如下划线）
            color: orange;
        }
        a:hover {                               鼠标触碰
            color: blue;
        }
    </style>

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

首行缩进

将段落的第一行缩进 32像素：

　　p {
text-indent: 32px;
}

背景属性

背景属性
      style>
        div    {
            background-color: orange;       # 背景颜色
            height: 500px;                  # 高度500
            width: 500px;                   # 宽度500
            background-image: url("111.png");  /*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*/
            background-repeat: no-repeat;       # 不填充
            background-repeat: repeat-x;        # 水平填充
            background-repeat: repeat-y;        # 垂直填充
            background-position: center center; # 水平中心，垂直中心
            background-position: 10px 30px;  /*第一个参数调节的是左右  第二个参数调节的上下*/

            background: orange url("代码/111.png") no-repeat center center;  代码简写 不填充 水平中心对齐 垂直中心对齐
        }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            background-color: red;
        }

        .c2 {
            height: 400px;
            background-color: green;
        }

        .c3 {
            height: 500px;
            background: url("111.png");
            /*background-attachment: fixed;  <!--把图片固定在这不动，上下拖动时候始终在这显示-->*/
        }

        .c4 {
            height: 400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>

背景图片示例

边框属性 

border-widthborder-styleborder-color

边框样式

值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。 
 <style>    border边框
        div {
            /*border-color: red;*/       边框颜色红色
            /*border-style: solid;*/     边框是实线
            /*border-width: 1px;*/       边框厚度1像素

            /*border: 3px solid black;  简写同上*/  厚度 实线 黑色
            /*border: solid 3px blue;*/
            border: dashed green 3px;

        }
        p{
            border-left: 3px solid red;         边框的左边 厚度3像素 实线 红色
            border-bottom: 10px dotted green;   边框的下边 厚度10像素 虚线 绿色
            border-top: 1px dashed orchid ;     边框的顶部 厚度1像素 线 颜色
            border-right: 10px solid dimgray;    边框的右边 厚度10 实线 颜色
        }
    </style>

画圆

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

 <style>
        div{
            height: 400px;
            width: 400px;
            background: blue;
            border: 3px solid black;
            /*border-radius: 50%;    注意在画圆宽度和高度要一致 ，半径为50%*/
        }
    </style>

display属性

用于控制HTML元素的显示效果。

值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

盒子模型   margin：用来调节盒子与盒子之间的距离（标签与标签之间的距离）   border：盒子的包装厚度（即边框的厚度）   padding：内部物体与盒子之间距离（文本与边框之间的距离）   content：物体大小（文本内容）

margin外边距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推荐使用简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

顺序：上右下左

常见居中：

.mycenter {
  margin: 0 auto;
}

padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序：上右下左

补充padding的常用简写方式：

  • 提供一个，用于四边；
  • 提供两个，第一个用于上－下，第二个用于左－右；
  • 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
  • 提供四个参数值，将按上－右－下－左的顺序作用于四边；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin-left: 0;
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 0;
        }
        .c1 {
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin-bottom: 20px;
        }

        .c2 {
            width: 100px;
            height: 100px;
            border: 3px solid green;
            margin-top: 30px;
            /*margin-left: 10px;   距离body标签左边10像素*/
        }
        .c3{
            width: 20px;
            height: 20px;
            border: 2px solid green;
            /*margin: 10px 20px 30px 40px; !* 上右下左（顺时针）*!*/
            /*margin: 10px 20px; !*第一个参数是上下，第二个参数左右*!*/
            margin: 10px auto; /*水平居中*/
        }
        .c4 {
            width: 200px;
            height: 200px;
            border: 2px solid blue;
            /*padding-left: 20px;*/
            /*padding-top: 50px;*/
            /*padding-bottom: 40px;*/
            /*padding-right: 30px;*/
            /*padding: 10px 20px 30px 40px; !*上右下左*!*/
            padding: 10px 20px;  /*第一个参数是上下，第二个参数左右**/
        }
    </style>

</head>
<body>
<div class="c1">
    <div class="c3"></div>
</div>
<div class="c2"></div>
<div class="c4">div</div>
</body>
</html>

盒子模型

浮动    只要是页面布局都要用到浮动

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动带来的影响：    脱离文档流，造成父标签塌陷    浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。    由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
<style>
        body{
            margin: 0;
        }
        /*#d1{*/
        /*    border: 3px solid black;*/
        /*}*/
        .c1{
            width: 50px;
            height: 50px;
            background-color: blue;
            /*display:inline-block;*/
            float: left;
        }
             .c2{
            width: 50px;
            height: 50px;
            background-color: red;
                     float: left;
                 /*display:inline-block;*/
        }
    </style>

浮动的页面布局

   <style>
        body{
            margin: 0;
        }
        .c1{
            height: 1000px;
            width: 20%;
            float: left;
            background-color: red;
        }
        .c2{
            height:1000px;
            width: 80%;
            float: right;
            background-color:skyblue;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

参考示例

clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;

解决浮动带来的影响

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            border: 3px solid black;

        }
        .c2{
            width: 80px;
            height: 80px;
            background-color: red;
            float: left;
        }
        .c3{
            width: 80px;
            height: 80px;
            background-color:blue;
            float: left;
        }
        /*.c4{*/
        /*    !*height: 80px;*!*/
        /*    clear: left; !*规定标签左边不能有浮动的元素*!*/
        /*}*/
        .clearfix:after{
            content: "";
            clear: both;  /* 规定两边不能有浮动元素*/
            display: block;
        }
    </style>
</head>
<body>
<div class="c1 clearfix">
    <div class="c2"></div>
    <div class="c3"></div>
<!--    <div class="c4"></div>-->
</div>
</body>
</html>

overflow溢出属性

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
overflow（水平和垂直均设置）overflow-x（设置水平方向）overflow-y（设置垂直方向）
<style>
        div{
            height: 50px;
            width: 50px;
            border: 3px solid red;
            /*overflow: hidden;   !*隐藏*!*/
            overflow: auto;   /*自动*/

        }
    </style>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: dimgray;
        }
        .c1{
            width: 150px;
            height: 150px;
            border: 5px solid white;
            border-radius: 50%;
            /*background-image: url("111.png");  背景图片*/
            overflow: hidden;
        }
img{
    width: 100%;
}
    </style>
</head>
<body>
<div class="c1">
<img src="111.png">
</div>
</body>
</html>

圆形图像示例

定位（position）

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位，相对于标签本身原来的位置）

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;
            top:100px;
            left: 100px;
            position: relative;  /*relative相对定位*/
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

相对定位

absolute（绝对定位，相对于已经定位过的父标签（比如电商网站你鼠标放在一个功能，弹出他的选项））

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 50px;
            background-color: orange;
            position: relative;
        }
        .c2{
            height: 200px;
            width: 400px;
            background-color: red;
            position: absolute;
            top:50px;
            left: 100px;
        }
    </style>
</head>
<body>
<div class="c1">购物车
    <div class="c2">
        啥也没有-没钱
    </div>>
</div>
</body>
</html>

绝对定位

fixed（固定，相对于浏览器窗口固定在某一个位置（回到顶部））

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border: 3px solid black;
            width: 80px;
            height: 40px;
            position: fixed; /*fixed固定的*/
            right: 20px;
            bottom: 30px;

        }
        .c2{
            height: 4000px;
        }
    </style>
</head>
<body>
<div class="c2"></div>
<div class="c1">我访问访问</div>
</body>
</html>

固定定位

是否脱离文档流：    脱离文档流：        1.浮动        2.绝对定位        3.固定定位    非脱离文档流：        1.相对定位

z-index




#i2 {
  z-index: 999;
}





设置对象的层叠顺序。




    

  1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
    2. 

  2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
    3. 

  3. z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
    4. 

  4. 从父现象：父亲怂了，儿子再牛逼也没用
    5. 






<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2{
            background-color:rgba(128,128,128,0.4);
            position: fixed;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999;
        }
        .c3{
            width: 200px;
            height: 100px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -25px;
            margin-left: -100px;
        }

    </style>
</head>
<body>
<div class="c1">你好啊as发发发非</div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>


模态框示例


opacity


用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 200px;
            height: 50px;
            background-color: rgba(128,128,128,0.3); /* 只是修改背景颜色透明度*/
        }
        .c2{
            opacity: 0.3;  /*整个透明度都修改*/
            background-color: #4e4e4e;
        }
    </style>
</head>
<body>
<div class="c1">fwefwwefwfewfwf</div>
<div class="c2">wdwefrgtrgrtgrt</div>
</body>
</html>



综合示例


顶部导航菜单





<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>

顶部导航菜单示例







原文地址：https://www.cnblogs.com/wukai66/p/11480149.html
				


				
时间： 2024-08-05 10:00:07 

		


		


	

	
	

		


		
四十一、CSS相关属性的相关文章


								

		

			

                iOS开发——图形编程OC篇&amp;（四）CALayer相关属性
			

		

		

									

				CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property CGPoint position; 用来设置CALayer在父层中的位置 以父层的左上角为原点(0, 0) @property CGPoint anchorPoint; 称为“定位点”.“锚点” 决定着CALayer身上的哪个点会在position属性所指的位置 以自己的左上角为原点(0, 0) 它的x.y取值范围都			

		

	

				

		

			

                [ css 弹性盒子模型 box-flex 及相关属性 ] box-flex属性弹性盒子模型讲解及实例演示
			

		

		

									

				box-flex属性(和谐版) 有道桌面词典显示,”flex”一词中文有“收缩”之意.不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强.所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”.box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”. 举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房.后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子.ok,先暂停下			

		

	

				

		

			

                CSS的属性相关和模态框
			

		

		

									

				目录 1012 CSS的属性相关和模态框 1.宽和高 2.字体属性 2.1 文字字体:font-family 2.2 字体大小:font-size 2.3 字重(粗细):font-weight 2.4 字体颜色:color 3.文字属性 4.背景属性 5.边框:border 6.display属性 7.盒子模型 7.1 盒子模型之 margin 7.2 盒子模型之 padding 8.float 浮动属性 9.overflow 溢出属性 10.position 定位属性 10.1 relativ			

		

	

				

		

			

                【html】学习记录-CSS的column相关属性
			

		

		

									

				column相关属性: column-count:定义内容以多列形式显示 column-gap:定义每列之间的间距 示例: <section class="fourcolumn"> 人类或其他任何活着的个体,在生命之初不是放弃,不是自我唾弃,也不是对自己的存在进行诅咒.那些都是需要一个腐败和堕落的过程的,这一腐败的速度因人而异.有些人刚碰到压力便放弃了:有些人出卖和背叛了自己的意识:有些人不知不觉地慢慢熄火了,却从不知道自己何时已经失去了这种意识.然后,长者们蜂拥而上,百折			

		

	

				

		

			

                用CSS border相关属性画三角形
			

		

		

									

				效果 HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Triangle Demo</title> <link rel="stylesheet" href="triangle.css"> </head> <body&g			

		

	

				

		

			

                前端笔记十一，盒模型与布局相关属性
			

		

		

									

				布局相关属性  float:控制目标组件是否浮动以及如何浮动,设置浮动后,该组件被当做块组件处理,即相当于display属性为block:可选的属性值 left:指定对象向左浮动 right:指定对象向右浮动 clear:设置组件的左.右是否哪边不允许出现浮动对象.可选属性值: none:默认值,两边都允许出现浮动组件 left:不允许左边出现浮动组件 right:不允许右边出现浮动组件 both:两边都不允许出现浮动组件 clip:控制对元素进行裁剪 auto:不裁剪 rect(a,b,c,d			

		

	

				

		

			

                css中的背景、边框、补丁相关属性
			

		

		

									

				关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的一些内容: background-attachment:用于设定背景图片是滚动的还是固定的,可以设定为scroll和fixed两种: background-position:用于设定背景图片的位置,可以设定为实际值,也可设定为百分比: background-repeat用于设定背景图片是否平铺,可以是纵向的也可以是横向的: css3新			

		

	

				

		

			

                css中的大小、定位、轮廓相关属性
			

		

		

									

				1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height.min-height用于设置最大最小的高度,当高度大于最大高度时将会被自动转换成最大 高度,同理最小高度也是一样: max-width.min-width用于设置最大最小的宽度,和高度一样,只要超过了规定值,就会自动被转 换成规定值: 2.css3新增的box-sizing属性 该属性可以设置3个值,content-box.padd			

		

	

				

		

			

                css列表相关属性
			

		

		

									

				列表相关属性: 1.list-style-image:自定义项目符号,允许指定一个外部图标文件,以满足个性化设计需求: 2.list-style-position:定义项目符号的显示位置,改属性值包括outside和inside,其中outside表示把项目符号显示在列表项的文本行以外,列表符号默认显示为outside,inside表示吧项目符号显示在列表项文本行以内: 3.list-style-type:定义列表项目符号的类型. 4.list-style-type:none;隐藏列表结构的默认