HTML和CSS的选择器

在HTML和CSS中，基本选择器、复合选择器以及伪选择器等都是重要的内容，该导图讲这些内容进行了详细的划分，使您更加容易理解。

CSS选择器

• 引入样式表
  • 1.内联样式表
  • 2.内部样式表
  • 3.外部样式表
• 选择器
  • 基本选择器
    • 1.通用选择器 *
    • 2.元素选择器 h2
    • 3.类选择器 .class
    • 4.id选择器 #id
  • 复合选择器
    • 1.交集选择器 e#id || e.class
    • 2.并集选择器 e1,e2,e3
    • 3.后代选择器 e1 e2 e3
    • 4.子代选择器 e1>e2>e3
    • 5.相邻兄弟选择器 e1+e2
    • 6.通用兄弟选择器 e1~e2
      • 选择位于e1之后，且与e1同级的元素
  • 伪选择器
    • 如何区分伪类选择器和伪元素选择器? 答：CSS引入伪类选择器和伪元素选择器的概念，是为了格式化文档树以外的信息。伪类选择器用于当已有元素处于某个状态时，为其添加样式；伪元素选择器用于创建一些不在文档树的元素，为其添加样式。 伪类选择器是在不创建类的条件下，实现了类的功能；伪元素选择器同理。 ”如无必要，勿增实体。“
    • 伪元素选择器
      • 1 ::first-line
      • 2 ::first-letter
      • 3 ::before; ::after
      • 4 ::selection
    • 伪类选择器
      • 1.动态伪类选择器
        • 1 :link;（链接）未被访问时
        • 2 :visited;（链接）被访问后
        • 3 :hover;
        • 4 :activate 激活时（鼠标按下时）
        • 5 :focus 获得聚焦时
      • 2.UI伪类选择器
        • UI：User Interface, 也就是人机（用户与系统交互）界面。 UI伪类选择器主要应用于表单。
        • 1 :enabled; :disabled
        • 2 :checked
          • <input type="radio" value="man"><span>男</span> 若直接写:checked; 影响的是按钮。 若写成:checked+span; 影响的是文本。
        • 3 :required; :optional
        • 4 :default
          • :default选择器用于表示默认状态的按钮（<input type="button">），radio(<input type="radio">), checkbox (<input type="checkbox">) 或select元素中的option HTML元素(“option”)。
        • 5 :valid; :invalid
        • 6 :in-range; :out-of-range
        • 7 :read-only; :read-write;
          • 注意：如果使用的是FireFox浏览器，需要在样式前面添加前缀-moz-. eg: input:-moz-read-only{} input:read-only{}
      • 3.结构伪类选择器
        • 1 :root根元素选择器
        • 2 :empty 空元素
        • 3
          • :first-child; :last-child; :only-child
          • :first-of-type; :last-of-type; :only-of-type
        • 4
          • :nth-child(); :nth-last-child()
          • :nth-of-type(); :nth-last-of type()
      • 4.其他伪类选择器
        • 1 :target; 页面锚点
        • 2 :lang; 语言
        • 3 :not(selector) 否定选择器
  • 属性选择器
    • 1 [attr]
      • 匹配定义了attr属性的元素，不考虑属性值。 如：[src]
    • 2 [attr="val"]
      • 匹配attr="val"的元素，如class="wood"
    • 3 [attr^="val"]
    • 4 [attr$="val"]
    • 5 [attr*="val"]
    • 6 [attr~="val"]
    • 7 [attr|="val"]

CSS

• 颜色表达
  • RGB (RGBA)
  • HEX
  • HSL (HSLA)
    • HSL: Hue色相（颜色名称）0-360； Saturation饱和度（色彩纯度），百分比 Lightness(色彩明暗程度)，百分比
• 背景
  • background
  • background-color背景色
  • background-image背景图
    • 可以添加多个背景图 图1会覆盖图2 bg-i: url("1.jpg"), url(2.jpg); 背景图会覆盖背景色。
  • background-repeat
    • no-repeat
    • repeat-x
      • 水平重复（图像或被裁剪）
    • repeat-y
      • 垂直重复（图像或被裁剪）
    • space（调整图片间距）
      • 水平或垂直重复，通过调整间距，确保图像不被裁剪
    • round（调整图片大小）
      • 水平或垂直重复，通过调整图像大小，确保图像不被裁剪
  • background-position
    • 注意：这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 中正常工作。
    • （top、left、right、bottom、center）两两组合
    • （x% y%）
    • （x y）
      • 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。
  • background-origion
    • 规定 background-position 属性相对于什么位置来定位。
    • padding-box
    • border-box
    • content-box
  • background-clip
    • background-clip属性指定背景绘制区域。
    • padding-box
    • border-box
    • content-box
  • background-size
    • auto（原尺寸）
    • x,y（宽，高）
    • x%,y%（占父元素的百分比）
    • cover（调整至覆盖整个容器）
    • contain（调整至能被完整显示）
  • background-attachment
    • local（随内容滚动）
    • scroll（不随内容滚动，但随页面滚动）
    • fixed（固定不动，大小不受控制）

盒模型

• 内外边距
  • 百分比为父容器宽度的百分比
  • padding
  • margin
• 边界
  • border 边框
    • border-width
      • thin 定义细的上边框。 medium 默认值。定义中等的上边框。 thick 定义粗的上边框。 length 允许您自定义上边框的宽度。 inherit 规定应该从父元素继承边框宽度。
    • border-color
    • border-style
      • none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。
    • border-raius
      • 写法1： border-radius: 30px,15px;(左上角和右下角是30px,30px；右上角和左下角是15px,15px) 写法2：border-radius: 30px / 15px;(所有边水平30px，垂直15px0) 写法3：30px 50% 3em 15px / 15px 20% 3em 30px(顺时针，左上角为30px，30px)
  • border-image 边框图片
    • border-image-source
    • border-image-slice
    • border-image-width
    • border-image-outset
    • border-image-repeat
      • stretch 拉伸图像来填充区域 repeat 平铺（重复）图像来填充区域。 round 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
  • box-shadow阴影
  • outline 轮廓
    • 轮廓不属于元素尺寸的一部分，不影响原有界面布局; 轮廓不随边框的形状改变而变化，它永远是方的
    • outline-color,style,width
    • outline-offset（轮廓距离边框的外偏移量）
• 尺寸
  • width
  • height
  • min-width（height）
  • max-width（height）
  • 应用场景？
• box-sizing
  • margin-box
  • border-box
  • padding-box
  • content-box
• 溢出
  • overflow
    • auto
    • hidden
    • scroll
    • visible（默认）
    • inherit
  • overflow-x, overflow-y
• display
• margin塌陷问题
  • 垂直塌陷（边界折叠）
  • 嵌套塌陷

位置

• 浮动 (float)
  • 1.浮动元素会脱离正常的文档流。 2.对于文本和行内元素采取的做法：被环绕 （文字会自动避开浮动的元素。） 3.对于块级元素的做法：覆盖
  • 清除浮动的几种方法：
  • 浮动的原理
    • 1.元素浮动后，会脱离文档流，提升层级
    • 2.元素浮动以后的位置受上一个浮动元素的影响，如果上一个元素浮动且后面的位置充足，则在同一行显示；如果后面的位置不充足，则该元素被挤到下一行显示。
    • 3.元素浮动以后，上一个元素没有浮动，则当前元素在自己这一行浮动。
    • 4.如果元素浮动以后被挤到下一行，当前元素的位置受上一个浮动方向相同的元素影响。
  • 注意
    • 1.浮动会导致父元素高度塌陷
    • 2.元素浮动以后具有“包裹性”（类似于行内块。）
• 定位 (position)
  • 属性
    • static（默认，普通布局）
    • relative（相对定位）
      • 提升层级但不脱离文档流， 越晚定位的元素层级越高。
    • absolute（绝对定位）
      • 提升层级且脱离文档流
    • fixed（固定定位）
    • sticky（粘滞定位）
  • 注意
    • 1.越晚定位的元素层级越高（z-index）
    • 2.元素定位以后具有“包裹性”（类似于行内块。）
• 清除浮动：clear

BFC（块级格式化上下文）

• 1.满足以下条件，就会自动创建一个新的BFC
  • float属性不为none
  • position属性不为static或relative
  • overflow属性值不为visible
  • display属性为flex，inline-flex, inline-block, table-cell或table-caption
• 2.BFC规定：margin垂直塌陷、嵌套塌陷
  • 解决方法：将div放入到不同的BFC中
• 3.容纳浮动元素的方法
  • div::after{ content=""; display: block; height: 0px; overflow: hidden; clear: both; }
  • 1.为容器也设置浮动
  • 2.利用clear清除浮动
  • 3.为外层元素创建一个新的BFC
• 4.利用BFC阻止文本环绕

多列布局

• column-count: 指定列数
• column-width: 指定列宽
• columns
• column-gap: 列间距
  • length
  • normal
• column-fill: 内容在列与列之间的分布方式
  • balance（内容均匀分配）
  • auto（内容按顺序填充）
• column-span: 指定元素横向跨多少列
  • number
  • all
• column-rule-width: 指定列之间的宽度
• coloum-rule-style: 指定列之间的样式
• column-rule-color: 指定列之间的颜色
• column-rule
• 案例：瀑布流布局
• 面试题：实现多列布局的几种方法
  • float
  • position
  • column

三位一体网页布局

• 居中布局
  • 行内元素
    • 水平居中: 父元素text-align: center;
    • 垂直居中: line-height: (height);
  • 块级元素
    • 水平居中: margin: 0 auto;
    • 垂直居中:
      • STEP1: position: absolute;
      • STEP2: top,bottom（left,right）: 0;
      • STEP3: margin: auto;
• 单列布局
• 两列布局
  • 两列固定宽度居中布局
  • 侧边栏固定宽度，主内容自适应
    • 使用浮动实现
    • 使用定位实现
• 三列布局
  • 浮动法
  • 绝对定位法
  • margin负值法
  • 经典布局
    • 双飞翼布局
    • 圣杯布局
• 瀑布流布局

负外边距的使用

• 静态元素的负外边距
  • 结论： 设置左侧或上方的负外边距，是将元素自身往左侧或上方移动；设置右侧或下方的负外边距，是让随后的元素从右侧或下方侵入覆盖自己。
  • 顶部和左侧：将元素自身往左上方移动
  • 底部和右侧：让随后的元素从底部或者右侧侵入覆盖自己
• 浮动元素的负外边距
  • 当负值的margin 的方向与浮动流方向一致时，则元素会往对应的方向移动对应的距离。 当负值的margin 的方向与浮动流方向相反时，则元素本身不动，元素之前或者之后的元素会向该元素的方向移动相应的距离。 总结：浮动流不像文档流只是向上和向左，它是可以向左和向右的。
  • 与浮动方向相同：元素往对应的方向移动对应距离
  • 与浮动方向相反：元素本身不动，元素之前或者之后的元素会向该元素的方向移动相应的距离。
• 负外边距的应用
  • 列表的三列布局

弹性盒布局

• display（设为弹性盒）
  • flex;（块级弹性盒）
  • inline-flex;（行内弹性盒）
• flex-wrap（指定元素换行）
  • wrap（指定弹性元素自动换行）
  • nowrap（默认值，不自动换行）
  • wrap-reverse（弹性元素自动反向换行）
• flex-direction（指定元素排列方向）
  • row（默认值，弹性元素水平排列）
  • column（垂直排列）
  • row-reverse（反向水平排列）
  • column-reverse（垂直反向排列）
• 可以合并为flex-flow
• 弹性盒布局的对齐
  • 两个重要概念
    • 主轴：规定了弹性元素排布的顺序。
    • 垂轴：决定了在发生换行后，第二行元素的添加方向。
  • 对齐方式
    • justify-content（主轴上的对齐）
      • flex-start（默认值，弹性元素紧靠主轴起边）
      • flex-end（弹性元素紧靠主轴终边）
      • center（弹性元素在主轴上居中）
      • space-between（均匀排列每个元素，首元素紧靠主轴起边，末元素紧靠主轴终边。）
      • space-around（所有弹性元素均匀排放，元素之间的间距不折叠。）（均匀排列每个元素 每个元素周围分配相同的空间）
      • space-evenly（所有弹性元素均匀排放，元素之间的间距折叠。）（均匀排列每个元素 每个元素之间的间隔相等）
    • 垂轴上的对齐
      • align-items（所有元素垂轴上的对齐）
        • flex-start（弹性元素紧靠垂轴起边）
        • flex-end（弹性元素紧靠垂轴终边）
        • center（弹性元素在垂轴上居中）
        • baseline（弹性元素向基线对齐）
        • stretch（默认值，弹性元素拉伸以占据整个垂轴的尺寸）
      • align-self（某个元素垂轴上的对齐）
      • align-content（多行弹性元素的对齐）
        • flex-start
        • flex-end
        • center
        • space-between
        • spance-around
        • space-evenly
• order（显示顺序）
  • 默认情况下，所有弹性元素的order属性值都是0，这个值越小，显示越靠前。
• 弹性
  • 当弹性容器设置的尺寸小于弹性元素的总尺寸时，浏览器会尽可能压缩弹性元素的空间来阻止溢出。具体压缩多少取决于元素的内容有多少。
  • flex-grow（定义弹性元素被如何放大。）
  • flex-shrink（定义弹性元素如何被压缩）
  • flex-basis（弹性基准）
    • flex-basis设置的是弹性元素在主轴占据的初始尺寸（非宽度）
    • 如果同时设置了flex-basis和width与height，会自动覆盖后者。
  • flex（0 1 auto）
    • 快捷值： 1.auto： 1,1，auto 2.none: 0,0,auto
• 弹性元素的特征
  • 1.两个弹性元素的外边距并不会发生塌陷或者折叠。
  • 2.弹性元素设置浮动是无效的（但是可以设置定位）

栅格布局（网格布局）

• 基本术语
  • Grid Line（栅格线）
  • Grid Track（栅格轨道）
  • Grid Cell（栅格单元）
  • Grid Area（栅格区域）
• display（设为栅格容器）
  • grid
  • inline-grid
• 行&列的定义
  • grid-template-columns
    • fr（eg:1fr 1fr 1fr; 100px 50% 1fr）
  • grid-template-rows
    • fr: 这里的fr按照栅格容器的高度取比例。（没有高度就按照内容的高度来算。）
• 根据区域定义模板
  • grid-template-area： 需要搭配grid-area使用。
    • 注意
      • 1.每行必须用字符串包裹
      • 2.必须为矩形。
    • 技巧
      • ...表示留空