首页  思维导图  详情

CSS

2020-04-16 11:10:12   1  举报





AI智能生成

前端 CSS 重要概念

前端

CSS

作者其他创作

大纲/内容

一些 CSS 实现的特殊效果

大扩符

html

css

.quote { position: relative; width: 100%; height: 40px; background-color: azure; } .quote::before, .quote::after, .quote ::before, .quote ::after { content: ''; display: block; position: absolute; width: calc(50% - 20px); height: 20px; border-style: solid; border-color: #000; border-width: 0; } .quote ::before, .quote ::after { top: 0; border-bottom-width: 1px; } .quote ::before { left: 0; border-bottom-left-radius: 20px; } .quote ::after { right: 0; border-bottom-right-radius: 20px; } .quote::before, .quote::after { top: 20px; border-top-width: 1px; } .quote::before { left: 20px; border-top-right-radius: 20px; } .quote::after { right: 20px; border-top-left-radius: 20px; }

思路

每个圆角的实现：一个伪元素有一条 border ，此 border 一头的圆角为 50% ； 伪元素宽度的计算：利用 calc() 函数； 四个伪元素的产生：给内外 div 都加上俩伪元素。

https://www.cnblogs.com/arealy/p/7736856.html

特异性/权重计算

[a,b,c,d]

行内样式

id选择器

类名、伪类和属性选择器

标签和伪元素选择器

@规则

条件规则组

这些语句使用相同的语法. 它们都可以包含嵌套语句，或者是 css 规则或者是@规则。 它们都表达：它们所指的条件被评估为 true 或者 false，如果为 true 那么它们里面的语句生效。

@media

@media screen and (min-width: 900px) { article { padding: 1rem 3rem; } }

@supports

@supports (display: flex) {   @media screen and (min-width: 900px) {     article {       display: flex;     }   } }

媒体查询

Media queries are used for the following

To conditionally apply styles with the CSS @media and @import at-rules.

To target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute.

You can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. For example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"

To test and monitor media states using the Window.matchMedia() and  MediaQueryList.addListener() JavaScript methods.

块格式化上下文  Block Formatting Context BFC

块格式化上下文是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

创建 BFC

常见

<ol><li>根元素(<html>) </li><li>浮动元素（元素的 float 不是 none） </li><li>绝对定位元素（元素的 position 为 absolute 或 fixed） </li><li>行内块元素（元素的 display 为 inline-block） </li><li>overflow 值不为 visible 的块元素 </li><li>弹性元素（display为 flex 或 inline-flex元素的直接子元素） </li></ol>

网格与多列布局

<ol><li>网格元素（display为 grid 或 inline-grid 元素的直接子元素） </li><li>多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1） </li><li>column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中 </li></ol>

表格

<ol><li>表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值） </li><li>表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值） </li><li>匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table） </li></ol>

其他

<ol><li>display 值为 flow-root 的元素 </li><li>contain 值为 layout、content或 paint 的元素 </li></ol>

块格式化上下文包含创建它的元素内部的所有内容.

意义

1. 浮动定位与清除浮动 浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。 2. 外边距折叠问题 外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

应用

让父元素包含浮动的子元素

创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto/hidden 等其他的非默认的 overflow: visible 的值。 当你使用这个属性只是为了创建BFC的时候，你可能会发现一些不想要的问题，比如滚动条或者一些剪切的阴影，需要注意。 另外，对于后续的开发，可能不是很清楚当时为什么使用overflow。所以你最好添加一些注释来解释为什么这样做。

避免两个相邻 <div> 之间的外边距合并问题

子主题

CSS 基础框盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子由四个部分（或称区域）组成， 由它们各自的边界（Edge）所定义

内容区域 content area

由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为 content width （或称 content-box 宽度）和 content height（或称 content-box 高度）。 如果元素是块元素且box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。

内边距区域 padding area

由内边距边界限制，扩展自内容区域。它的尺寸是 padding-box 宽度和 padding-box 高度。 内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

边框区域 border area

由边框边界限制，扩展自内边距区域来容纳边框的区域。其尺寸为 border-box 宽度和 border-box 高度。 边框的粗细由 border-width 和简写的 border 属性控制。 如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。 假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。

外边距区域 margin area

由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和 margin-box 高度。 外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。 最后，对于不可替代的行内元素来说，其占用空间（每一行的高度）则由 line-height 属性决定，即使边框和内边距仍会显示在内容周围。

外边距合并

块之间的上下边距有时会合并成边距中最大的单个边距，这种行为称为边界折叠（margin collapsing）。 浮动和绝对定位的元素永远不会产生外边距重叠行为。

形成外边距重叠的三种情况

同一层相邻元素之间

相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。

没有内容将父元素和后代元素分开

如果没有 border，padding，行内内容，也没有创建 块级格式上下文 或 清除浮动 来分开一个块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top； 或没有 边框，内边距，行内内容，高度height，最小高度min-height 或 最大高度max-height 来分开一个块级元素的下边界 margin-bottom 与其内的一个或多个后代后代块元素的下边界 margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠。 重叠的边距会溢出到父级块元素外面。

空的块级元素

If there is no border, padding, inline content, height, or min-height to separate a block's margin-top from its margin-bottom, then its top and bottom margins collapse.

可替换元素

在 CSS 中可替换元素是一种外部对象，它们外观的渲染是独立于 CSS 的。 简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。 某些可替换元素，例如 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。 CSS 能对可替换元素产生的其他影响在于，部分属性可以控制元素内容在其框中的位置或定位方式（见下面的控制内容框中的对象位置）。

可替换元素

典型的可替换元素

仅在特定情况下 被作为可替换元素处理 的元素

HTML 规范也说了 <input> 元素可替换，因为 "image" 类型的 <input> 元素就像<img>一样被替换。 但是其他形式的控制元素，包括其他类型的 <input> 元素，被明确地列为非可替换元素（non-replaced elements）。 该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。 用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。

CSS 与可替换元素

CSS 在某些情况下会对可替换元素做一些特殊处理，比如计算外边距（margin）和一些 auto 的具体值。 需要注意的是，一部分（并非全部）可替换元素，有固有的尺寸或基线（baseline）会被一些 CSS 属性如 vertical-align 用到。 只有可替换元素才有固有尺寸。

控制内容框中的对象位置

某些CSS属性可用于指定可替换元素中包含的内容对象在该元素的盒区域内的位置或定位方式。

object-fit

指定可替换元素的内容对象如何适应于元素盒

object-position

指定可替换元素的内容对象在元素盒区域中的位置

padding

The padding CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

语法

取值

<长度>

固定值

<百分比>

相对于包含块的宽度

background-size

background-size 设置背景图片大小

语法

规定背景的方法

关键词

contain

cover

提供一个宽度值

高度默认为 auto

提供宽度与高度值

第一个设置宽度，第二个设置高度。 每个值可以是长度、百分比或者 auto

值

contain

缩放背景图片以完全装入背景区，可能背景区部分空白。

cover

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

auto

以背景图片的比例缩放背景图片。

指定背景图片大小，不能为负值。

<percentage> 值，指定背景图片相对背景区（background positioning area）的百分比，不能为负值。 背景区由 background-origin 设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。 如果 background-attachment  为 fixed，背景区为浏览器可视区（即视口），不包括滚动条。