常见属性分类

CSS常见属性分类 coderwhy.svg

文本样式：

text-align：

指定行内级元素的水平方向上的对齐方式。不要被这个名字给骗了，以为只有文本。

水平居中：

  • 行内元素：text-align: center;
  • 块级元素：margin: 0 auto;

注意：text-align 是让子元素水平居中，margin 是让自己居中，所以写的位置要注意。

text-indent:

定义一个块元素首行文本内容之前的缩进量。

一般和超链接一起使用：

点击图片就触发的超链接

  1. 可能 a 标签包裹了图片
  2. 或者 a 标签设置为块元素，设置宽高并添加了背景图。

为了 SEO ，超链接一般会设置文字，但是我想要的效果又是点击图片，就触发链接，那文字和图片怎么共存呢？
可以采用第二种背景图的方式，链接的触发区域为 a 标签盒子，里面有背景图，看起来就是在点一张图片。然后文字就可以利用 text-indent 缩进 -9999px，缩进到屏幕外边去隐藏。

  1.  <div class="logo"> 
  2.    <a href="https://www.baidu.com">腾讯游戏</a>
  3. </div>
  5. <style>
  6. .logo a {
  7.     display: block;
  8.     width: 112px;
  9.     height: 39px;
  10.     background-image: url(../img/logo.png);
  11.     /* 让文本缩进到屏幕外，不删除文字为了方便 SEO */
  12.     text-indent: -9999px;
  13.   }
  14. </style>

字体样式：

font-size：

三种单位格式

  1. px
  2. em：相对于从父元素继承下来的字体大小的倍数，谷歌浏览器默认字体大小为16px
  3. 百分比：每个元素不一样，具体查看 mdn 文档。

比如 width 的百分比文档描述：百分比为相对于包裹元素的宽度。
image.png

line-height：

元素中每一行文字所占据的高度。
当文字的行高和容器的高度一致，则文字会垂直居中。

font：

这是一个缩写属性： font-style font-variant font-weight font-size/line-height font-family
规则:
 font-style、font-variant、font-weight可以随意调换顺序，也可以省略
 /line-height可以省略，如果不省略，必须跟在font-size后面
 font-size、font-family不可以调换顺序，不可以省略

最佳实践：font：16px/1.5 微软雅黑。一般就写最后两个属性，文字大小16px，行高为文字大小的1.5倍，字体微软雅黑。

选择器

大致分类：

  • 通用选择器（universal selector）
  • 元素选择器（type selectors）
  • 类选择器（class selectors）
  • id选择器（id selectors）
  • 属性选择器（attribute selectors）
  • 组合（combinators）
  • 伪类（pseudo-classes）
  • 伪元素（pseudo-elements）

组合选择器

  1. 后代选择器
  2. 兄弟选择器

image.png

  1. 交集和并集选择器

image.png

选择器权重

image.png

伪类

什么是伪类？

伪类也是一个类，之所以伪是相对于实实在在写出来的 class 中的类而言的，伪类没有白纸黑字写出来。

我们可以通过普通的类来选中元素，而元素其实是分状态的，伪类就是用来选中不同状态下的元素。

元素的状态是什么？

比如三个div，第一个div鼠标放上去了，它的状态就和另外两个不一样；同样的，鼠标点击第二个div，那它的状态就和另外两个没被点击的状态不一样。
而伪类选择器就能选中处于不同状态下的元素，因为当元素处于这些状态的时候，浏览器会给这些元素加上伪类。

伪类选择器其实都是交集选择器：（两个选择器紧挨着）

  • div:hover {}当鼠标放在 div 元素上时的样式。

元素得是 div 并且鼠标得放在 div 上，两者的交集。

伪类分类

根据伪类的概念，可想而知元素的状态是非常多的。但我们用的最多的还是:hover，其次是:focus。
image.png

动态伪类

 a:link 未访问的链接
 a:visited 已访问的链接
 a:hover 鼠标挪动到链接上(重要)
 a:active 激活的链接（鼠标在链接上长按住未松开）

这么多状态，也不是每个元素都有的，自然不是每个元素都有所有伪类。比如 a 标签拥有所有的动态伪类，但是其他标签就没有。
最通用的估计就是 :hover，:active 也能作用 a 元素以外的元素。:focus 作用于输入框。

伪类是有书写顺序的，动态伪类编写顺序建议为：:link、:visited、:focus、:hover、:active

伪元素

伪元素选择器就是选中一些特定状态下的元素。

伪元素的写法和伪类一样，用冒号开头，但是为了区分，最好伪元素以双冒号开头。

最主要的伪元素有四个：

  • :first-line、::first-line
  • :first-letter、::first-letter
  • :before、::before
  • :after、::after

    ::first-line，::first-letter（了解）

    image.png

    ::before，::after

::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)。

  • 通过 content 属性来为一个元素添加插入的内容。
  • 其他属性添加的样式都是作用在插入内容的。
  • content 不能省去，要不然插入内容的样式全都无法生效。

伪元素默认是行内非替换元素。

css 中引入资源需要使用**url()**函数。

  1. div::before {
  2.   // 插入的内容：引入图片
  3.   content: url(./img/hhh.jpg);
  5.   // 插入的内容的样式
  6.   display: inline-block; // 不转换成行内块，就无法设置宽高
  7.   width: 20px;
  8. }
  10. div::after {
  11.   /* content: ""; */
  13.   // 所有样式无效，因为没有 content 属性
  14.   display: inline-block;
  15.   width: 20px;
  16.   background-color: red;
  17. }

伪元素实现图标插入

图标一般就是通过伪元素实现的插入，尤其是下面这种。
image.png
实现效果的方式有很多种，比如这个“热”，可以在文字后面加 i 标签，插入图标。但是会发现，很多条热搜都需要加，而且这个热搜还是变化的。所以这个实现方式显然不够好。

而通过伪元素的方式，则具备高可扩展性：
我们可以设置一个普通类，然后在这个普通类选中的元素后面插入图标。需要加上图标的热搜，我们就给它的 class 中添加上这个普通类，对元素进行选中。
通过这种方式还可以多写几个普通类，插入不同的图标，比如“爆”、“新”等。当热搜变化时，通过逻辑判断，动态的添加对应 class 类实现图标更换。

位置微调用相对定位很方便。

  1. // “热”图标
  2. .hottest::after {
  3.   content: url(./img/hot.svg);
  5.   // 图标和文字隔开一点距离
  6.   position: relative; // 相对定位
  7.   left: 4px;
  8.   top: 2px;
  9. }
  11. // “新”图标
  12. .latest::after {
  13.   content: url(./img/new.svg);
  15.   position: relative; // 相对定位
  16.   left: 4px;
  17.   top: 2px;
  18. }

css 特性

继承性

一般文本和字体相关的属性具备继承性，具体某个属性，详细的情况可查阅文档。

继承属性继承的是计算值。

比如父元素文字大小 2em，浏览器默认大小是16px，父元素文字大小就是32px。那子元素继承下来的就是计算过的 px 值，而不是 2em。

对于默认不继承的属性，也可以强制继承。
border 默认不继承，强制继承：border: inherit;

层叠性

同一个属性被多次设置会覆盖。

谁覆盖谁？

  1. 选择器权重大就覆盖别人
  2. 权重一样，就后来居上

HTML 元素类型

一个元素在画布中，总会占据空间，而不同元素对于需要的空间是不一样的。
我们知道网页最初是在模仿报纸，报纸标题在一个版面格子中总是占据一整行的。对应的，当初设计标题标签 h1~h6时，我们也希望它能独占一行。有独占一行的元素，自然也设计了不独占一行的元素，以满足一些不太重要的内容进行同一行显示。

这里占据的空间指的是水平方向上的空间，垂直方向上的空间就是元素内容在垂直方向上占据的空间。

基于元素怎么占据版面空间这个问题，HTML 元素就被分成了两种主要类型：行内级元素和块级元素。
浏览器识别到块级元素，就会让它占据一整行。

display

前面我们了解到，元素标签其实是普通盒子+默认样式。样式中表示元素类型的 css 属性就是display。浏览器能识别出div为块级元素，让它独占一行，其实是默认添加了display: block;既然本质是通过display 设置的元素类型，那我们也可以手动修改属性，更换元素类型。

4个常用值：

  • block：让元素显示为块级元素
  • inline：让元素显示为行内级元素
  • inline-block：让元素同时具备行内级、块级元素的特征
  • none：隐藏元素

补充一下：行内块元素。 官方没有行内块元素这种说法。准确地说法是行内可替换元素（inline-replaced）。

行内可替换元素能同行显示并且能设置宽高。

另外给块级元素设置为宽度小于版面宽度，但是元素还是会占据一整行。因为它的 margin 是 auto，auto 的意思就是让浏览器决定。浏览器会设置 margin 撑满一整行。
image.png

注意事项：

  1. p 标签不要包裹 div
  2. 行内级元素不要包裹块级元素

元素隐藏方法

image.png
总结一下：

  1. display 和 visibility 让元素不显示
  2. alpha 只能改背景透明度
  3. opacity 改的是整个元素的透明度，所以能影响子元素

另外背景颜色的默认值为 transparent，它就相当于 rgba(0,0,0,0)。

overflow

overflow 用于控制内容溢出时的行为。

  • visible：默认值，溢出的内容照样可见
  • hidden：溢出的内容直接裁剪不显示
  • scroll：溢出的内容被裁剪，但可以通过滚动机制查看，出现滚动条
    • 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
  • auto：自动根据内容是否溢出来决定是否提供滚动机制，最常用。

CSS样式不生效原因

image.png