css样式：背景、模式转换和盒子模型

目录

背景backgrounds：

显示模式转换

盒子模型

边框Border

Content(内容)

Padding(内边距)

Margin(外边距)

---

背景backgrounds：

1.背景颜色(background-color)：

值的表示：四种：1.rgba三原色+透明度 rgb(255,0,0,1) a表示透明度，范围是0-1,1表示不透明，0表示完全透明

2.rgb三原色 rgb（255,0，0）

3. 英文字母 red

4. 16进制 #fff 推荐使用

2.背景图片（background-image）：url:后面跟图片地址

3.背景平铺 background-repeat：

4.背景位置：

background-position：center

5.背景大小

background-size：

总结：如果我们要设置图片的样式的话，就要写上面的background-xxx写很多次，现在只需要写background一个单词就行了，background后面跟颜色 图片的url 平铺 位置如下：

集合简写：background：color image repeat position

也就是1-4都可以写在background后面，background-size要单独设置哦

显示模式转换

1.元素类型分三种

行（块）元素：单独成行，一行不能有多个，可以设置宽高，

行内元素：一行可以有多个，不能设置宽高

行内块元素：一行可以有多个，可以设置宽高

2.转化模式

其他类型元素转化成行内元素：display:inline

其他类型元素转化成行（块）元素：display:block

其他类型元素转化成行内块元素：display:inline-block

盒子模型

概念：

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

模型图：

 

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框)- 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

边框Border

边框样式：

border-style :

属性	值	含义
border-style	none	默认无边框
	dashed	虚线边框
	solid	实线边框
	double	定义两个边框。 两个边框的宽度和 border-width 的值相同

边框颜色：border-color属性用于设置边框的颜色。（注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。）

边框圆角属性：border-radius:给边框设置圆角

Content(内容)

1. 块元素的默认的width ：100%

2. 行内元素的默认的width是内容的长度

3. 盒子中自定义的width指的是内容的宽度

Padding(内边距)

内容到边框的间距

padding:10px 20px 30px 40px 从上面顺时针是各个方向的值

Margin(外边距)

盒子与盒子之间的间距

maring:10px 20px 30px 40px 方向的值同内边距一样