本文共 1270 字，大约阅读时间需要 4 分钟。

一、CSS 简介 ：

CSS 是 Cascading Style Sheets 的缩写，即：层叠样式表单 v CSS 是 HTML 语言的一种扩展，其主要作用为：

1 定义 Web 页面布局以及页面中元素的显示方式 ；

2利用 CSS 样式实现 HTML 内容(结构)与表现(格式)的分离。

简单来说：CSS 相当于 HTML 的“装饰器”或“化装品”。

二、CSS背景属性：

CSS 背景属性用于设置HTML元素的背景内容（颜色或图片）

CSS 背景属性主要包括：

background-color 设置背景颜色

 background-image 设置背景图片

 background-repeat 设置背景图片重复方式

 background-attachment 设置背景是否随页面滚动

background-position 设置背景图片位置

三、CSS定位：

CSS 中 position 规定了元素的定位方式 ，CSS 可以通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使 元素可以显示在任意位置 v。

position 属性的可选值包括:

relative 相对定位

absolute 绝对定位

 fixed 固定定位

 static 默认

四、CSS浮动：

CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它 的父容器的左侧或右侧 ；float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。

 float 属性的常用值包括:

left 靠左浮动

 right 靠右浮动

 none 不浮

五、CSS盒子模型：

在HTML页面中，每一个元素都是一个规则的矩形，因此每一个元素都由一个盒 子模型来表示，盒子模型由4个区域组成：

content box（内容区域）

 padding box（内边距区域）

 border box（边框区域） 

margin box（外边距区域）

1.边框

设置元素边框的：宽度、样式、颜色

border: { 10px solid black}

border-边框标识：border-top:… border-right:… border-bottom:… border-left:…；

10px：边框宽度；

solid-边框样式：solid(实线) dashed(虚线) dotted(点线) …；

black-边框颜色 ：red blue #F6F6F........。

2.内边距

是定义元素边框与元素内容之间的空间；

都是按照顺时针(上、右、下、左）的顺序定义的

padding: 100px 200px 300px 400px。

定义三个值时顺序是上、左右、下。

padding:100px 200px 300px。

定义两个值时顺序是上下、左右。

padding:100px 200px。

定义一个值时上下左右都依据这个值定义距离。

padding:100px。

3、外边距：定义元素边框与四周的空间；定义顺序和属性与内边距一致。

转载地址：https://blog.csdn.net/YYYYH520/article/details/117530290 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！