CSS基础分享

Smock
125 阅读12分钟

CSS样式层叠、优先级、继承

层叠：

CSS层叠（Cascading）是指确定应用于元素的样式规则时，浏览器考虑多个来源提供的样式信息，并按照一定的规则将它们组合在一起的过程。CSS层叠机制是由CSS规范定义的，它使得浏览器能够正确地应用样式，并解决了不同来源的样式冲突问题。

优先级：

1. 行内样式大于选择器

2. !important是最高级（一般不用，影响判断）

3. 选择器

  1. ID选择器： #ID{}
  2. class、属性、伪类选择器：.class{} | [title]{} | .class:hover{}
  3. 元素类型、伪类选择器：div{} | div:hover{}

CSS分享_17.png

继承：

如果某个属性没有层叠值，则可能会继承某个祖先元素的值。但不是所有的属性都能被继承。默认情况下，通常是我们希望被继承的一些属性被继承。主要跟文本有关，比如：color，font等。当然有特殊值可以控制：inherit（继承）和 initial（最初的）。

CSS基础框盒模型

CSS基础盒模型是用于布局和渲染HTML元素的基本概念之一。它描述了一个元素在页面上所占据的空间，以及元素的各个部分（内容区、内边距、边框、外边距）的组成。

基础盒模型由以下四个部分组成：

  1. 内容区（Content Area） ：内容区域是指元素内部用于显示实际内容的区域。例如，文本、图像等内容都显示在内容区域内。
  2. 内边距（Padding） ：内边距是围绕在内容区域外部的空白区域，用于控制内容与边框之间的距离。内边距可以通过CSS属性padding来设置。
  3. 边框（Border） ：边框是围绕在内边距外部的线条或样式，用于界定元素的边界。边框可以通过CSS属性border来设置。
  4. 外边距（Margin） ：外边距是围绕在边框外部的空白区域，用于控制元素与其他元素之间的距离。外边距可以通过CSS属性margin来设置。

在CSS中，有两种常见的盒模型：标准盒模型（Content-Box）和IE盒模型（Border-Box）。

  1. 标准盒模型（Content-Box） ：

    • 这是CSS的默认盒模型。在标准盒模型中，元素的宽度和高度指的是内容区的宽度和高度，而内边距（padding）、边框（border）和外边距（margin）都会增加元素的实际尺寸。
    • 设置方式：默认情况下是标准盒模型，无需特别设置。
.box {
  width: 200px; /* 指定内容区域的宽度 */
  padding: 20px; /* 内边距 */
  border: 2px solid black; /* 边框 */
  margin: 10px; /* 外边距 */
}

  1. IE盒模型（Border-Box） ：

    • 在IE盒模型中，元素的宽度和高度包括了内容区、内边距和边框的总和，而外边距不会影响元素的实际尺寸。换句话说，元素的内容区域会被内边距和边框包围。
    • 设置方式：通过设置box-sizing属性为border-box来启用IE盒模型。
.box {
  width: 200px; /* 包含了内容、内边距和边框的宽度 */
  padding: 20px; /* 内边距 */
  border: 2px solid black; /* 边框 */
  margin: 10px; /* 外边距 */
  box-sizing: border-box; /* 启用IE盒模型 */
}

BFC

什么是BFC：

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成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 (en-US) 值不为 auto，且含有 column-count: 1 的元素）。
  • column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）

BFC 的特性：

  • 内部的 Box 会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由 margin 决定
  • bfc 的区域不会与 float 的元素区域重叠。
  • 计算 bfc 的高度时，浮动元素也参与计算
  • bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

css常用单位

  1. 像素（px） ：

    • 像素是相对长度单位，通常用于屏幕上的元素尺寸。它表示屏幕上的一个点，是最常见的单位之一。

  2. 百分比（%） ：

    • 百分比是相对于父元素的长度单位。例如，设置宽度为50%表示元素的宽度将是其父元素宽度的一半。

  3. em（em） ：

    • em是相对长度单位，它的值相对于元素的字体大小。例如，如果元素的字体大小为16px，设置宽度为2em将等同于32px。

  4. REM（rem） ：

    • rem也是相对长度单位，但它的值相对于根元素（html元素）的字体大小。这使得rem更容易进行全局样式调整。

  5. Viewport单位（vw、vh、vmin、vmax） ：

    • Viewport单位是相对于视口大小的单位，其中1vw等于视口宽度的1%。vw表示视口宽度的百分比，vh表示视口高度的百分比，vmin和vmax则根据视口的宽度和高度中较小或较大的值来计算。

常用的布局方式

  1. 浮动布局（Float Layout） ：

    • 通过使用float属性，元素可以沿着父容器的左侧或右侧浮动，从而实现元素的排列。虽然浮动布局在过去被广泛使用，但它存在一些问题，例如清除浮动和塌陷父元素高度等问题，因此现在通常更倾向于使用Flexbox和网格布局。

  2. 弹性盒子布局（Flexbox Layout） ：

    • CSS弹性盒子布局是一种一维布局系统，它使得元素可以沿着水平或垂直方向灵活地排列、对齐和分配空间。Flexbox提供了一系列属性来控制元素在主轴和交叉轴上的布局方式，包括对齐、排序、伸缩等，使得实现复杂的布局变得更加简单和灵活。

  3. 网格布局（Grid Layout） ：

    • CSS网格布局是一种二维布局系统，它允许将页面划分为行和列，并使元素在这些行和列中自由排列。通过定义网格容器和网格项的属性，可以实现复杂的布局结构，包括等宽/不等宽列、自适应布局等，使得实现网页布局变得更加灵活和强大。

flex布局

  1. flex: 1; 是哪些属性缩写。

    flex:1; 是以下三个属性的缩写：

    1. flex-grow
    2. flex-shrink
    3. flex-basis

    这些属性用于控制flex容器中flex项目的扩展、收缩和初始尺寸。

    • flex-grow: 定义了项目的放大比例，默认值为0，表示项目不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，另一个项目的为1，则前者占据的剩余空间将是后者的两倍。
    • flex-shrink: 定义了项目的收缩比例，默认值为1，表示项目在空间不足时会缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，它们将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
    • flex-basis: 定义了项目在主轴方向上的初始大小。它可以是一个固定的长度值（如像素或百分比），也可以是auto，表示由项目的内容决定大小。

    flex:1; 这个简写的意思是，项目在弹性容器中具有相同的放大、收缩比例，并且初始大小为0。这意味着项目会等分剩余空间，并且可以根据需要收缩。

Grid布局

常见的水平垂直居中布局的几种方式

  1. flex布局

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  ...
}

  2. Grid布局

    .container {
  display: grid;
  justify-content: center;
  align-items: center;
}
.item {
  ...
}

  3. 绝对定位配合transform实现

    .container {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  4. 绝对定位配合margin:auto实现. (当元素的尺寸未知或父容器的尺寸不固定时，这种方法可能不太适用)

    .container {
  width: 200px;
  height: 200px;
  position: relative;
}
.item {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

说说设备像素，css像素，设备独立像素，dpr，ppi之间的区别？

这些概念涉及到屏幕分辨率和显示效果的相关性，下面是它们之间的区别：

  1. 设备像素（Device Pixel） ：

    • 设备像素是物理屏幕上的最小显示单元，通常是由硬件决定的。
    • 它们组成了屏幕上的实际图像，通常用于描述硬件的分辨率，例如1920x1080。

  2. CSS像素（CSS Pixel） ：

    • CSS像素是Web开发中用于布局和设计的基本单位。
    • 通常情况下，一个CSS像素对应于一个设备像素，但在高密度屏幕（如Retina显示屏）上，一个CSS像素可能对应多个设备像素。

  3. 设备独立像素（Device-Independent Pixel，也称为密度无关像素） ：

    • 设备独立像素是一个抽象的单位，用于测量在不同屏幕密度下的布局大小。
    • 一般情况下，设备独立像素等同于CSS像素。

  4. 设备像素比（Device Pixel Ratio，DPR） ：

    • 设备像素比是设备像素和设备独立像素之间的比率。
    • 例如，如果一个设备像素对应于一个设备独立像素，则DPR为1；如果一个设备像素对应于两个设备独立像素，则DPR为2。

  5. 每英寸像素密度（Pixels Per Inch，PPI） ：

    • PPI是描述显示屏像素密度的度量单位，表示每英寸（inch）上的像素数量。
    • 通常用于评估屏幕的清晰度和细节程度，PPI越高，屏幕通常越清晰。

总结：

  • 设备像素是硬件层面的概念，用于表示屏幕上的实际像素。
  • CSS像素是Web开发中的基本单位，通常与设备独立像素相对应。
  • 设备独立像素是一个抽象的概念，用于在不同屏幕密度下保持一致的布局。
  • 设备像素比表示设备像素和设备独立像素之间的比率。
  • PPI是描述屏幕像素密度的单位，表示每英寸上的像素数量。

常见问题

说一下你知道的position属性，都有啥特点？

CSS中的position属性用于指定元素在文档中的定位方式，常见的取值包括static、relative、absolute、fixed和sticky，每种取值都有其特点：

  1. static（默认值） ：

    • 静态定位是元素的默认定位方式。元素根据文档流的顺序进行排列，不受top、right、bottom、left等属性的影响。无法使用z-index属性控制层叠顺序。

  2. relative：

    • 相对定位使元素相对于其正常位置进行定位，通过设置top、right、bottom、left属性来调整元素的位置。相对定位不会改变元素在文档流中的位置，但会影响元素周围其他元素的布局。

  3. absolute：

    • 绝对定位使元素脱离文档流，并相对于其最近的已定位的祖先元素（如果没有则相对于初始包含块）进行定位。绝对定位的元素不会影响其他元素的布局，但是会影响其他元素的位置。通常使用top、right、bottom、left属性来确定元素的位置。

  4. fixed：

    • 固定定位使元素相对于视口固定位置，即使页面滚动也不会改变其位置。通常用于创建导航栏、悬浮广告等需要始终保持在屏幕上的元素。

  5. sticky：

    • 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值之前为相对定位，之后为固定定位。通常使用top、right、bottom、left属性来确定阈值和粘性元素的位置。

这些position属性的组合可以实现各种不同的布局效果和交互效果，具体选择哪种方式取决于设计的需求和要实现的效果。

两个div上下排列，都设margin，有什么现象？

  • 都正取大
  • 一正一负相加

问：为什么会有这种现象？你能解释一下吗

是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加

BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。

清除浮动有哪些方法？

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

  • clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：{clear:both;height:0;overflow:hidden;}
  • 给浮动元素父级设置高度
  • 父级同时浮动（需要给父级同级元素添加浮动）
  • 父级设置成inline-block，其margin: 0 auto居中方式失效
  • 给父级添加overflow:hidden 清除浮动方法
  • 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
avatar
文章
阅读
粉丝