行内盒模型

行内盒模型

行内元素具有盒子模型吗

行内元素同样具有盒子模型。

行内元素的属性设置

行内元素的上下内边距和外边距属性设置是无效的

行内元素的左右外边距和内边距属性设置是有效的

行内元素的padding-top、padding-bottom从显示的效果上是增加的但其实设置的是无效的。并不会对他周围的元素产生任何影响。

字体大小(font-size)

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

几乎所有游览器的font-size默认大小都是16像素,除非用户去修改偏好设置

px像素（Pixel）,像素px是相对于显示器屏幕分辨率而言的。

我们去使用em单位可以变得更加灵活，em会继承父级元素的字体大小。

h3{
   font-size:1.314em}/*21px*/

这会产生一个问题

p{
   font-size:1.314em;}
div{
   font-size:1.314em;}
<div>
	<p></p>
</div>

此时p元素的font-size会变成1.314em*1.314em约等于1.71em或28px,

这就设计相违背了在使用相对长度时一定要注意

我们可以使用百分比来代替em.133.3%和1.33em在这里是没有什么区别的，这取决于个人偏好.

rem（root elemnet em根元素）是相对于根元素,如果html元素没有设置font-size则默认1rem=16px.

font-size大小选择

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

说一个纯四度的数学比例即上一级标题比下一级标题尺寸大四分之一，或者说是下一级标题的1.25倍.这种类比关系对初始阶段的网页设计也是很有必要的.大家可以试试modular scale计算器.

字体样式(font-style)

设置font-style:italic（斜体，有带有倾斜属性的字体才能用）会从字型中选择斜体显示,前提是存在这个变体,如果不存在,游览器也会通过倾斜字体来模拟,但结果可能就不太理想了

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

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

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

字体族(font-family)

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

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

字体列表中的serif和sans-serif叫作通用字体族.在这里充当没有选择的选择。

此外，还有cursive、fantasy和monospace等通用字体族， 只不过serif和sans-serif应该是最常用的两个/

如果网页中要显示代码.应该首选monospace字体族， 也叫“等宽字体*， 因为monospace的每个字符的宽度都一样， 不同行之问的字符可以完美对齐。

fantasy和cursive就没那么常用了，分别对应花式字体和手写字体.

文本颜色(color)

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

白底黑字的对比度极高,足够高的对比度是确保网页无障碍阅读的关键.

但也别过分强调,事实上由于屏幕高对比度,白底黑字会让大段文字显得过于密集,反而影响了可读性.

对齐方式(verticle-align)

基线:在文本中,就是字母X下面两个脚形成的线

p{
   
		font-size: 50px;
		background-color: skyblue;
}
<p>xmind</p>
/*这些字母当中对齐方式是不是以X下方两只脚对齐的
  我们去写一些中文*/

<p>xmind形成的线</p>
/*中文对齐方式没有基线.这里讨论基线就用英文讨论*/

xmind下面那条线好像是我们文本对齐的一条线,上面好像也有一条线.

我们写英文的时候,其实是有四条线.

给同学们画一下,我写字母abcg可以看到我们写英文的时候就是有这样的对齐方式.

虽然现在这些字母像飘在了空中没有线,假如我们现在去凭空创造这个第三条线,就相当于这有个台