CSS
2020-04-16 11:10:12 1 举报AI智能生成
前端 CSS 重要概念
作者其他创作
大纲/内容
CSS
一些 CSS 实现的特殊效果
大扩符
html
<div class=\"quote\"> <div></div> </div>
css
思路
每个圆角的实现：一个 伪元素 有一条 border ，此 border 一头的圆角为 50% ；伪元素 宽度的计算：利用 calc() 函数；四个伪元素的产生：给内外 div 都加上俩伪元素。
https://www.cnblogs.com/arealy/p/7736856.html
特异性/权重计算
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.
b style=\"font-size: inherit;\
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 ContextBFC
块格式化上下文 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建 BFC
常见
根元素(<html>)浮动元素（元素的 float 不是 none）绝对定位元素（元素的 position 为 absolute 或 fixed）行内块元素（元素的 display 为 inline-block）overflow 值不为 visible 的块元素弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格与多列布局
网格元素（display为 grid 或 inline-grid 元素的直接子元素）多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
表格
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
其他
display 值为 flow-root 的元素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 属性控制。font color=\"#924517\
外边距区域 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，则就会出现父块元素和其内后代块元素外边界重叠。重叠的边距会溢出到父级块元素外面。
空的块级元素
可替换元素
在 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
语法
取值
<长度>
固定值
<百分比>
相对于包含块的宽度
background-size
background-size 设置背景图片大小
规定背景的方法
关键词
contain
cover
提供一个宽度值
高度默认为 auto
提供宽度与高度值
第一个设置宽度，第二个设置高度。每个值可以是 长度、百分比 或者 auto
值
缩放背景图片以完全装入背景区，可能背景区部分空白。
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
auto
以背景图片的比例缩放背景图片。
<length>
指定背景图片大小，不能为负值。
<percentage>
<percentage> 值，指定背景图片相对背景区（background positioning area）的百分比，不能为负值。背景区由 background-origin 设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果 background-attachment 为 fixed，背景区为浏览器可视区（即视口），不包括滚动条。
职业：本科
0 条评论
回复 删除
下一页
