1.边框属性

所有的 HTML 标签都有边框，默认边框不可见

1.1border

设置边框的样式

格式：宽度 样式 颜色

例如：border:1px solid red ，1 像素粗的 实线 红色边框。

线条样式：solid 实线，none 无边，double 双线

示例：

效果：

1.2 width

用于设置标签的宽度

示例：

效果：

1.3 height

用于设置标签的高度

示例：

效果：

1.4 background-color

用于设置标签的背景颜色

背景颜色设置的两种主流方式：

①英文单词

例如：red,blue,yellow

②颜色代码

格式：#红绿蓝， 每一个颜色用两个 16 进制位数表示

例如：#ff1100 红色 ff，绿色 11，蓝色 00，红色颜色最重，绿色其次，没有蓝色

示例：

效果：

1.5 background-image

用于设置元素背景图片。

格式： background-image: url("图片路径");

例如：某个小狗爪子图片

作为背景图片引入一个长宽 25 的 DIV 标签中

因为图片太小，所以为了铺满背景，CSS 采取了重复显示多个的策略。

若需要对背景图片是否重复显示进行调整，有以下几个常见设置

2.布局

2.1 float

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版， 就需要使用浮动属性

格式：

选择器{float:属性值;}

常用属性值：

none：元素不浮动（默认值）

left：元素向左浮动

right：元素向右浮动

注意：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的

样式，所以设置浮动以后，页面样式需要重新调整

准备代码：

<style> 
    #d1{
        background-color: red; 
        width: 100px; 
        height: 100px; 
    } 
    #d2{
        background-color: green; 
        width: 110px; height: 110px; 
    }
    #d3{
        background-color: blue; 
        width: 120px; 
        height: 120px; 
    } 
</style> 
<div id="d1"></div> 
<div id="d2"></div> 
<div id="d3"></div>

示例 1 ：

效果 1：

示例 2：

效果 2： 

2.2 clear

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。

如果要避免影响，需要使用 clear 属性进行清除浮动。

格式：选择器{

clear:属性值;

}

常用属性值：

left：不允许该元素左侧有浮动元素（清除左侧浮动的影响）

right：不允许该元素右侧有浮动元素（清除右侧浮动的影响）

both：同时清除左右两侧浮动的影响（一般用 both）

3.字体

3.1 font-size

用于设置字体的大小。

3.2 color

用于设置字体的颜色。

示例：

效果：