CSS(五)——盒子模型(一)
盒模型
**box:**盒子,每个元素在页面中都会生成一个矩形区域(盒子)。
盒子类型:
-
行盒:display等于inline的元素;
-
块盒:display等于block的元素。
行盒在页面中不换行,块盒独占一行,display默认inline。
- 常见的行盒:span、a、img、video、audio。
盒子的组成部分:
无论是行盒还是块盒,都由从内到外都由下面几部分组成:
-
内容;content;
内容中包括:width、height——表示内容的狂傲
内容部分通常叫做整个盒子的内容盒 content-box
-
填充:padding;
盒子边框到内容的距离 padding-left、padding-right、padding-top、padding-bottom
简写属性:顺时针书写
padding:top right bottom left; padding:top(bottom) left(right); padding:四个方向值相同,可以只写一个;
填充盒 = 填充区 + 内容区
-
边框:border;
边框 = 边框样式(border-style) + 边框宽度(border-width) + 边框颜色(border-color)
border:4px solid red;
上述简写属性中,第一个表示边框宽度,第二个表示边框样式,第三个表示边框颜色
-
外边距:margin;
边框到其他盒子的距离。
margin:遵循属性简写。
盒模型的应用
默认情况下,width、height设置的是内容盒宽高
页面重构师:将psd文件(页面设计稿)制作为静态页面。
-
衡量设计稿尺寸的时候,往往用的是边框盒,但设置的是内容盒。
精确计算尺寸时,使用box-sizing属性(默认为content-box),将值改为border-box。
行高需要自己计算
-
默认情况下,背景覆盖边框盒。
可以通过background-clip属性来修改:
background-clip:border-box; /* 背景覆盖边框盒*/ background-clip:content-box; /* 背景覆盖内容盒*/ background-clip:padding-box; /* 背景覆盖填充盒*/
-
移除处理:
使用overflow来处理移除的部分。
overflow:visible; /*默认的,可见*/ overflow:hidden; /*隐藏*/ overflow:scroll; /*滚动条*/ overflow-y:scroll; /*纵向滚动条*/ overflow-y:auto; /*纵向滚动条自动出现*/
-
断词规则:
word-break:断词会影响文字在什么位置被截断换行
/*对于CJK字符——即Chinese、Japanese、Korean[kəˈriən](中文、日文、韩文)会在文字位置截断*/ /*非CJK字符会在单词位置截断*/ /*综上所述,断词会在保留语言中能表达含义的最小单位的前提下进行截断*/ word-break:normal; /*不管是什么样的字符,都会被截断*/ word-break:break-all; /*保持所有,所有文字都在单词之间截断*/ word-break:keep-all;
-
空白处理:
不换行处理用white-space
white-space:nowrap; /*表示不换行*/ overflow:hidden; /*一处的文字被隐藏(其实是超过盒子范围的不显示)*/ text-overflow:ellipsis; /*将溢出的文字显示为圆点*/
只能控制单行文本,控制多行文本需要使用js
行盒模型
常见的行盒元素:包含具体内容的元素:span,strong,em,i,img,video,audio
特点
-
行盒沿着内容延伸,内容结束,行盒结束
-
调整行盒的宽高需要使用字体的大小来设置
-
行盒的padding水平方向有效;垂直方向只会影响背景,不会实际占据空间。
-
行盒的border水平方向有效;垂直方向只会影响背景,不会影响实际占据空间
-
行盒的margin水平方向有效;垂直方向只会影响背景,不会影响实际占据空间
行块盒
行块盒指的是:display:line-block
- 不独占一行;
- 盒模型中的所有属性都有效
空白折叠(补充)
空白折叠发生在行盒内部哦行盒之间——包括行块盒。
可替换元素和非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为——非可替换元素
少部分元素,页面上显示的结果,取决于元素属性,可称为——可替换元素。例如:img
<img src="" alt=""> /*显示什么,取决于src的属性值*/
拒绝大部分可替换元素均为行盒,而在属性设置上类似于行块盒
补充图片属性
object-fit:contain; /*表示保持比例来调整图片*/
object-fit:fill; /*表示填充,但不能保证比例*/
object-fit:cover; /*保证区域填充满,保持比例,会导致有些部分显示不出来*/
总结
本篇笔记中记录了CSS样式中重要的盒模型的基本概念以及相应的盒模型类型,并阐述了相关特点和应用。
盒模型分为行盒和块盒以及一个特殊的存在——行块盒。
行盒在页面使用时不会换行,且无法设置高度(因为行盒的具体宽高跟随元素内容延伸),具体样式参照行盒模型的特点。
块盒在使用的时候回自动换行,且宽高可以设置并占据实际空间。
行块盒在使用时融合了行盒和块盒的优点,但依旧存在相关问题(比如空白折叠造成的页面样式问题),具体解决办法后续整理。
最后介绍了可替换元素和非可替换元素。具体区别在于可替换元素。
可替换元素指的是元素显示的内容取决于属性值,例如:img。
非可替换元素指的是现实的内容取决于元素的内容,例如:span。