CSS常用属性和盒子模型

css常用属性

css里面有很多可以修饰html的属性,这里介绍一些常用的。

文字属性

font-size:大小
font-family:字体类型

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字属性</title>

<style type="text/css">
    span{font-size:100px;font-family:黑体;  }
</style>

</head>
<body>
    <span>hello css!!!</span>
</body>
</html>

文本属性

color:颜色
text-decoration:下划线
属性值:none underline
text-align:对齐方式
属性值:left center right

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本属性</title>

<style type="text/css">
    div{color:red;text-decoration: underline;text-align: right }
    a{text-decoration: none;}
</style>

</head>
<body>
    <div>学习css!!!</div>
    <a href="#">点我啊!!!</a>
</body>
</html>

背景属性

background-color:背景颜色
background-image:背景图片
属性值:url(“图片地址”);
background-repeat:平铺方式
属性值:默认横向纵向平铺
repeat:横向纵向平铺
no-repeat:不平铺
repeat-y:纵向
repeat-x:横向

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
    body{
        background-color: pink;
        background-image: url("images/girl.gif");
        background-repeat: repeat-y;
    }
</style>

</head>
<body>

</body>
</html>

列表属性

list-style-type:列表项前的小标志
属性值:非常多,可以通过开发工具的提示查看
list-style-image:列表项前的小图片
属性值:url(“图片地址”);

    <ul>
        <li>小猴子1024</li>
        <li>小猴子1024</li>
        <li>小猴子1024</li>
        <li>小猴子1024</li>
    </ul>
    <style type="text/css">
        ul{list-style-type: decimal-leading-zero;}
        ul{list-style-image: url("images/tubiao.png");}
    </style>

尺寸属性

width:宽度
height:高度

    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <style type="text/css">
        #d1{width: 200px;height: 200px;}
        #d2{width: 400px;height: 400px;}
    </style>

盒子模型

html中有些标签是可以无限嵌套的,比如div,可以将这些标签看做是一个盒子,盒子中装有一个东西。
盒子是可以有厚度的,这个厚度在css中使用border表示。
盒子的内壁和里面装的东西之间是有距离的,这个距离在css中使用padding表示。
盒子外壁和外部的东西也是有距离的,这个距离在css中使用margin表示。

可以使用盒子模型进行排版布局

css盒子模型

border:

border-width:边框的宽度
border-color:边框的颜色
border-style:边框的线型
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框

padding:

代表边框内壁与内部元素之间的距离
padding:10px;代表上下左右都是10px
padding:1px 2px 3px 4px;上右下左
padding:1px 2px;上下/左右
padding:1px 2px 3px;上  左右  下
padding-top:单独设置

margin:

代表边框外壁与其他元素之间的距离
margin:10px;代表上下左右都是10px
margin:1px 2px 3px 4px;上右下左
margin:1px 2px;上下/左右
margin:1px 2px 3px;上   左右    下
margin-top:单独设置

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>

<style type="text/css">
    #thing{width:100px;height: 100px;background-color: pink}
    #box{width:100px;height:100px;border-width:10px;border-color:red;border-style:solid;  padding:10px 50px 80px;margin:50px;}
</style>

</head>
<body>
    <div id="box">
        <div id="thing">小猴子</div>
    </div>
</body>
</html>