第四课-CSS行内盒模型及文字样式详解

第四课-CSS行内盒模型及文字样式详解

一、什么是行内盒模型

二、行内盒模型的概念分析

（一）行内盒模型内容区

（二）行内盒模型文本基线（ baseline ）

（三）行内盒模型字体样式详解

1.使用用户操作系统自带的字体来显示网页内容

2.网页安全字体

3.使用程序员自定义的字体来显示网页内容

（四）行内盒模型行间距line-height

三、复杂情况下的行内盒模型

（一）替换元素对文本行框高度的影响

（二）替换元素

1.替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。img、input、textarea、select、object 等都是替换元素，这些元素都没有实际的内容。

2.替换元素可以增加行框高度，但不增加line-height，内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。

3.要想替换元素居中，可以设置line-height = height ；vertral-align = middle

（三）单行不同文字大小、行高对行内盒模型的影响

四、文本垂直对齐讲解

五、文字样式讲解

文字样式会被继承

自身没有设置文字样式 向祖先要

自己有就生效自己的

（一）文本缩进样式text-indent

（二）文本对齐格式text-align

（三）文本装饰text-decoration

text-decoration: none; 去除划线

行内样式 垂直样式
可以使用像素值
vertical-align: 10px;

cursor: pointer;
鼠标样式
pointer 变成小手
default 默认值鼠标样式

文字样式
color
font-size
font-weight :bold
font-style: normal 默认
italic 倾斜

white-space: normal; 文本默认换行
nowrap 文字强制不换行

三个缺一不可
white-space: nowrap; 文本不换行
overflow: hidden; 超出元素隐藏
text-overflow: ellipsis; 转换...

overflow: hidden;
设置了这个属性,里面的内容不能超出,超出就干了
overflow:scroll;
设置滚动条;里面的内容在元素,不会超出
auto 自动计算
内容大于元素就出现滚动条,不大于就不出现