行内盒模型
行内元素具有盒子模型吗
行内元素同样具有盒子模型。
行内元素的属性设置
行内元素的上下内边距和外边距属性设置是无效的
行内元素的左右外边距和内边距属性设置是有效的
行内元素的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可以看到我们写英文的时候就是有这样的对齐方式.
虽然现在这些字母像飘在了空中没有线,假如我们现在去凭空创造这个第三条线,就相当于这有个台阶,有的人脚会伸下来有的则不会.这第三条线就像参照线,
我们前端中就有一个词语来称呼它,就是基线.(只存在于行内(块)元素).
基线使得字都会被摆放在内容区,每个字形都在垂直方向上不偏不倚.
我们去找一副动漫小姐姐图片
<p>xmind形成的线<img src="1.jpg" alt=""></p>
/*这幅图片在跟我们什么对齐?跟我们的基线对齐.
即使把我们文字给删除.*/
<p><img src="1.jpg" alt=""></p>
/*其实图片下面还是会预留空隙,这就是之前说的图片的对齐方式.*/
我们去写四个图片
<p>
<img src="0.jpg" alt="">
<img src="0.jpg" alt="">
<img src=".jpg" alt="">
<img src=".jpg" alt="">
</p>
/*我们图片水平方向有解析空格的存在.我们可以通过不留空格来消除
那上下的两张图片有白色的空格是怎么来的.
图片的竖直间隙就是基线对齐和底线之间的间隙*/
<img src="0.jpg" alt="">x<img src="0.jpg" alt=""><img src=".jpg" alt=""><img src=".jpg" alt="">
/*我们去写上字母X,这个X的两个脚和图片底端刚好对齐了,*/
假如我们去写一个字母g
<img src="0.jpg" alt="">g<img src="0.jpg" alt=""><img src=".jpg" alt=""><img src=".jpg" alt="">
/*这个字母g和图片的顶部刚好对齐,所以说这里的线不是白留,是为了有些字母腿比较长而预留的.
这段空间如果不去预留,我们上面的文字就会被挡住,非常难看.*/
所以图片下面会有一段空白,是用来放文字的,我们去清除这段空白有几个方式
这个空白的由来是字母的腿有长度,我们这里可以去控制字体的大小去控制,要想看不到,
直接写font-size:0清除字体大小
p{ font-size:0;}
verticle-align:对齐方式的设置
1.baseline:基线对齐(所有文本默认的对齐方式)
我们来聊聊别的对齐方式
p{
font-size: 100px;
background-color: skyblue;
}
span{
font-size: 40px;
}
<p>xmind<span>xmind</span></p>
/*打开开发者工具,给span标签字体大小调大.
无论调大调小都是以基线对齐*/
2.中线:middle
3.顶部对齐:top
4.底部对齐:bottom
为了看的更清楚怎么对齐的,我们给span标签加上背景颜色
span{ background-color: pink; }
/*如果要跟p标签里面文本的顶部对齐怎么写呢?*/
span{ vertical-align: top; }
/*此时在跟P文本的顶部对齐.
此时无论怎么调整span标签大小依然顶部对齐.
我们还可以写上中线对齐*/
span{ vertical-align: middle; }
/*打开开发者,无论调大调小好像都跟我们P的中线对齐*/
行高
line-height:这一行文本所占竖直方向上的高度
p{
font-size: 100px;
background-color: skyblue;
}
<p>xmind</p>
/*此时这个文本的高度是多少?
我们设置了p标签字体为100px,但是p标签实际高度为132像素.那这个132像素哪里来的?这个就是行高*/
所以当我们给文本设置字体大小,会依照比例(1.32)给这行文字设置行高,行高撑开了这个盒子.
没有默认高度的时候文字的font-size决定line-height决定height
我们可以修改行高
p{line-height: 0;}
/*这个盒子的高度是多少?
打开开发者工具可以看到,盒子的高度就是0,就无法将盒子撑开.
我们还可以把font-size设置为0,行高设置150px*/
p{
font-size: 0;
background-color: skyblue;
line-height: 150px;
}
/*盒子里面的文字消失了,但是盒子依旧被撑开.
所以盒子怎么被撑开,和文字关系不是最直接的,和行高是最直接的关系.
如果里面没有文字呢?*/
<p></p>
/*line-height的作用就是给文字撑开一片天空.
如果此时没有文字,line-height就没有存在的意义了.*/
行高还有什么作用呢?
p{
font-size: 100px;
background-color: skyblue;
line-height: 160px;
}
span{
font-size: 40px;
background-color: pink;
}
<p>xmind<span>xmind</span></p>
/*我们这时候再来看看上面的垂直对齐的方式*/
span{vertical-align: top;}
/*此时为什么没有和顶部对齐呢?*/
行高可以被继承,
打开开发者可以看到span标签继承了p标签的行高.
span标签虽然这时候看起来只有这么小,但是他有160px的行高让他进行对齐,上下会被分配一部分.
所以就以这样的方式去进行对齐了.
所以这时候我们可以去手动修改这个行高
span{line-height: normal;}
/*正常内容,不要去继承*/
如果你调整verticle-align对齐困难,可以使用像素值.
还可以使用百分比,百分比相对于line-height进行计算.
一般来说,行高的取值范围在1.2到1.5之间,行与行相对排版良好.不至于太密或者太疏.
body {line-height:1.5;}
这里给line-height设置了没有单位1.5,的意思就是当前font-size的1.5倍.
如果body的font-size为16px,那么默认的line-height就是24px;
也可以给行高设置像素值,em,百分比单位.
注意:前面如果body用的是百分比或em,其子元素继承的都是计算后得到的像素值,不会与自己的字体大小成比例.
但无单位的值就不会导致这个问题,因此,如果给line-height设置没有单位的值,那么子元素继承的是一个系数,永远与自己的font-size成比例.
两个文字之间的距离就是行间距
没有直接控制行间距的样式
行间距 + 文字大小 = 行高.
控制行高去控制上下的间距
单行不同文字大小、行高对行内盒模型的影响
1：先确定最高的行内盒模型，并算出该行内盒模型的文本基线位置，接着将其他行内盒模型的基线与之对齐
2：行框的最终高度，由行内最高的那个行内盒模型决定
文本缩进(text-indent)
text-indent：1em；文本首行缩进一个字符
text-indent：20px；文本首行缩进20px
文本对齐(text-align)
默认情况下文本是左对齐tetx-align:left的,这有利于眼睛找到下一行,保持阅读的节奏.
text-align:center;居中对齐 text-align:right; 右对齐
.wrap{
width: 200px;
height: 200px;
background-color: skyblue;
}
.wrap p{
text-align: left;
}
<div class="wrap">
<p>我要忘了你的样子</p>
</div>
CSS3定义了额外的值包括start和end,这两个方向的关键字与文本书写模式相对应；
多数西方语言都在从左往右书写，那么如果文本语言是英文，那么start代表左对齐，end就代表右对齐
而在从右往左书写的语言中（如阿拉伯语）就正好相反.
如果给父元素设置**dir=“rtl”**属性，即从右往左显示，游览器通常会自动反转默认的文本方向.
text-align:justify表示两端对齐，它会在单词间平均分布间距已达到两边恰好对齐，消除毛边。这也是印刷业经常用到的技术
文本粗细(font-weight)
关键字normal.bold,bolder和lighter
100的整数倍:100,200,300,400等等,最大为900,默认normal对应400 bold对应700
文本装饰text-decoration
text-decoration:underline;下划线
text-decoration:overline;上划线
text-decoration:line-through;贯穿线
文本阴影(text-shadow)
text-shadow:x y blur color;
text-shadow: 1px 1px 1px green；
第一个1px:是向x坐标方向的偏移
第二个1px;是向y坐标方向的偏移
第三个1px；是模糊距离
第四的参数：颜色
大小写变换
h1{text-transform:uppercase;}
/*uppercase*/将所有字母大写
/*lowercase*/所有字母小写
/*capitalize*/每个单词的首字母变成大写
/*none*/显示HTML源码中的默认大小写
控制字母和单词间距
word-spacing功能是控制词间距,很少用.它的值意味着在默认间距的基础上增加或减少一定会的量
letter-spacing属性来控制字符间的距离,对于小写英文,人为改变字母间距也不是好事,因为大多数字体设计的初衷就是让人更容易辨别整个单词
换行方式(white-space)
文本的换行方式
1.white-space:normal;默认
2.white-space:nowrap;不换行.
3.word-wrap: break-word; 比较温柔，会先另起一行，新的行放不到再把单词断了。
4.word-break: break-all; 这娃比较暴力，他不会去新起一行，而是直接在后面跟着，如果放不下，则会强制把单词折断。
文本溢出(text-overflow)
单行组合写法
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行省略*/
}
