CSS常用的属性¶

背景属性¶

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            /*背景图片*/
            background-image: url("../../img/a.gif");
            /*设置平铺*/
            background-repeat: repeat;
        }

        div{
            width: 200px;
            height: 200px;
            /*背景颜色
            background-color: red;
            */
        }

    </style>
</head>
<body>
    <div></div>
</body>
</html>

文本样式¶

字体属性¶

盒子模型¶

任何一个网页元素包含由这些属性组成：内容(content)、内边距(padding)、边框(border)、边界(margin)，这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。整个网页由各种小盒子组成。

盒子属性¶

外边距¶

标签和标签之间的距离就是外边距

一,设置外边距
1.连写
margin: 上 右 下 左;

2.非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

3. 注意地方:
3.1 连写注意的地方
    - margin:10px; 上下左右都是10px
    - margin:10px,20px; 上下是10px,左右20px
    - margin:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置外边距特点
    外边距的那一部分是没有背景颜色的

内边距¶

就是标签里面的内容距离边框距离

一,设置内边距
1.连写
padding: 上 右 下 左;

2.非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

3. 注意地方:
3.1 连写注意的地方
    - padding:10px; 上下左右都是10px
    - padding:10px,20px; 上下是10px,左右20px
    - padding:10px,20px,30px;上是10px,右是20px,下30px,左是20px
3.2 设置内边距特点
    给标签设置内边距之后, 标签占有的宽度和高度会发生变化
    给标签设置内边距之后, 内边距也会有背景颜色

边框属性¶

浮动属性¶

概述¶

在正常到文档流中,元素是从上往下渲染出来的, 当我们给某个元素设置浮动属性之后, 那么这个元素就会脱离正常的文档流. 感觉就像有一个新的图层在页面上,有点像PS里面图层. 浮动属性主要是和div一起做页面布局的

设置浮动¶

语法

1 2	`float: 取值 left(左浮动) right(右浮动)`

特点:在浮动流中是不区分块级元素/行内元素/行内块级元素的, 都可以设置宽度和高度
浮动规则

1
2
3

1.相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
2.不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
3.浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

清除浮动¶

语法

clear: 取值  none: 默认取值,不清除
            left: 不要找前面的左浮动元素
            right: 不要找前面的右浮动元素
            both: 不要找前面的左浮动元素和右浮动元素

清除浮动的方式

1 2	`方式一: 在当前的元素里面添加clear属性清除方式二: 添加一个新的盒子添加clear属性清除`