理解CSS（上）（前端青训营第三次笔记）

六十一上人
93 阅读6分钟

理解CSS（上）（前端青训营第三次笔记）

一、CSS选择器的特异度与优先规则

越特殊选择器优先度越高

1. #nav .list li a:link
 
2. .hd ul .links a

对此例有：在1中，id选择器有1个（#nav），类与伪类共有两个（.list与：link），元素与伪元素共两个（li和a），在①中中特异度为122

而2中，id选择器有0个，类与伪类共有两个（.hd与.links），元素与伪元素共两个（ul和a），在①中中特异度为022

即二中的选择器优先级更高。

所以以下这个例子哪条规则生效？

<article>
    <h1 class="title">
        拉森火山国家公园
    </h1>
</article>
<style>
    .title{
        color:blue;
    }
article h1{
    color:red;
}
</style>

==答案明显是red==

tip：我们可以用这一特性进行属性覆盖从而实现代码的重复使用。

举个栗子：
 
<button class="btn">普通按钮 </button>
<button class="btn primary">主要按钮 </button>
 
<style>
.btn {
  display: inline-block; 
  padding: .36em .8em; 
  margin-right: .5em; 
  line-height: 1.5;
  text-align: center; 
  cursor: pointer; 
  border-radius: .3em; 
  border: none; 
  background: #e6e6e6; 
  color: #333;
}
 
.btn .primary { 
  color: #fff;
  background: #218de6;
}
 
</style>

结果如图：img

二、继承

① 某些属性会⾃动继承其⽗元素的计算值，除⾮显式指定⼀个值。

② 一般文字、字体相关属性都可以继承，盒模型宽度、高度、边距等都不可以继承。

1. 显式继承

​ 如果一个属性不可继承，我们可以使用 inherit 这个关键字让它能从父级继承。

举个栗子：
 
// box-sizing 这个属性是不可以继承的。这样设置之后，这个属性就要从父级开始读取。
* {
  box-sizing: inherit;
}
 
// 如果元素不单独设置 box-sizing 这个属性，那么所有元素都继承 html 的 box-sizing 属性。
html {
  box-sizing: border-box;
}

2. 初始值

​ 在 CSS 中，每一个属性都有一个初始值。例如：

// background-color 的初始值为 transparent
background-color: transparent;
 
// margin-left 的初始值为 0
margin-left: 0;

 我们也可以使用 initial 这个关键字显式重置为初始值。

background-color: initial;

此时的 background-color 为 transparent 。

三、CSS 求值过程

img

四、CSS布局（Layout）有关内容

1.布局是什么

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

2.布局相关技术

  1. 常规流
    • 行级
    • 块级
    • 表格布局
    • FlexBox
    • Grid布局
  2. 浮动
  3. 绝对定位

①常规流

  1. width

    • 指定content box宽度
    • 取值为长度、百分数、auto
    • auto由浏览器根据其他的属性确定
    • 百分数相对于容器的content box宽度

  2. height

    • 指定content box高度
    • 取值为长度，百分数，auto
    • auto取值由内容计算而来
    • 百分数相对容器的content box高度
    • 容器有指定高度时，百分数才生效

  3. padding：①指定元素四个方向的内边距②百分数相当于容器宽度

  4. border：指定容器边框样式，粗细和颜色。

  5. margin：①指定元素四个方向的外边距②取值可以是长度，百分数，auto③百分数相对于容器宽度

    使用magin：auto使水平居中

块级vs行级
  • 块级元素 故名思意，它就是占据一个块，也就是它有自己的宽度和高度。
  • 行级元素 就是在一行显示，默认没有高度，如果放得下，多个元素显示在一行。

块级元素： address – 地址 blockquote – 块引用 center – 举中对齐块 dir – 目录列表 div – 常用块级容易，也是 CSS layout 的主要标签 dl – 定义列表 fieldset – form 控制组 form – 交互表单 h1 – 大标题 h2 – 副标题 h3 – 3 级标题 h4 – 4 级标题 h5 – 5 级标题 h6 – 6 级标题 hr – 水平分隔线 isindex – input prompt menu – 菜单列表 noframes – frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容 noscript – 可选脚本内容（对于不支持 script 的浏览器显示此内容） ol – 有序表单 p – 段落 pre – 格式化文本 table – 表格 ul – 无序列表

行级元素：

a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体 (不推荐) bdo – bidi override big – 大字体 br – 换行 cite – 引用 code – 计算机代码 (在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定 (不推荐) i – 斜体 img – 图片 input – 输入框 kbd – 定义键盘文本

label – 表格标签 q – 短引用 s – 中划线 (不推荐) samp – 定义范例计算机代码 select – 项目选择 small – 小字体文本 span – 常用内联容器，定义文本内区块 strike – 中划线 strong – 粗体强调 sub – 下标 sup – 上标 textarea – 多行文本输入框 tt – 电传文本 u – 下划线

行级元素和块级元素可以通过修改 display 来切换，比如

a{display:block}

就可以将超链接设置为块级元素。

3.常规流Normal FLow

将窗体自上而下分成一行一行，块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。 ==脱离文档流==

定义： 元素脱离常规流之后，将不再在常规流中占据空间，而是处于浮动状态（可以理解为漂浮在常规流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在常规流中的其他元素将忽略该元素并填补其原先的空间。 脱离文档流(Normal Flow）的方式 a.浮动（float）

.border1 div {
    border: 1px solid red;
    background-color: aquamarine;
    height: 50px;
    width: 50px;
    margin-bottom: 50px;
    text-align: center;
    line-height: 50px;
    float: left; //向左浮动
 }

设置浮动后： -1.父元素高度塌陷 -2.影响浮动元素后面的元素（后面的元素上浮） -3.自身宽高，变成内容的宽高（没有设宽高时） -4.浮动元素不遮盖内容

img

b.绝对定位 position: absolute

.border1 div {
    border: 1px solid red;
    background-color: aquamarine;
    height: 50px;
    width: 50px;
    margin-bottom: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;//绝对定位
 }

img c.固定定位 position: fixed 和绝对定位 position: absolute效果一致 -1.父元素高度塌陷 -2.元素重叠，因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。 三、文本流（只适用于文本） 四、BFC(Block formatting context): 称为块级格式化上下文，是CSS中的一种渲染机制。它决定了块级元素如何对它的子元素内容进行布局，以及与子元素同级别的兄弟元素的关系和相互作用。 BFC是解决普通文档流的问题：

普通文档流的布局规则：

1、浮动的元素是不会被父级计算高度 2、非浮动元素会覆盖浮动元素的位置 3、margin会传递给父级 4、两个相邻的元素上下margin会重叠

BFC的排版规则：

1、盒子从上到下摆放 3、BFC内盒子的margin不会与外面的合并

2、垂直margin合并 4、BFC不会与浮动元素重合

触发BFC的方式（以下任意一条就可以）

1、float的值不为none 2、overflow的值不为visible 3、display的值为table-cell、table-caption和inline-block之一 4、position的值不为static或者releative中任何一个

此部分引用参考于文章：css布局-文档流（Normal Flow）、BFC[原文链接]: blog.csdn.net/qq_38367703…

avatar
文章
阅读
粉丝