盒模型
一、前言:
页面的制作过程:
设计师设计出设计稿交给前端工程师,前端工程师制作业面:划分区域、填写类容。其中划分区域最重要最复杂。
如何划分区域:
用合适的元素来表示不同的区域(HTML);
设置区域的位置、尺寸、背景等样式(CSS);
划分区域中的CSS知识:
每个元素都会在页面中生成一个矩形区域;
CSS称该矩形区域为盒子(box);
盒子的相关知识:
盒模型:单个盒子的组成
视觉格式化模型:多个盒子的排列(盒子之间的相互作用和影响)
布局:实际应用
二、盒模型概述:
盒子的分类:
不同的元素产生的盒子类型可能不同;
一个元素,产生什么样的盒子,取决于它CSS的display属性;
盒子的组成:
一个盒子由:margin、border、padding、content组成。
盒子内容:
补充知识
内容(content):
CSS的尺寸单位涉及到的CSS属性。
CSS的尺寸单位:
在CSS中,有很多属性的取值,需要表示为一个尺寸;
一个尺寸,由数值和单位组成;
示例:2000(数值)米(单位)
CSS中常见的尺寸单位:
px像素,绝对尺寸(计算机屏幕由很多的小点组成,每一个点,就是一个像素);
em相对尺寸{相对于当前元素的字体大小(px)};
%百分比(在不同的CSS属性中,有不同的含义;
所以其他尺寸单位,在经过浏览器计算后,都会变为px);
盒模型
一、content内容:
1、含义:
用于存放文本或其他元素的区域;
类似于一个箱子中存放东西的空间。
2、相关属性:
width:
含义:宽度
不可继承
默认值:auto
暂认为撑满整个可用区域
其他取值:
1、像素、绝对长度、固定长度:px
所有其他单位都会被计算为像素
2、相对长度:em
相对于应用样式的元素的字体大小
3、百分比:%目前不用管
断词:
1、当内容超过宽度时,会自动对内容进行截断换行;
2、如何截断?
按照断词规则截断;
断词规则可修改;
默认断词规则,
在单词之间进行截断;英文:被空格隔开的即为单词;中文:每个汉字均视为单词。
height:
含义:高度
不可继承
默认值:auto
暂认为适应内容的高度
其他取值:px、en、%
overflow:
含义:内容溢出时的处理方式
不可继承
默认值:visible
溢出部分仍然显示
其他取值:
1、hidden
溢出部分隐藏
2、scroll
在水平和垂直方向上出现滚动条,若溢出,则滚动条可用,否则不可用
3、auto
当内容在水平或垂直方向上溢出时,才在该方向上出现滚动条,否则不出现
min-width:
含义:最小宽度
保证width属性的值不小于该属性值
不可继承
默认值:0px
其他取值 em、%
max-width:
含义:最大宽度
保证width属性的值不大于该属性值
不可继承
默认值:none
表示未设置最大宽度,可视为width属性可以无限大
其他取值 px、 em、%
min-height
含义:最小高度
保证height属性的值不小于该属性值
不可继承
默认值:0px
其他取值 em、%
min-height:
含义:最小高度
保证height属性的值不小于该属性值
不可继承
默认值:0px
其他取值em、 %
max-height:
含义:最大高度
保证height属性的值不大于该属性值
不可继承
默认值:none
表示未设置最大高度,可视为height属性可以无限大
其他取值px、em、%
min-height:
含义:最小高度
保证height属性的值不小于该属性值
不可继承
默认值:0px
其他取值 em
max-height:
含义:最大高度
保证height属性的值不大于该属性值
不可继承
默认值:none
表示未设置最大高度,可视为height属性可以无限大
其他取值px、em、%
min-height:
含义:最小高度
保证height属性的值不小于该属性值
不可继承
默认值:0px
其他取值em、 %
padding 内边距、填充区:
1、含义:
表示边框到内容之间的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向
类似于箱子和内部空间之间的填充物
2、相关CSS属性:
padding-top:
含义:上内边距
不可继承
默认值:0px
其他取值
em、%
padding-right:
含义:右内边距
不可继承
默认值:0px
其他取值
em、 %
padding-bottom:
含义:下内边距
不可继承
默认值:0px
其他取值
em、%
padding-left:
含义:左内边距
不可继承
默认值:0px
其他取值
em、 %
padding:
速写属性、简写属性
速写属性不是真实的CSS属性,它只是CSS提供的一种快速的写法
书写格式
1. padding:上内边距 右内边距 下内边距 左内边距
2. padding:上内边距 左右内边距 下内边距
3. padding:上下内边距 左右内边距
4. padding:上下左右内边距
border 边框:
一、含义:
分割内部和外部的界限,由上(top)、右(right)、下(bottom)、左(left)四个部分组成
类似于箱子壁
二、相关CSS属性:
上边框:
1、边框样式:border-top-style
含义:上边框的样式
不可继承
默认值:none
无边框样式
其他取值:
solid(实线)、dashed(虚线)、dotted(点阵)、double(双实线)、其他。
2、边框厚度:border-top-width
含义:上边框的厚度
不可继承
默认值:medium
预设值,表示中等边框
其他取值
预设值
medium(中等)、thin(细)、thick(粗)
数值px、em
边框颜色:border-top-color
含义:上边框的颜色
不可继承
默认值:currentcolor
表示当前元素的字体颜色
其他取值
预设值
black(黑色)、white(白色)、gray(灰色)、其他
rgb:
用红绿蓝三种基本颜色调配而成,每种颜色的取值是十进制的数字:0-255
书写格式:rgb(红,绿,蓝)
HEX:
用红绿蓝三种基本颜色调配而成,每种颜色的取值是十六进制的数字00-ff
书写格式:#红绿蓝,#号后必须是6个或3个数值
border-top
速写属性
1、书写格式
2、border-top:厚度 样式 颜色
右边框
border-right-XXX
下边框
border-bottom-XXX
左边框
border-left-XXX
border-width
速写属性:同时设置所有边框的厚度
border-style
速写属性:同时设置所有边框的样式
border-color
速写属性:同时设置所有边框的颜色
border
1、速写属性:同时设置所有边框的厚度、样式、颜色
2、书写格式:
border:厚度 样式 颜色
margin 外边距:
一、含义;
1、表示边框和相邻盒子的距离,分为上(top)、右(right)、下(bottom)、左(left)四个方向
2、类似于箱子与箱子之间的距离
3、具体规则比较复杂,视觉格式化模型详细讲解
二、相关CSS属性
1、margin-top:
含义:上外边距
不可继承
默认值:0px
其他取值
em
%
2、margin-right:
含义:右外边距
不可继承
默认值:0px
其他取值
em
%
3、margin-bottom:
含义:下外边距
不可继承
默认值:0px
其他取值
em
%
4、margin-left:
含义:左外边距
不可继承
默认值:0px
其他取值
em
%
5、margin:
速写属性
书写格式
1. margin:上外边距 右外边距 下外边距 左外边距
2. margin:上外边距 左右外边距 下外边距
3. margin:上下外边距 左右外边距
4. margin:上下左右外边距
6、浏览器默认样式中的margin
-webkit-XXX
-webkit-是浏览器厂商前缀
这是一个历史遗留问题
(在早远的时期,CSS还并不规范,可设置的属性很少,一些浏览器厂商,为了让页面能够实现更加丰富的效果,自己加入了一些CSS属性。
为了让这些属性和标准CSS中的属性进行区分,它们在这些属性前面加入了一个特殊的单词。例如:-webkit-(chrome),-moz-(firefox),-ms-(IE)等。
随着CSS的逐渐规范,这些浏览器厂商自己设定的属性变得越来越没有意义了。但为了兼容老版本浏览器,这些属性依旧保留了下来。
现在,这种属性仅出现在浏览器默认样式表中,它们和现在规范的CSS属性有着对应关系,我们开发者仅需要了解它们的存在即可,不需要去书写它们。)
盒模型知识补充:
子盒子:
一、边框盒(border-box):由border、padding、content组成
浏览器调试时,页面中显示的元素尺寸是指边框盒的尺寸【演示】
元素的背景,默认覆盖边框盒【演示】,可通过background-clip属性修改
background-clip属性
含义:背景覆盖范围
不可继承
默认值:border-box
取值
border-box:背景覆盖边框盒
padding-box:背景覆盖填充盒
content-box:背景覆盖内容盒
二、填充盒(padding-box):由padding、content组成
严格意义上,overflow指代的溢出,是指溢出填充盒【演示】
三、内容盒(content-box):由content组成
默认情况下,width和height属性,是指内容盒的宽度和高度
width和height的设置范围,可通过box-sizing属性修改
box-sizing属性:
1、含义:盒子宽高的设置范围
2、不可继承
3、默认值:content-box
4、取值
content-box:表示内容盒的宽高;
border-box:表示边框盒的宽高【演示】。
盒子尺寸的计算:
1、box-sizing:content-box的情况下
2、box-sizing:border-box的情况下
3、outline属性:
外边框,用法和border完全一致