1.行内盒模型padding左右生效,上下不生效
2.行内盒模型margin左右生效,上下不生效,auto不生效
3.文字大小值
1)px
2)em
继承父元素的多少倍
4.文本四条线
1)base line 文本基线
以英文字母x小写字母的底边为准
2)中线
穿过文本中心的线
3)顶线
内容区content上面那条线
4)底线
内容区content下面那条线
5.font-family 字体样式
分为Serif(有衬线)有美感 多用于大量文字内容区
& Sans Serif(无衬线)多用于标题两大类
1)使用用户操作系统自带的字体来显示网页内容
eg.
font-family: "SimSun","Microsoft YaHei","KaiTi"serif;
写上多种字体,一般3+1,如果用户电脑里没有第一种字体,则显示第二第三种字体,都没有则解析成有/无衬线类字体
2)调用程序员自定义的字体来显示网页内容(导入&引用自定义字体)
font文件夹里面的Charley .ttf文件存放设计好的字体
eg.
<style>
导入
@font-face {
font-family: "Charley";
src: url("font/Charley.ttf");
}
引用
a {
font-family: "Charley";
}
</style>
5.行内盒模型行间距
1)line-height行高 ==> 决定文字的高度,与content无关
设置行高与元素高度一致 ==>垂直居中
line-height取值分两种:px固定值&字体大小的倍数(单纯写数值)
2)行间距=line-height - font-size ==>两行文字内容区之间的距离
6.文本对齐(水平方向)text-align
text-align:center; ==>水平居中
text-align:left; ==>左对齐(默认)
text-align:right; ==>右对齐
text-align:justify; ==>两端对齐
7.文本缩进样式 text-indent
1)2em一个字符 ==>文本首行缩进2个字符
2)20px ==>文本首行缩进20px大小
8.文本装饰 text-decoration
text-decoration:overline; ==>上划线
text-decoration:underline; ==>下划线
text-decoration:line-through; ==>中划线/贯穿线/删除线
text-decoration:none; ==>去除文本装饰
9.文本图片对齐(替换元素-非文字)
垂直对齐vertical-align
vertical-align:baseline;(默认) ==>基线对齐
vertical-align:middle; ==>中线对齐
vertical-align:top; ==>顶部对齐
vertical-align;bottom; ==>底部对齐
04-css行内盒模型及文字样式详解
猜你喜欢
转载自blog.csdn.net/Charley_Li/article/details/105032774
今日推荐
周排行