本文详细介绍了CSS中的文本样式属性，包括颜色、字体大小、字体样式、文本修饰和字体家族等，并探讨了字体的继承性和字体文件的使用。此外，还讲解了盒模型的基本概念，如内容宽度、高度、内边距、外边距，以及如何通过`box-sizing`属性调整盒模型的行为。同时，文章提到了元素的显示方式（块级元素与行内元素）及其转换，并讨论了元素隐藏的方法。
四、文本与字体属性
1、常用文本样式属性
1）color属性
可以用英文单词、十六进制、rgb()、**rgba()（兼容IE9）**等表示法
英文单词表示法，如color:red，仅用于学习时临时设置颜色，工作时追求精确一般不用
十六进制表示法，是所有设计软件中通用的颜色表示法，通常为十六进制表示color:#ff0000，每两位表示一种颜色分量，范围为0~255(00~ff)，分别为红绿蓝。
若颜色为#aabbcc形式，则可以简写为#abc
常见颜色：黑色#000，白色#fff，灰色#ccc #333 #2f2f2f等
rgb()表示法，color：rgb(255,0,0);（红，绿，蓝）
rgba()表示法，最后一个参数表示透明度，介于0~1之间，0表示纯透明，1表示纯实心
2）font-size属性
用来设置字号，单位通常为px，还有em、rem等单位
网页文字正文字号通常为16px，浏览器最小支持10px字号（通常字号为偶数）
3）font-weight属性
设置字体的粗细程度，通常为normal和bold两个值
| 示例 | 意义 |
|---|---|
font-weight:normal | 正常粗细，与400等值 |
font-weight:bold | 加粗，与700等值 |
font-weight:lighter | 更细，大多数中文字体不支持 |
font-weight:bolder | 更粗，大多数中文字体不支持 |
4）font-style属性
设置字体倾斜
| 示例 | 意义 |
|---|---|
font-style:normal | 取消倾斜，比如把天生倾斜的i、em等标签设置为不倾斜 |
font-style:italic | 设置为倾斜字体（常用） |
font-style:oblique | 设置为倾斜字体（用常规字体模拟，不常用） |
5）text-decoration属性
用于设置文本的修饰线外观（下划线、删除线）
| 示例 | 意义 |
|---|---|
text-decoration:none | 没有修饰线 |
text-decoration:underline | 下划线 |
text-decoration:line-through | 删除线 |
2、字体属性详解
font-family属性
用于设置字体，如font-family:"微软雅黑";
字体可以时列表形式，一般英语字体放前面，后面字体是前面字体的后备字体，如
font-family:serif,"Times New Roman","微软雅黑";
字体如果是中文，用引号包裹起来；多个字体设置，字体与字体之间用逗号隔开；引号嵌套，外面使用双引号，里面使用单引号。
字体名称中间有空格时必须用引号包裹
中文字体也可以用英文名字来称呼，如“微软雅黑”——“Microsoft Yahei”、“宋体”——“SimSun”
字体通常为用户计算机已经安装好的字体，所以一般来说设置为微软雅黑和宋体，设置成其他字体较少。
如要设置用户电脑中没有的字体，则需要自己定义新字体（即需要字体文件），用户加载网页的时候，会同时下载这些字体文件
字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5中文件
当拥有字体文件后，就可以使用@font-face定义字体
@font-face{
font-family:'字体名称';
font-display:swap;
src:url('eot字体文件地址');
src:url('eot字体文件地址') format('embedded-opentype'),
url('woff2字体文件地址') format('woff2'),
url('woff字体文件地址') format('woff'),
url('ttf字体文件地址') format('truetype'),
url('svg字体文件地址') format('svg'),
}
阿里巴巴普惠字体：https://www.iconfont.cn/webfont
使用该字体省去了下载字体的麻烦，该方法字库仅包含在网站中输入的文字，故推荐在标题等字较少的场合下使用
3、段落和行相关属性
1）text-indent属性
定义首行文本内容之前的缩进量
缩进两个字符应该写作text-indent:2em（em表示字符宽度）
在实际应用中，一般以text-indent实现缩进，而不是 
2）line-height属性
定义行高
line-height属性的单位可以是以px为单位的数值，如line-height:30px
单位也可以是em，即line-height:2em字符高度的两倍
也可以是没有单位的数值，表示字号的倍数，这也是推荐的写法，如line-height:1.5（即行高为字号的1.5倍）
也可以是百分数，同样表示字号的倍数，line-height:150%
应用：设置行高 = 盒子高度，即可实现单行文本垂直居中（text-alignLcenter 实现水平居中）
3）font合写属性
font属性可以作为font-style、font-weight、font-size、line-height、font-family属性的合写
该合写一定要有后三个属性font-size、line-height、font-family才能生效，前两个无所谓，若省略line-height则默认1倍行高，若想另行改变行高则需将line-height卸载font以下才会生效，在上会失效。
/*字号：20px 行高：1.5倍 字体：Arial 微软雅黑*/
font:20px/1.5 Arial,"微软雅黑";
/*字体样式：倾斜 字体粗细：加粗 字号：20px 行高：1.5倍 字体：Arial 微软雅黑*/
font:italic bold 20px/1.5 Arial,"微软雅黑";
/*前两个可以交换顺序*/
4、继承性
文本相关的属性普遍具有继承性，只需要给祖先标签设置即可在后代所有标签中生效
- color
- font-开头的
- list-开头的
- text-开头的
- line-开头的
因为文字相关属性具有继承性，所以通常会设置body标签的字号、颜色、行高等，这样就可以当作整个网页的默认样式了
在继承的情况下，选择权重计算失效，而是“就近原则”，即继承情况下，具体选中的标签的样式直接生效而不计算权重；都没有选中的话，离具体标签近的的样式生效。
<style>
#box1 #box2{
color:red;
}
.box1 .box3{
color:blue;
}
</style>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我是文字</p>
</div>
</div>
</div>
<!-- 对于p标签来说，样式直接继承与父标签，都没有选中的情况下，根据“就近原则”,color:blue生效 -->
一个注意
<head>
<style>
p{
color:red;
text-decoration:none;
}
</style>
</head>
<body>
<p>
<a href="#">链接文字</a>
</p>
</body>
在以上情况下，链接的样式不变。
原因：a标签自身有默认样式，即蓝色有下划线；给p标签的样式对a标签来说是继承关系，在继承的关系下，a标签自身的样式离a最近，故a标签中文字就是蓝色加下划线。
五、盒模型
1、盒模型基本概念
1）认识盒模型
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型“
width属性表示盒子内容的宽度（不包括padding）
height属性表示盒子内容的高度（不包括padding）
border属性表示内容区域之外的一圈边框
padding属性表示边框内层和内容文字之间的空白边距（内边距）
盒子的总宽度 = width + 左右padding + 左右border
盒子总高度 = height + 上下padding + 上下border
2）width和height属性
width属性表示盒子内容宽度，单位通常为px，移动端开发也会涉及百分数、rem等单位
当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满网页，但并不意味着width可以继承。
height表示盒子内容高度，单位通常为px，移动端开发也会涉及百分数、rem等单位
盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认是0。所以height属性可以省略
3）padding属性
padding是盒子的内边距，即盒子边框内壁到文字的距离
padding属性是四个方向的，可以分别使用小属性进行设置
padding-top 上padding
padding-right 右padding
padding-bottom 下padding
padding-left 左padding
padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左（顺时针）的padding，如padding:10px 20px 30px 40px
padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding，如padding:10px 20px 40px
padding属性如果用两个数值以空格隔开进行设置，分别表示上下、左右的padding，如padding:10px 20px
padding属性如果用一个数值以空格隔开进行设置，表示上下左右的padding，如padding:20px
当padding属性中的值为 0 时，单位可省略，但 0 不可省略
4）margin属性
margin属性是盒子的外边距，即盒子和其他盒子之间的距离
margin属性也有四个方向，与padding一致
竖直方向的margin属性有塌陷现象：小的margin会塌陷到大的margin中，从而**margin不叠加，只以大值为准**（左右方向上的margin会叠加！）【浮动元素不会出现塌陷，依然是叠加】
两个Div（A、B）上下之间没有margin值，但是A中有子元素有margin，这时该子元素的margin值会传递到两者间，会使A、B两个元素之间填充上margin，仅限垂直方向
一些元素（如body、ul、p等）都有默认的margin，在开始制作网页的时候要将他们清除
<style>
*{
margin:0;
padding:0;
}
/* * 表示通配符选择器，表示选择所有元素 */
/* 但是通配符有效率问题，所以一般在工作时使用并集选择器 */
body,ul,p{
margin:0;
padding:0;
}
</style>
盒子的水平居中：将盒子左右两边margin都设置为auto，盒子将水平居中（区别于文本居中text-align:center）
.box{
margin:0 auto;
}
/*上下为0，左右自动*/
盒子的垂直居中，则需要使用绝对定位技术实现
5）盒模型计算
6）box-sizing属性
box-sizing属性用于修改盒模型类别，
border-box即为IE盒模型，width和height是盒子的实际宽度和高度，包含padding和border；
content-box即为标准盒模型，width和height是盒子中内容使用的宽度和高度，不包含padding和border属性。
将盒子添加了**box-sizing:border-box;**之后，盒子的width、height属性就表示盒子实际占有的宽高（不含marign），即padding、border变为内缩，不再外扩
**box-sizing:content-box**即为默认情况（外扩）
（div、button默认遵守不同的盒模型，前者为content-box，后者为border-box）
box-sizing属性大量应用于移动网页的制作，因为它结合百分比布局、弹性布局非常好用，在PC页面开发中使用较少，其兼容至IE9
2、行内元素和块级元素
1）display属性
| display属性类型 | 是否能并排显示 | 是否能设置宽高 | 不设置width属性时 | 举例 |
|---|---|---|---|---|
| 块级元素 | 否 | 是 | width自动撑满 | div、section、header、h系列、li、ul等 |
| 行内元素 | 是 | 否 | width自动收缩 | a、span、em、b、u、i等 |
行内块，既能设置宽度高度，也能并排显示，如表单和**img标签**
2）行内元素和块级元素的互相转换
使用display:block;即可将元素转化为块级元素
使用display:inline;即可将元素转化为行内元素，将元素转为行内元素的应用不多见
使用display:inline-block;即可将元素转化为行内块
3）元素的隐藏
使用display:none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
使用visibility:hidden;也可以隐藏元素，但是元素不放弃自己的位置
扫一扫
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
