CSS 学习笔记 ｜ 青训营笔记

旺崽
97 阅读5分钟

CSS 学习笔记 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第 3 天💪💪💪

CSS 布局

CSS 布局：

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

块级 vs 行级

块级 Block Level Box行级 Inline Level Box
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆开成多行
使用所有的盒模型盒模型中的width、height不适用

块级元素 vs 行级元素

块级元素行级元素
生成块级盒子生成行级盒子，内容分散在多个行盒中
body、article、div、main、section、h1-6、p、ul、li 等span、em、strong、cite、code 等
display:blockdisplay:inline

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其它元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文 IFC(Inline Formatting Context)

只包含行级盒子的容器会创建一个 IFC

IFC 内的排版规则

  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平堆起
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动 float 元素

示例：

<div>
  This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
  <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
  And <em>Inline Block</em>
</div>

<style>
  div {
    width: 10em;
    //overflow-wrap: break-word;
    background: #411;
  }

  em {
    display: inline-block;
    width: 3em;
    background: #33c;
  }
</style>

块级排版上下文 BFC(Block Formatting Context)

某些容器会创建一个BFC

  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex 子项和 Grid 子项
  • overflow 值不是 visible 的块盒
  • Display:flow-root;

示例：

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>

<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }

  div {
    line-height: 1.5;
    background: lime;
  }
</style>

Flex Box

一种新的排版上下文，它可以控制子级盒子的：

  • 摆放的流向 ( → ← ↑ ↓ )
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

Grid 布局

display: grid

  • display: grid 使元素生成一个块级的 Grid 容器

  • 使用 grid-template 相关属性将容器划分为网格

  • 设置每一个子项占哪些行/列

CSS 浮动

什么是 CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

img {    
    float:right; 
}

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

.thumbnail  {    
    float:left;    
    width:110px;    
    height:90px;    
    margin:5px; 
}

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

.text_line {    
    clear:both; 
}

CSS !important

什么是 !important

CSS 中的 !important 规则用于增加样式的权重。

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

#myid {
  background-color: blue;
}
 
.myclass {
  background-color: gray;
}
 
p {
  background-color: red !important;
}

以上实例中，尽管 ID 选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为红色，因为 !important 规则会覆盖 background-color 属性。

重要说明

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。

当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

以下实例我们在查看 CSS 源码时就不是很清楚哪种颜色最重要：

#myid {
  background-color: blue !important;
}
 
.myclass {
  background-color: gray !important;
}
 
p {
  background-color: red !important;
}

使用建议：

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important

何时使用 !important

如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important。

比如我们要让网站上所有按钮的样式都一样：

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

如果我们将按钮放在另一个具有更优先级的元素中，按钮的外观就会发生变化，并且属性会发生冲突，如下实例：

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
 
#myDiv a {
  color: red;
  background-color: yellow;
}

如果想要设置所有按钮具有相同的外观，我们可以将 !important 规则添加到按钮的样式属性中，如下所示：

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
 
#myDiv a {
  color: red;
  background-color: yellow;
}
avatar
文章
阅读
粉丝