CSS基础进阶

最新推荐文章于 2024-04-03 04:40:43 发布

执迷原理

最新推荐文章于 2024-04-03 04:40:43 发布

阅读量71

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/ddd2501/article/details/127639064

版权

1.CSS单位

绝对单位（cm,mm等，开发不会用到，只需要知道有就行）
- 大小是固定的，使用的是物理度量单位，显示效果不会受外界因素影响
相对单位
- 大小不是固定的，一般是相对于其他长度而言（常用相对单位如下）

px	像素
%	百分比
em	1em相当于“当前元素”的字体大小（font-size）
rem	1rem相当于“根元素”的字体大小（font-size）

- 其实还有一些，例如ex、vw、vh等，这些一般用在移动端（到移动开发的时候细说）
- px（像素）（初学者适用）
  - 将图片放大n倍，会发现图片是由许多个小正方形组成的，每一个正方形就是一个像素，如果一台机器的分辨率为“800px×600px”,代表“宽为800个小正方形，高为600个小正方形”
  - 严格来说，px属于相对单位，因为分辨率不同，1px的大小也是不同的
- %（百分比）
  - width、height、font-size的百分比是相对于父元素“相同属性”的值来计算的
  - line-height的百分比是相对于当前元素的font-size值来计算的（line-height比较特殊）
  - vertical-align的百分比是相对于当前元素的line-height来计算的（vertical-align比较特殊）
- em（重点理解）
  - 根据定义理解，如果当前元素的font-size为10px，那么1em就是10px，如果font-size为20px，那么1em就是20px
  - 需要注意的地方：如果当前元素的font-size没有定义，则当前元素会继承父元素的font-size，如果父元素也没有font-size，则当前元素会继承浏览器默认的font-size值，所有浏览器的font-size值都默认为16px
  - 使用em的三个技巧：
    - 首行缩进：text-indent: 2em
    - 使用em作为统一单位：因为font-size有继承的特性，所以只需要将body{font-size:62.5%},就可以实现(1em = 16px * 0.625 = 10px),之后就可以统一在body标签下使用em单位了，非常方便
    - 使用em作为字体大小单位：当我们需要更改页面全部字体的大小时，只需要更改根元素的字体大小即可，非常方便
- rem（重点理解）
  - rem是CSS3新引入的单位，主流浏览器，除了IE8之外，基本上都支持rem，rem布局是移动端最常见的布局方式之一
  - 注意区别em，em是相对于“当前元素”的font-size值，而rem是相当于“根元素”的font-size值

2.CSS特性

继承性（具有继承性的属性有三类）
- 文本相关属性
  - font-family(字体)、font-size（字体大小）、font-style（字体样式）、font-weight（字体粗细）、font（字体集合属性）、line-height（文本行高）、text-align（行内元素及文本水平对齐方式）、 text-indent（文本开头缩进）、word-spacing（文本间隔大小）
- 列表相关属性
  - list-style-image(设置列表项图片样式)、list-style-position(设置相对于列表项的位置)、list-style-type（设置列表项默认样式）、list-style（设置列表项集合属性）
- 颜色相关属性（重点理解a标签）
  - color(设置文本颜色)
  - 这里要特殊注意下a标签，规定color确实是可以继承的，但我们实践发现a标签的文本颜色不能继承父元素或者更上面的元素的颜色，这是因为a标签本身有默认的颜色样式，优先级比继承的颜色属性要高，当然如果需要改变a标签的颜色样式，可以直接指定它改变，也可以改变它的继承性（添加color: inherit）
  - 对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用
CSS的制定者（W3C）规定，只有哪些能够带来书写便利的属性才可以继承，例如：margin/padding/border等一些就不能继承
继承性带来的好处：利用CSS的继承性，我们可以少些好多重复代码，让代码变得精简优雅，提高了代码的可读性和可维护性

3.CSS的层叠性

特性的由来：对同一个元素，重复定义相同属性
层叠性对重复属性的处理：（后来者居上原则）

<style>
    div{color: red;}
    div{color: green;}
    div{color: blue;}
</style>
<body>
    <div>绿叶</div>
    <div>绿叶</div>
    <div>绿叶</div>
</body>
// 最终所有 div 标签的文本都会显示 blue 蓝色，因为CSS层叠性遵循“后来者居上”原则，color:blue是后面设置的，所以将前面设置的全部覆盖

- “后来者居上”原则必须符合三个条件（一定要铭记在心）
  - 元素相同
  - 属性相同
  - 权重相同（重点理解）

<style>
    div{color: red;}
    #second{color:purple}
    div{color: blue;}
</style>
<body>
    <div>绿叶</div> (1)
    <div id="second">绿叶</div> (2)
    <div>绿叶</div> (3)
</body>
// 最终（1）（3）会变成 blue 蓝色 而 （2） 变成 purple 紫色
// 这里（2）就没遵循“后来者居上原则”，因为它的权重更高（id选择器），也就是优先级更高

4.CSS优先级

CSS全称“Cascading Style Sheet(层叠样式表)”，我们需要知道CSS是控制样式的，但是也要理解“层叠”的含义，“层叠”就是说，样式覆盖，当样式的覆盖发生冲突时，以优先级高的为准
对于样式覆盖发生冲突，常见的共有以下5种情况
- 引用方式冲突
  - 3种常见的引入方式：外部样式（外联）、内部样式（内联）、行内样式
    - 外部样式：或者 @import引入
    - 内部样式：
    - 行内样式：
  - 优先级：行内样式 > （内部样式 = 外部样式）
    - 如果内部样式和外部样式同时存在，遵循“后来者居上”原则
- 继承方式冲突（重点理解）
  - 继承方式，就是以离该元素最近的祖父元素为继承对象
    - 如果父元素没有，就往上找，直到找到（没有冲突）
    - 如果父元素和更高层的元素都有，则以离得最近的父元素为继承对象（有冲突），也就是说样式就由父元素的可继承属性决定
- 指定样式冲突(重点理解）

通配符（*）	0
伪元素	1
元素选择器	1
class选择器	10
伪类	10
属性选择器	10
id选择器	100
行内样式	1000

- - 常见的伪元素只有4个：::before、::after、::first-letter、::first-line
    - 伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式
    - 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的选择器之后
    - 伪元素只能应用于块级元素，行内块元素和行内元素都不能用伪元素
  - 常见的伪类有：:hover、:first-child、:link、:visited、:active等
    - 选择器的一种，它用于选择处于特定状态的元素
    - 允许使用在任何元素上
  - 常见的选择器优先级：行内样式 > id选择器 > class选择器 > 元素选择器
  - 总结（一定铭记在心）：在CSS中，选择器权重的计算只针对“指定样式”（当前元素），并不能用于“继承样式”

<style>
    #outer p {  //针对的是元素p （继承样式）
      color: red
      /* 权重为：100+1=101*/
    }
    #outer .inner{ //针对的是class='inner' 的 div （继承样式）
      color:purple
      /* 权重为：100+10=110*/
    }
    #outer p strong{ //针对的是 “当前元素” strong （当前元素）
      color: green;
      /*权重为： 100+1+1=102*/
    }
    #outer p span strong{ //针对的是 “当前元素” strong （当前元素）
      color: blue;
      /*权重为：100+1+1+1=103*/
    }
</style>
<body>
  <div id="outer">
    <div class="inner">
      <span><strong>你好</strong></span>   // “你好”字样被strong元素包裹，所以strong是当前元素，根据“指定样式冲突”，所以最终显示为 blue 蓝色
    </div>
  </div>
</body>

- 继承样式和指定样式冲突
  - 当指定样式和继承样式发生冲突时，指定样式获胜
  - 先考虑“指定样式”，再去考虑“继承样式”

<style>
    #outer p {  // 继承样式
      color: red
      /* 权重为：100+1=101*/
    }
    #outer .inner{ // 继承样式
      color:purple
      /* 权重为：100+10=110*/
    }
    strong{  // 指定样式
      color: blue;
      /*权重为：100+1+1+1=103*/
    }
  </style>
</head>
<body>
  <div id="outer">
    <div class="inner">
      <span><strong>你好</strong></span> // 最终显示 blue 蓝色  指定样式和继承样式发生冲突，指定样式获胜
    </div>
  </div>
</body>