柒书
博客
工具
收藏
游戏
博客
工具
收藏
游戏

CSS相关

1.盒模型

盒模型分为区块盒子和行内盒子两种。

核心知识点在于CSS盒模型

定义：CSS盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。

主要有标准盒模型和替代盒模型(也叫怪异盒模型)两种。

以下面的CSS设置为例

div {
    width: 300px;
    height: 100px;
    padding: 20px;
    margin: 20px;
    border: 10px solid gold;
}
  • 标准盒模型的特点
    盒子的实际宽度包含width+padding+border
    盒子的实际高度包含height+padding+border
图1：标准盒模型
图1：标准盒模型
  • 替代盒模型的特点
    盒子的实际宽度等于width，padding+border会占用width
    盒子的实际高度等于height ，padding+border会占用height
图2：替代盒模型
图2：替代盒模型

2.浮动

float属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）

绝对定位：position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处盒子的边界，或者碰到另外一个浮动的元素。

  • 塌陷问题： 浮动之后元素脱离了正常文档流，如果父级没有高度，就会影响父级之后的兄弟元素的布局，
  • 清除浮动：如果浮动元素后面还有其他兄弟元素，其他兄弟元素的布局也会受到影响。可以通过下列方法清除浮动：
    1. 给浮动元素父级增加伪类
    .clearfix::after {      
    content: ''; 
    display: table; 
    clear: both;  
}
    1. 给父元素设置高度
    2. 给父元素设置overflow:visible以外的参数值
    3. 创建一个空白div,添加clear:both属性
    4. 给父级设置display: flow-root

3.样式优先级

定义：浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

下面是不同选择器的权重：
!important > 行内样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器、伪元素选择器 > 通配符选择器 > 继承的样式

实际应用中，需要组合选择器达到想要的结果。

/* 例一：权重高者生效 背景色展示为#fff */
#d2 {
    background: #fff !important;
}

#d2 {
    background: #000;
}
/* 例二：同权重后者覆盖前者 背景色展示为#000 */
#d2 {
    background: #fff !important;
}

#d2 {
    background: #000 !important;
}
/* 例三：组合叠加权重，前者高于后者 背景色展示为#fff */
#d2#d2 {
    background: #fff !important;
}

#d2 {
    background: #000 !important;
}

4.BFC

定义：BFC表示一个“块级格式上下文”，它是一个由块级元素（如div、p 等）组成的区域，决定了这些元素如何进行布局和定位。

下列方式会创建BFC：

  • 文档的根元素（<html>）
  • 浮动元素（即 float 值不为 none 的元素）。
  • 绝对定位元素（position 值为 absolute 或 fixed 的元素）。
  • 行内块元素（display 值为 inline-block 的元素）。
  • 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
  • 表格标题（display 值为 table-caption，HTML 表格标题默认值）。
  • 匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
  • overflow值不为visible或clip的块级元素。
  • display值为flow-root的元素。
  • contain 值为 layout、content 或 paint 的元素。
  • 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）。
  • column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中

特点：

  • 正常情况下区块内容按照从上到下排列
  • 同一个BFC内元素的margin会重叠
    • 解决方法：不想重合时给其中一个再套一层BFC
  • 浮动元素会被包含在BFC内，浮动元素不会与BFC内的元素重叠

5. 水平垂直居中

<!-- Flexbox 布局 -->
<div style="width: 100%; display: flex; justify-content: center; align-items: center;">
    <!-- 内容 -->
</div>
<!-- 表格布局 -->
<div style="display: table;">
    <div style="width: 100%; display: table-cell;">
        <!-- 内容 -->
    </div>
</div>
<!-- 绝对定位 -->
<div style="position: relative;">
    <div style="position: absolute; top: 50%; left: 50%; width: auto; height: auto;">
        <!-- 内容 -->
    </div>
</div>
<!-- 隐藏溢出 -->
<div style="width: 100%; overflow: hidden; height: fit-content;">
    <div style="display: flex; justify-content: center; align-items: center;">
        <!-- 内容 -->
    </div>
</div>