元素只有它所包含的文本的宽度。
5、CSS的单位
PX
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
REM
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。
px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
6、CSS字体和排版：
可以用CSS设置的四种主要的字体属性：family(字体族)、style(样式)、size(大小)和weight(粗细)。
1.字体族：指定要使用的字体
p { font-family:Verdana, Arial, Helvetica, ans-serif, "Times New Roman"; }
注：在网页上使用最安全的字体是：Arial、Helvetica、Times New Roman、Times、Courier New和Courier，因为几乎所有浏览器和操作系统都支持它们。
2.字体样式：通过这个属性，可以选择正常(normal)、斜体(italic)和倾斜(oblique)(一种类似斜体的效果，通常用于sans-serif字体)显示字体。
.normal { font-style:normal; }
.italic { font-style:italic; }oblique {font-style:oblique; }
3.字体大小：利用前面的度量单位，可以设置字体的固定大小或相对尺寸
p { font-size:14pt; }
h3 { font-size:240%; }
4.字体粗细：制定字体的粗细，一般使用的主要是normal和bold这两个值
.bold { font-weight:bold; }
此外，还可以通过改变文本的修饰、间距和对齐方式等来进一步修改文本的显示样式。
1.文本修饰：通过 text-decoration (文本修饰)属性，可以为文本设置下划线、删除线、上划线、闪烁等效果。
2.设置间距：通过 line-height (行高)属性改变行距、word-spacing(字间距)和 letter-spacing(字符间距)属性改变单词和字符间的距离。
3.对齐方式：通过使用 text-align 属性可设置文本的对齐方式，CSS可用的文本对齐方式有四种：左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。
4.文本转换：通过使用 text-transform 属性进行文本转换，有四种属性来转换文本：无、首写字母大写、大写和小写。
5.文本缩进：通过使用 text-indent 属性可以将一段文本的首行缩进给定的大小。
七、CSS颜色
使用color和backgrounnd-color属性可以为文本和对象设置前景色和背景色。可以用颜色的名称、十六进制的RGB三原色和CSS的rgb函数设置颜色。
1.使用颜色名称：W3C标准化组织定义的标准的16中颜色的名称分别是：aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)
2.使用十六进制RGB：#ff0000、#00ff00、#0000ff等
3.使用rgb函数：rgb(0,255,255)
五、CSS选择符的权重
css中用四位数字表示权重，权重的表达方式如：0，0，0，0
① 标签选择符的权重为0001
② class选择符的权重为0010
③ id选择符的权重为0100
④ 属性选择符的权重为0010
⑤ 伪类选择符的权重为0010
⑥ 伪元素选择符的权重为0001
⑦ 包含选择符的权重：为包含选择符的权中之和 内联样式的权重为1000
扩展知识点：选择器特殊性是如何计算的？
通常，我们使用四个以逗号分隔的数字来表示特殊性，比如:
1. 每个元素或伪元素选择器贡献特殊性为 0，0，0，1
2. 每个类（class）、伪类或者属性选择器的特殊性为 0，0，1，0
3. 每个ID选择器的特殊性为 0，1，0，0
4. 结合符和通配符的对特殊性没有贡献
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
欢迎大家去我的个人技术博客看看，点赞收藏注册的都是好人哦~
https://www.xiaowu.xyz/blog-article/29.html
