本文详细介绍了CSS盒子模型，包括div标签、盒子模型的属性如宽度、高度、边框、内边距、外边距以及CSS3新增属性。同时讲解了HTML中元素类型转换，如行内标签与块级标签的转换，并探讨了页面布局中的关键属性，如浮动、定位、溢出和层叠。
目录
一、div标签
块级标签(容器)，在没有设置高度、宽度属性时，和p标签相似(会自动换行)。
作为容器可以包含其他标签 ，p、span虽然是块级标签,但是不能作为容器使用。
二、盒子模型的属性
用盒子作为页面的布局时会用到的属性
1.宽度：width
2.高度：height
3.边框属性
border-style：上边 [右边 下边 左边]; 边框线的样式
border-width: 边框宽度,单位是像；
border-color: 边框线的颜色; (颜色名/rgb(r,g,b)/rgba(r,g,b,a)/#rrggbb #rgb)
综合设置：
border: 线型 线宽 颜色; border-radius：像素值或百分比; -->表示的是圆角边框
4.内边距(内填充)属性
padding-top : 上填充
padding-right : 右填充
padding-bottom : 下填充
padding-left : 左填充
5.外边距(边界)
margin-top: 上边界
margin-right: 右边界
margin-bottom: 下边界
margin-left: 左边界
6.background背景设置
background-color：背景颜色
background-image：背景图像
background-repeat：背景的平铺属性
background-position：背景图像的位置(图像左上角的坐标)。取值可以是数值、预设值、百分比
综合设置背景图像：
background:背景色 url("图像") 平铺 定位 固定
7.盒子的宽度和高度的计算
(1)实际宽度
= width + 左右内边距(padding)之和 + 左右边框线(border)之和 + 左右外边距(margin)之和
(2)实际高度
= height + 上下内边距(padding)之和 + 上下边框线(border)之和 + 上下外边距(margin)之和
8.CSS3增加的新属性
(1)rgba(r,g,b,alpha)
rgba(r,g,b,alpha)：设置颜色及透明度的函数,参数r、g、b表示三个颜色分量，每个颜色的取值在0~255之间 参数alpha表示透明度,它的取值在0.0~1.0之间
(2)opacity
opacity：设置背景和图片的透明度。取值在0~1之间
(3)border-radius
border-radius：圆角边框
(4)box-shadow
box-shadow：阴影效果
box-shadow: 5px 5px 10px 2px #999 inset;| <length>① | 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 |
| <length>② | 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 |
| <length>③ | 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 |
| <length>④ | 如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值 |
| <color> | 设置对象的阴影的颜色 |
| inset | 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影 |
(5)渐变效果(background-image)
a、线性渐变：linear-gradient()
background:linear-gradient(方向,颜色1,颜色2 [stop],颜色3...);渐变方向：
| to left | 从右向左 |
| to right | 从左向右 |
| to top | 从下到上 |
| to bottom | 从上到下 |
渐变方向(通过角度表示)：角度单位为deg
| 0deg | to top | 从下到上 |
| 90deg | to right | 从左向右 |
| 180deg | to bottom | 从上到下(默认值) |
| 270deg | to left | 从右向左 |
例如：
background: linear-gradient(to right,blue,green 20%,yellow 50%,purple 80%,red);
/*
渐变方向：从左到右
起始颜色：blue
green 20%：当过渡到20%时，颜色是绿色
yellow 50%：当过渡到50%时，颜色是黄色
purple 80%：当过渡到80%时，颜色是紫色
*/
b、径向渐变：radial-gradient()
background:radial-gradient(圆心位置,渐变形状,渐变的大小,渐变的颜色及颜色位置)c、重复的线性渐变：repeating-linear-gradient()
background: repeating-linear-gradient(45deg,#f00 0,#f00 10%,#ff0 10%, #ff0 20%);
/*
渐变方向：默认值(180deg,即从上到下)
#f00 0,#f00 10%：表示0~10%为#f00
#ff0 10%, #ff0 20%：表示10%~20%为#ff0
*/d、重复的径向渐变：repeating-radial-gradient()
(6)图像属性：
a、background-size：图像的大小.取值(普通数值、百分比、预定义的关键字--auto、cover、contain)
b、background-origin：背景图像在容器中的相对位置(显示区域)
| border-box | 相对于边框进行定位(背景图像会延伸到边框线的下面) |
| padding-box | 相对于内边距的区域来定位(默认。背景图像延伸到padding区域) |
| content-box | 相对于内容框来进行定位(有内容的地方就有背景 |
c、background-clip：设置背景图像的裁剪区域
| border-box | 默认值，从边框区域向外裁剪背景 |
| padding-box | 从内边距区域向外裁剪背景 |
| content-box | 从内容区域向外裁剪背景 |
三、HTML中元素类型的转换
1.标签的等级
(1)行内标签
可以和其他的标签(元素)在行内并排;不能设置宽和高；默认的宽度就是文字的宽度 span、input、label
(2)块级标签
每个标签独占一行,不能和其他任何标签并列(同一行显示);可以设置宽高，若不设置宽度 则它的宽度默认为父级标签的100% 常见的块级标签：
标题标签：h1~h6
段落标签：p
列表标签：ul、ol、li
div
2.元素类型的转换
是通过CSS的display属性实现块级元素和行内元素的相互转换。
display属性的取值：
| inline | 将元素转换为行内元素。若元素是行内元素,则该元素的display属性的默认为inline |
| block | 将行内元素转换为块级元素。块级元素display属性的默认值 |
| inline-block | 与inline的区别是允许元素设置宽高、对齐方式、间距等属性 |
四、页面布局
1.布局的过程
第一步：确定版心。是页面的主要内容，通常在页面中水平居中显示
第二步：分析页面中的模块(header、nav、banner、content、footer)
第三步：控制页面的各个模块(页面布局设计)
2、页面布局中常用的属性
(1)浮动属性：float
可以让标签在页面中浮动起来，打破传统的流式布局，使页面内容更丰富 float属性的取值：left、right、none(默认值)
A、浮动属性的副作用
a、父级容器的背景无法显示
b、父级容器的边框不能被撑开
c、会导致margin、padding属性失效
B、清除浮动：clear
C、消除浮动影响(副作用)的方法
a、对父级元素设置合适的CSS高度
b、使用clear:both清除浮动
c、为父级元素设置overflow:hidden
(2)定位属性：position
A、定位模式
| static | 自动定位(默认) |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
B、偏移量
| top | 距离顶部的偏移量 |
| left | 距离左侧的偏移量 |
| right | 距离右侧的偏移量 |
| bottom | 距离底部的偏移量 |
(3)溢出属性：overflow
| visible | 默认值,内容不会被修剪,多余的内容会呈现在元素框之外 |
| hidden | 溢出内容会被修剪，并且被修剪的内容是不可见的 |
| auto | 在需要时产生滚动条，即自适应所要显示的内容 |
| scroll | 溢出内容会被修剪，且浏览器会始终显示滚动 |
(4)层叠属性：z-index
在多元素定位时，会出现位置的重叠。 取值可以是正整数、0、负整数,默认值为0
扫一扫
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
