行内盒模型

特点

行内元素不支持设置宽度和高度

行内元素可以设置padding.但是垂直方向的padding不会影响布局

行内元素可以设置boder,垂直方向的border不会影响布局

行内元素可以设置margin,垂直方向的margin不会影响布局

字体属性

字体大小(font-size)

font-size实际上设置的是字体的高度, 原因很简单为了保证CSS的视觉效果,

单位:

• px像素单位是相对于显示器屏幕分辨率而言的。几乎所有游览器的font-size默认大小都是16像素,除非用户去修改偏好设置

• em单位是相对元素的字体大小进行计算, 相对em会继承父级元素的字体大小。

h3{font-size:1.5em}/*24px*/

这会产生一个问题

p{font-size:1.5em;}
div{font-size:1.5em;}
<div>
	div1
	<p>p1</p>
</div>
/*我们可以使用百分比来代替em.  150%和1.5em在这里是没有什么区别的，这取决于个人偏好.*/

此时p元素的font-size会变成1.5em*1.5em约等于2.25em或36px

我们希望这个单位是一个固定的。就可以使用rem

• rem的单位（root elemnet 根元素）是相对于根元素l的字体大小设置

如果html元素没有设置font-size则默认1rem=16px.

颜色(color)

color 用来设置文字颜色

默认情况下文本渲染为黑色.链接除外(它的颜色是活力蓝)

font-size大小选择

没有硬性要求，首先要保证字体足够大，而且人眼看着足够舒服即可.

字体族(font-family)

字体族是什么一个备选字体的列表,优先级由左往右

这种后备机制是font-family属性的重要特性,因为不同的操作系统和移动设备都可能安装了不同的字体

​ 可选值

​ serif 衬线字体

​ sanserif 非衬线字体

​ monospace 等宽字体

​ ---指定字体的类别，游览器会自动使用该类别下的字体

​ 多个字体间使用，隔开，字体生效时优先使用第一个，第一个无法使用则使 用第二个

有衬线(serif)字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同. 中文字体中的宋体就是一种最标准的serif字体，衬线的特征非常明显.字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一.

无衬线(sans serif) 没有这些额外的装饰，而且笔画的粗细差不多 无衬线字体醒目，适合用于标题、广告、海报. 需要醒目但不需要长时间阅读的地方.

随着现代生活和流行趋势的变化，如今的人们越来越喜欢用无衬线体，因为他们看上去“更干净”。

/* @font-face 可以将服务器的字体直接提供给用户去使用
					问题 
						1.加载速度
						2.版权
					*/

		@font-face {
			font-family: "yunmu" ;/*指定字体的名字*/
			src: url("");/*服务器跟字体的路径*/
		}

		div{
			font-family:yunmu;/*在div里面应用yunmu的字体*/
		}
<div>天青色等烟雨而我在等你</div>

字体粗细(font-weight)

单位

​ 关键字normal.bold,bolder和lighter

​ 100的整数倍:100,200,300,400等等,最大为900,默认normal对应400 bold对应 700（没什么用）

字体样式(font-style)

1.正常(normal)

2.italic( 斜体 )

注: oblique也是斜体,用的比较少,了解即可

区别:

1.italic带有倾斜属性的字体才可以设置倾斜的操作

2,oblique没有带有倾斜属性的字体也可以设置倾斜操作

字体是否为小型大写字母 (font-variant)

1. normal 默认值(正常显示)。
2. small-caps 小型大写字母。

写法:

font-variant:small-caps;

字体的复合属性

基本型:

复合写法,这两个个属性是必须的

font: font-size  font-family;

复杂型:

font的:fons-style  font-weight font-size/line-height  font-family;

font-size/line-height写法必须加斜杠

文本属性

行高(line-height)

行高: 控制每一行文字的高度,文字会在这个行高内垂直居中显示

​ 通过line-height来设置行高

​ 行高可以直接指定一个大小（px,em）

​ 也可以直接为行高设置一个整数

​ --如果是一个整数，行高将会是字体大小的指定倍数

字体框

​ 字体框就是字体存在的格子,设置font-size实际上就是设置字体框的高度

div{
	 font-size: 100px;
	 background-color: skyblue;
}
<div>天空一望无际是海洋的倒影</div>
/*此时这个文本的高度是多少?
 我们设置了p标签字体为100px,但是p标签实际高度为132像素.那这个132像素哪里来的?这个就是行高*/

当我们给文本设置字体大小,会依照比例(1.32)给这行文字设置行高,行高撑开了这个盒子.

没有默认高度的时候文字的font-size决定line-height决定height

我们可以修改行高

 	div{line-height: 0;}
	<div>天空一望无际,是海洋的倒影</div>
	/*这个盒子的高度是多少?
  	打开开发者工具可以看到,盒子的高度就是0,就无法将盒子撑开.
  	我们还可以把font-size设置为0,行高设置150px*/

	div{		
		font-size: 0;
		background-color: skyblue;
		line-height: 150px;
	}
	<div>天空一望无际,是海洋的倒影</div>
	/*盒子里面的文字消失了,但是盒子依旧被撑开.
    所以盒子怎么被撑开,和文字关系不是最直接的,和行高是最直接的关系.*/

一般来说,行高的取值范围在1.2到1.5之间,行与行相对排版良好.不至于太密或者太疏.

行高是可以被继承的

body {line-height:1.5;}

这里给line-height设置了没有单位1.5,的意思就是当前bodyfont-size的1.5倍.后面所有元素的font-size都会和行高成比例

如果body的font-size为16px,那么默认的line-height就是24px;

也可以给行高设置像素值,em,百分比单位.

注意:前面如果body用的是百分比或em,其子元素继承的都是计算后得到的像素值,不会与自己的字体大小成比例.

但无单位的值就不会导致这个问题,因此,如果给line-height设置没有单位的值,那么子元素继承的是一个系数,永远与自己的font-size成比例.

行高还可以用来设置行间距

行间距

​ --- 两个文字之间的距离就是行间距,行间距会在文字上下平均分配

​ 没有直接控制行间距的样式

​ 文字大小 + 上下行间距 = 行高. 1

所以我们可以通过控制行高去控制上下的间距

		div{		
			height: 200px;
			background-color: skyblue;
			line-height: 200px;
		}
		/*可以将行高设置为高度一样的值,使一个单行的文字在一个元素中垂直居中*/
		<div>天空一望无际,是海洋的倒影</div>

垂直对齐方式(verticle-align)

基线:在文本中,就是字母X下面两个脚形成的线.(只存在于行内(块)元素).

verticle-align:对齐方式的设置

1.baseline:基线对齐(所有文本默认的对齐方式)

2.中线:middle

3.顶部对齐:top

4.底部对齐:bottom

		p{
			font-size: 100px;
			background-color: skyblue;
		}
		span{
			 font-size: 40px;
           	 background-color: pink;
		}
	<p>xmind<span>xmind</span></p>
	/*打开开发者工具,给span标签字体大小调大.
  		无论调大调小都是以基线对齐*/

span{   vertical-align: top;  }
/*此时在跟P文本的顶部对齐.

如果你调整verticle-align对齐困难,可以使用像素值.

​ 正值往上,负值向下

也可以使用百分比,百分比相对于line-height进行计算.

文本缩进(text-indent)

单位

​ 1em；文本首行缩进一个字符

​ 1px: 缩进一个像素

单位可以使用负值

文本对齐(text-align)

text-align：文本的水平对齐

​ 可选值：

​ 默认情况 tetx-align:left 左对齐

​ text-align:center; 居中对齐

​ text-align:right; 右对齐

​ text-align:justify表示两端对齐

​ 它会在单词间平均分布间距已达到两边恰好对齐

​ 消除毛边。这也是印刷业经常用到的技术

文本装饰（text-decoration）

text-decoration:

​ none默认。定义标准的文本。

​ underline;下划线

​ overline;上划线

​ line-through;贯穿线

text-decoration: underline line-through overline设置多种文本装饰

大小写变换(text-transform:)

text-transform:

​ none:默认，定义带有大写字母和小写字母的标准的文本

​ uppercase将所有字母大写

​ lowercase将所有字母小写

​ capitalize每个单词的首字母变成大写

控制字母和单词间距(word-spacing和letter-spacing)

word-spacing控制词间距,很少用.

它的值意味着在默认间距的基础上增加或减少一定会的量

letter-spacing控制字符间的距离,

对于小写英文,人为改变字母间距也不是好事,因为大多数字体设计的初衷就是让人更容易辨别整个单词,中文的字间距也可以通过这个值设置

空白处理 (white-space)

white-space：

​ 1.normal;默认

​ 2.nowrap;文本不会换行，文本会在在同一行上继续.

​ 3.pre保留空白

强制换行 (word-break)

word-break：

1. normal 默认
2. break-all 允许在单词内换行;

文本溢出 (text-overflow)

text-overflow

1. clip: 修剪文本
2. ellipsis 被修剪的文本用略符号来代表(....)

写法:

text-overflow:clip;

单行文本溢出处理方法组合写法

white-space: nowrap;/*不允许换行*/
overflow: hidden;/*溢出隐藏*/ 
text-overflow: ellipsis;/*溢出省略*/

多行文本溢出处理方法组合写法(了解)

  p{
    width: 100px;
    border: 3px solid skyblue;
    overflow: hidden;/*溢出隐藏*/
    text-overflow: ellipsis;/*溢出省略*/
    display: -webkit-box;/*兼容写法 css3盒子属性 弹性盒模型的前身*/
    -webkit-box-orient: vertical;/*从上往下换行*/
    -webkit-line-clamp: 2;/*多于2行省略*/
}

继承

样式的继承: 我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先元素的后代之间

继承是为了方便开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,这样只需设置一次,即可让所有元素都具有该样式

注意:并不是所有的样式都会继承

1.默认继承的

font:fons-style font-variant font-weight font-size/line-height font-family;
color;   /*字体颜色*/
text-align;  /*文本水平对齐*/
text-indent; /*文本缩进*/ 
letter-spacing;  /*字符间间距*/
word-spacing;   /*词间距*/
/*可被子元素继承*/ 
		
li的小圆点也是从ul继承而来

2.a标签不继承color值

3.默认不继承的给属性加inhrit可以让他显示的继承.

例如background-color:inherit;

4.子元素有的属性就不会去进行继承