css属性及盒子模型

一、CSS盒⼦模型

1. 内容区/⽹⻚元素(content)2. 内边距（padding）3. 边框（border）4. 外边距（margin）5. 元素的宽度和⾼度

盒⼦模型 是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。

 

1. 内容区/⽹⻚元素(content)

内容区有 width 、 height 、 overflow 三个属性。其中 width 和 height 属性⽤来指定

盒⼦内容区域的宽度和⾼度

 overflow 属性设置溢出内容的处理⽅式

overflow属性 的四个可选值：

下⾯示例使⽤overflow属性的hidden值隐藏了内容超出部分：

在普通盒⼦模型中，如果内容过多，超出部分会在盒⼦外显示

属性值 描述

hidden 隐藏溢出的部分

visible 显示溢出的部分（溢出部分显示在盒⼦外部）

scroll 为内容区添加⼀个滚动条，可以通过滑动滚动条来查看内容区的全部内容

auto 由浏览器决定如何处理溢出部分

 

2. 内边距（padding）

内边距 是内容区和边框之间的空间，我们可以通过 padding-top 、 padding-right 、 pa

dding-bottom 、 padding-left 及它们的简写属性 padding 来设置内容区各个⽅向上与边框之

间的距离。在为盒⼦模型设置背景属性时，背景属性可以覆盖到内边距区域。

3. 边框（border）

边框 是环绕内容区和内边距的边界，我们可以使⽤ border-style 、 border-width 和 bo

rder-color 及它们的简写属性 border 来设置边框的样式。其中， border-style 属性是边框中

最主要的属性

 

4、外边距（margin）

外边距 位于盒⼦模型的最外围，是边框之外的空间。我们通常使⽤ margin-top 、 margin-b

ottom 、 margin-left 、 margin-right 及它们的简写属性 margin 来设置外边距，即控制盒

⼦和盒⼦之间的距离。

5.高度和宽度

当我们使⽤CSS中的 width 和 height 属性设置元素的宽度和⾼度时，实际上设置的只是元素内

容区域的宽度和⾼度，元素的实际宽度和⾼度还取决于其他因素：

 

 

CSS边框

1. border-style

2.border-width

3. border-color

4. border

CSS中的 边框 是围绕元素内容和内边距的⼀条或多条线段，我们可以⾃定义这些线段的 样式 、

宽度 和 颜⾊ 。如下所示：

border-style ：设置边框的样式，如实线、虚线等

border-width ：设置边框的宽度

border-color ：设置边框的颜⾊

border ：上⾯三个边框的缩写

Border

none：⽆边框

solid：实线边框

dashed：虚线边框

dotted：点状边框

double：双线边框

hidden：与none相同，应⽤于解决边框冲突

thin：较细的边框

medium：中等宽度的边框

thick：较粗的边框

length：数值加单位的形式设置具体边框宽

度，例如2px

 

CSS背景（background）

1. background-color

2. background-image

3. background-repeat

4. background-size

5. background

1.background-color 设置元素的背景颜⾊

颜⾊名 background-color：red

background-color：pink

⼗六进制码 background-color：#FF0000

background-color：#C0C0C0

rgb()函数 background-color：rgb(168,255,255)

background-color：rgb(255,217,168)

透明⾊ background-color:rgba(10,20,100,0.3)

2.background-image 设置元素的背景图像

url（'URL'） 指向图像的路径，可以将url()看作⼀个函数，括号中的URL为图像的具体路径

none 默认值，不显示背景图像

3.background-repeat 控制背景图像是否重复

repeat 默认值，背景图像将在垂直⽅向和⽔平⽅向上重复

repeat-x 背景图像仅在⽔平⽅向上重复

repeat-y 背景图像仅在垂直⽅向上重复

no-repeat 背景图像仅显示⼀次，不在任何⽅向上重复

inherit 从⽗元素继承 

background-repeat 属性的设置

4.background-size

使⽤ 像素(px) 或其他CSS单位来设置背景图像的 宽度 和 ⾼度 ， xpos 表示宽度， ypos 表示⾼度，如果只设置第⼀个值，那么第⼆个值将被设置为默认值 auto (⾃动)x% y% background-size: 80%90%

使⽤百分⽐表示背景图像相对于所在元素宽度与⾼度的百分⽐， x% 表示宽度， y% 表示⾼度，如果只设置第⼀个值，那么第⼆个值将被设置为默认值auto （⾃动）

cover background-size: cover 背景图⽚扩展并覆盖填充满整个所属元素区域，但超出的部分会被隐藏

contain background-size: contain 背景图⽚尺⼨宽度和⾼度完全适应内容区域。

图⽚不会变形，但所属元素宽⾼⽐例与背景图⽚宽⾼⽐

例不同时，会出现背景留⽩

5.background 背景属性的缩写，可以在⼀个声明中设置所有的背景属性

CSS定位（position）

1. 静态定位：static

2. 相对定位：relative

3. 绝对定位：absolute

4.固定定位：fixed

CSS浮动

标准⽂档流

块级元素

内联元素

display属性

float浮动

清除浮动