首页 思维导图 详情

CSS

2020-04-16 11:10:12 1 举报
AI智能生成
前端 CSS 重要概念
前端
CSS
作者其他创作
大纲/内容
一些 CSS 实现的特殊效果
大扩符
html
<div class="quote">
<div></div>
</div>
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]
a
行内样式
b
id选择器
c
类名、伪类和属性选择器
d
标签和伪元素选择器
@规则
条件规则组
这些语句使用相同的语法. 它们都可以包含嵌套语句，或者是 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
常见
  1. 根元素(<html>)
  2. 浮动元素（元素的 float 不是 none）
  3. 绝对定位元素（元素的 position 为 absolute 或 fixed）
  4. 行内块元素（元素的 display 为 inline-block）
  5. overflow 值不为 visible 的块元素
  6. 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格与多列布局
  1. 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  2. 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  3. column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
表格
  1. 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  2. 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  3. 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
其他
  1. display 值为 flow-root 的元素
  2. contain 值为 layout、content或 paint 的元素
块格式化上下文包含创建它的元素内部的所有内容.
意义
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 能对可替换元素产生的其他影响在于，部分属性可以控制元素内容在其框中的位置或定位方式（见下面的控制内容框中的对象位置）。
可替换元素
典型的可替换元素
  • <iframe>
  • <video>
  • <embed>
  • <img>
仅在特定情况下
被作为可替换元素处理
的元素
  • <option>
  • <audio>
  • <canvas>
  • <object>
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
以背景图片的比例缩放背景图片。
<length>
指定背景图片大小，不能为负值。
<percentage>
<percentage> 值，指定背景图片相对背景区（background positioning area）的百分比，不能为负值。

背景区由 background-origin 设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。
如果 background-attachment  为 fixed，背景区为浏览器可视区（即视口），不包括滚动条。
评论
0 条评论
下一页
为你推荐
查看更多
CSS
CSS
CSS
CSS
css
css
CSS
CSS
CSS
CSS
web前端 HTML5 CSS3 HTML CSS
web前端 HTML5 CSS3 HTML CSS
HTML+CSS项目化内容
HTML+CSS项目化内容
CSS
CSS
CSS
CSS
CSS属性
CSS属性