CSS3全览_文本+视觉+盒子+背景颜色

CSS全览_文本+视觉+盒子+背景颜色

目录

• CSS全览_文本+视觉+盒子+背景颜色
  • 1. 文本属性
  • 2. 视觉格式化基础
  • 3. 内边距, 边框, 轮廓和外边距
  • 4. 颜色, 背景和渐变

作者: https://www.cnblogs.com/xiaxiangx/

---

1. 文本属性

文本和内容的区别, 文本是内容, 字体是用于显示内容的

1. 缩进和行内对齐

   • 缩进文本, text-indent: 3em; 可以是负值, 悬挂缩进, 使用负值时需要小心, 可能被浏览器边缘吃掉
   • text-indent 可以使用百分数, 代表父元素宽度的比例, 这个还能继承
   • 文本对齐, text-align, 取值, start, end, left, right, center, justify, match-parent,
   • 对齐最后一行, text-align-last, 取值, auto, start, end, left, right, center, justify, 同时设置 text-align, text-align-last, 后者优先级高

2. 块级对齐

   • 行高, line-height, 能继承, 所有设置的时候父元素设置换算系数较好, line-height: 1; 这样当前元素会根据自身的字号计算行高
   • 纵向对齐文本, vertical-align, 取值: baseline, sub, super, top, text-top, middle, bottom, text-bottom, , , 只用于行内元素和置换元素

3. 单词间距和字符间距

   • 单词间距, word-spacing 可正可负, 表示单词之间的距离, 使用时小心
   • 字符间距, letter-spacing 可正可负
   • word-spacing 的值可能会受到 text-align 的值影响. 原因是text-align 设置两端对齐时, 用户代理会调整单词之间的距离

4. 文本转换

   • text-transform, 转变文本的大小写, 取值 uppercase, lowercase, capitalize( 首字母大写 ), none

5. 文本装饰

   • text-decoration, 取值 none, underline, overline, line-through, blink
   • text-decoration 不被继承, 父元素的下划线跨过了子元素, 取消方法, 在子元素中设置该为 none

6. 文本渲染效果

   • text-rendering, 是一个 SVG 属性, 可取的值, auto, optimizeSpeed, optimizeLegibility, geometricPrecision( 作用不太明显 , 让用户尽量精准地绘制文本)

7. 文本阴影

   • text-shadow, 取值, none, 4个长度, 设置颜色

8. 处理空白

   • white-space , normal, nowrap, pre, pre-wrap, pre-line

     值	空白	换行符	自动换行
     pre-line	折叠	保留	允许
     normal	折叠	忽略	允许
     nowrap	折叠	忽略	禁止
     pre	保留	保留	禁止
     pre-wrap	保留	保留	运行r

   • 设定制表符的宽度

     tab-size, tab-size: 4; 把一个制表符渲染成4个连续空格

9. 换行和断字

   • hyphens, 取值, manual, auto, none, 能被继承

   • 断字还受其他属性的影响, 例如 word-break, 取值, normal, break-all, keep-all( 禁止软换行 )

     值	非CJK	CJK	是否断字
     normal	照常	照常	是
     break-all	任何字符之后	任何字符之后	否
     keep-all	照常	序列两侧	是

   • 对于 CJK 文本, line-break属性, 取值 loose, auto, normal, strict

   • 文本换行, 如果文本超出了容器处理, overflow-wrap( 原 word-wrap ), 取值 normal, break-word(单词内部换行), 与word-wrap效果一样, 用前面最新的

10. 书写模式,

    • 从上到下, 从左到右, 从右到左, 指定模式 writing-mode, 取值 horizontal-tb, vertical-rl, vertical-lr
    • 改变文本方向, 使用 text-orientation, 取值, mixed, upright, sideways
    • 声明方向, direction 和 unicode-bidi, direction 取值 ltr, rtl, *不建议使用这两个, 而是使用 html 的 dir 属性和 元素 *
    • unicode-bidi 取值 normal, embed, bidi-override

---

2. 视觉格式化基础

能判断出所遇到的怪异行为

1. 元素框基础

   • 常规流动, 非置换元素, 置换元素, 根元素(html), 块级框, 行内框, 块级行内框, 容纳块(边界)

2. 调整元素的显示方式

   • display, 可取值分6部分

     display-outside: block, inline, run-in

     display-inside: flow, flow-root, table, flex, grid, ruby

     display-listitem: list-item && ? && [flow | flow-root ]

     display-internal: table ...

     display-box: contents, none

     display-legacy: inline-block, inline-list-item, inline-table, inline-flex, inline-grid

   • 块级框, box-sizing, 取值 content-box, padding-box, border-box, 能设定 width 或 height 的所有元素

   • 横向格式化, box-sizing 默认 content-box, width 宽度为内容区的宽度

   • 横向格式化属性: margin-left, margin-right, border-left, border-right, padding-left, padding-right, width, 其中, 只有width, margin-left, margin-right可以设为auto

   • 使用auto, 没有auto, margin-right 强制设为auto, 有一个auto, 补全尺寸, 有两个auto, 分两种情况, 带宽度,一个auto为0, 宽度补全, 不带宽度, 平分, 三个auto, 外边距为0, width占满.

   • 负外边距, 外边距设负值, 导致子元素比父元素宽

   • 百分数, 边框不接受百分值, 宽度, 内边距和外边距接受

   • 置换元素, 提供一个宽或高, 另一个设为auto

   • 纵向格式化, 如果把 margin-top 或 margin-bottom 设为auto, 二者都自动计算为 0

   • 折叠纵向外边距, 相邻的纵向外边距会折叠. 只有外边距有这种折叠行为

   • 列表项目的记号, 取决于 list-style-position

3. 行内元素

   • 匿名文本, 不在任何行内元素内的字符串, 字体框, 内容区, 行距: font-size - line-height, 行内框, 行框

   • 行内框高度确定步骤

     1. 确定行内各非置换元素和匿名文本的 font-size 和 line-height 值, 后者减去前者, 得到行距. 行距除以 2 , 分别添加到字体框的上部和下部
     2. 确定各置换元素的 height, margin-top, margin-bottom, padding-top, padding-bottom, border-top-width, border-bottom-width 值, 各值相加
     3. 确定各内容区在一行的基线上方和下方分别超出多少. 这不是件简单的事, 你要知道各元素和匿名文本的基线在何处, 以及一行的基线在何处, 然后把它们对齐. 另外, 要把置换元素的底边和一行的基线对齐.
     4. 确定设定了 vertical-align 属性的元素纵向偏移有多少. 这是为了查明元素的行内框向上或向下移动了多少吗因为纵向对齐改变了元素和基线之间的距离.
     5. 知道了所有行内框的位置后, 计算行框的高度: 基线与最高那个行内框顶边之间的距离加上基线与最低那个行内框底边之间的距离.

   • 行内格式化, 所有元素都有 line-height 值. line-height 影响行内元素和其他行内内容.

   • 行内非置换元素, 内容区高度为 font-size, 行内框高度为 line-height

     • vertical-align, 可选值, top, bottom, text-top, text-bottom, middle, super, 让元素行内框对齐所在行框

     • 控制行高, 将 line-height 单位为 em, 这样就不会出现字体重叠

     • 按比例设置行高, 设定 line-height 值的最佳方式是使用纯数字. 这个纯数字相当于比例因子, 这个因子能被继承, 而不计算为具体的值

     • 加上盒模型属性, 边框的边界由 font-size 控制, 而不受 line-height 影响. 内边距也不影响行框的生成和布局方式

     • 改变断行行为, 把一个行内之后元素分成多行显示时, 用户代理将其视为断成多块的一长行, 每换一行就多一快, 可以通过 box-decoration-break 属性改变, 取值 slice, clone, 克隆的话每一行都封闭了

     • 字形和内容区, 行内非置换元素的 "绘制区" 由用户代理确定.

   • 行内置换元素, 置换元素可能增加行框的高度, 但对 line-height 的值没有影响

     • 加上盒模型属性, 行内置换元素的内边距, 边框和外边距会增加行内框的高度, 也可以加入负外边距的效果
     • 行内置换元素与字体基线对齐

   • 行内块级元素, 将行内元素变为块级元素

   • 流动显示方式, flow 和 flow-root, CSS 正在向一种新布局系统发展, 在这个系统中有两种显示类型: 外部显示类型和内部显示类型. flow 关键字表示内部显示类型, flow-root始终生成块级框, 可以作用到 html 上.

   • contents显示方式, 把 display: contents 应用到元素上之后, 那个元素不再参与页面的格式化, 相当于把它的子元素提升到当前的层级

---

3. 内边距, 边框, 轮廓和外边距

每个元素都会生成一个矩形框, 元素框之间是有影响的

1. 基本元素框

   • 宽度和高度, 两个内边距之间的距离

2. 内边距

   • 紧邻元素内容区的是内边距, 位于内容和边框之间, padding, 不能取负值
   • 复值, 上右下左, 缺少一个, 用右代替, 缺少两个, 第一个值表示上下, 而后左右, 缺少三个, 就是上右下左
   • 单边内边距, 内边距的百分数值, 父元素宽度变了, 内边距也会变
   • 上下内边距对视觉效果无影响, 对背景有影响, 左右内边距对视觉效果有影响
   • 内边距对置换元素的行高有影响

3. 边框

   • 边框有三个要素, 宽度, 外观, 颜色
   • 边框样式, 取值, none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset, 多个样式, 和 border-style , 可以写多个值, 单边样式, border-top-style, border-right-style, border-bottom-style, border-left-style
   • 边框宽度, 取值, thin, medium, thick, <length>, 完全没有边框, border-style: none
   • 边框颜色, 透明边框, border-color: transparent
   • 简写的边框属性, border-top, border-right, border-bottom, border-left, 取值, <border-width>, <border-style>, <border-color>
   • 整个边框, border, 取值, <border-width>, <border-style>, <border-color>
   • 行内元素的边框, 对行高没影响, 但是会渲染处理, 左右会挤开, 上下不会, 置换元素上下左右都会被挤开
   • 圆角边框, border-radius, 取值百分比和数值, border-radius: 1em / 2em ; 横向半径是1em, 纵向半径是2em, 单独的圆角属性, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
   • 图像边框
     • 加载和裁剪边框图像, border-image-source: url(circle.png),
     • 裁剪方式, border-image-slice, 最少裁剪出4份放在边框的四个角, 改值为100%时, 表示将整个图像置于四个角, 使用数值偏移时会出现拉伸现象, 但适用于 svg 图像, 一般情况用百分比好, 裁剪后总结部分消失, 取消这一行为需要在末尾加上 fill, border-image-slice: 25 fill;
     • 边框图像都根据 border-width 的值确定边框区域的大小, 假如想让图像的尺寸不同于 border-width 定义的宽度, 适用 border-image-width 属性设定., 它与 border-image-slice 十分相似, 只不过前者裁剪的是边框自身
     • 为了处理大边框图不与内容重叠, 适用 border-image-outset, 把边框图像向边框框外侧推
     • 调整重复方式 border-image-repeat, 防止拉伸, 取值 stretch, repeat, round, space, round:拿各边的边框区域长度除以图像的尺寸, 然后取整为最近的整数, 可能会拉伸或压缩图像, 而 space 不会( 但是有的浏览器不支持 space )
     • 边框图像的简写属性, border-image, 取值, 裁剪, 宽度, 偏移( slice, width, outset), 其余任意,

4. 轮廓

   • outline, 轮廓与边框的区别, 轮廓不占空间, 轮廓可以不是矩形, 用户代理通常在元素处于 :focus 状态时渲染轮廓, 轮廓更极端, 无法单独为一边设置独特的轮廓
   • 轮廓样式, 取值 auto, none, solid, dotted, dashed, double, groove, ridge, inset, outset, 使用 auto 给用户代理留出了足够的*权, 可以实现丰富的轮廓外观, 比如带圆角的外发光轮廓
   • 轮廓宽度, outline-width, thin, medium, thick, <length>, 不是简写属性, 整个轮廓的宽度必须相等
   • 轮廓颜色, outline-color, invert( 颜色反转, 大部分不支持 ),<color> 没有针对单边的属性,
   • 唯一的轮廓简写属性, outline, <outline-color>, <outline-style>, <outline-width>

5. 外边距

   • 常规流动模式下, 元素之间有间隔的原因是元素有外边距
   • 外边距的长度值, 数值, 与内边距类似, 百分数外边距值相对父元素的内容区宽度计算
   • 单边外边距属性可以设置, 外边距折叠, 块级框的上下外边距会折叠
   • 负外边距, 冲出来. 行内元素的外边距, 上下无影响, 左右会被撑开

   能为任何元素设置外边距, 边框和内边距, 是 CSS 超越传统 Web 标记语言的原因之一

---

4. 颜色, 背景和渐变

可以为一个页面或元素应用很多不同的颜色和背景

1. 颜色

   • 前景色, color. 前景色会默认应用到边框上, 根源是 currentColor
   • 对表单元素有的有效, 有的无效, 原因是表单元素是置换元素, CSS无法装饰置换元素的内容, 但有的表单元素可以
   • 继承颜色

2. 背景

   • 包括内容框和内边距, 而边框在背景之上绘制

   • 背景色, background-color

   • 裁剪背景 background-clip, 取值, border-box, padding-box, content-box, text, 默认 border-box, padding-box 不包括边框, text: 把背景裁剪到元素的文本线条. 支持 background-clip: text 这种确切形式, 然而, 几乎每个浏览器都支持 -webkit-background-clip: text

   • 背景图, 任何元素, 不管是块级还是行内都可以有背景图, background-image: url(), 背景相关的属性都不继承, 使用背景图时最好指定背景色, 这样至少能保证文本是可见的

   • 背景定位, background-position, 取值, top, bottom, left, right, center, 其次是长度值, 最后是百分数值, 位置关键字的顺序随意, 一个横向, 一个纵向, 如果只有一个, 另一个默认是center, 经常使用百分比和长度值定位. 使用负值, 可以把源图像拉到元素的背景之外. 改变偏移位, background-position: left 33% top 30px,

   • 改变定位框, background-origin, 取值, border-box, padding-box, content-box, 以哪个的左上角为原点, 默认值是 padding-box, 可以与 background-clip 组合

   • 背景重复方式 ( 或不重复 ), background-repeat, 取值, repeat, no-repeat, space 和 round, 另外 repeat-x 和 repeat-y , 算是其他组合值的缩写

     单个关键值	等效的关键值
     repeat-x	repeat no-repeat
     repeat-y	no-repeat repeat
     repeat	repeat repeat
     no-repeat	no-repeat no-repeat
     space	space space
     round	round round

   • 背景粘附, 阻止背景图随文档一起滚动, background-attachment, 取值: scroll, fixed, local, fixed: 源图像不随文档一起滚动. local: 背景图随内容一起滚动. 固定位置的背景, 其位置相对视区确定, 而非所在的元素, 然而, 背景只在所在的元素中可见.

   • 控制背景图的尺寸, background-size, 取值 <length> , <percentage>, <auto>, cover, contain, 只设置了一个值, 另一个自动设为 auto, auto 做的事情

     1. 如果一个轴的尺寸设为auto, 另一轴不是, 而且图像含有宽高比信息, 那么设为auto的那个轴将根据另一个轴的尺寸和图像的宽高比计算
     2. 如果出于什么原因, 第一步失败了, 但是图像含有尺寸信息, 那么auto将计算为相应轴的固有尺寸.
     3. 如果出于什么原因第一步和第二步都失败了, auto 将解析为 100%

     cover, 等比例缩放, 部分可能超出, contain, 等比例缩放, 不会超出. 尺寸始终相对背景定位区域计算.( background-origin. 与 background-clip 无关)

   • 简写, background, background-size 值必须紧随 background-position 值后面, 而且二者要以一条斜线 (/) 隔开. 第二, 值的常用规则依然适用, 即横向值在前, 纵向值在后, 第三条限制规则是, 如果同时为 background-origin 和 background-clip 提供值, 前一个分配给 background-origin, 后一个分配给 background-clip, 如果只提供一个值, 两个复用 示例

     background: url(yin.pbg) top left/50% 50% padding-box border-box white repeat-y fixed;
     

     必须设的一个值, 颜色, 注意, 简写会覆盖

   • 多个背景,background-image: url(bg01.png),url(bg01.png),url(bg01.png); 分别设置样式, 也是用逗号隔开, 也接受以逗号分割的多个值. 唯一的限制是, 不能为 background-color 指定多个值, 自动补足缺少的值

3. 渐变

   • 线性渐变和径向渐变, 线性渐变, background-image: linear-gradient(purple, gold);

     • 渐变颜色, background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet), 未指明色标的位置时, 各色标均匀分布
     • 定位色标, background-image: linear-gradient(90deg, red, orange 200px, yellow 400px, green 600px, blue 800px) 开头和结尾不需要定位
     • 负值坐标, 多出的裁剪, 百分数值相对梯度线的总长度计算.
     • 没明确指定位置的色标均匀分布
     • 两个颜色定位在一起的话会有 '急变' 效果, 后面色标位置在前面之前, 后面色标位置重置成前面色标
     • 设置中色点, #000 25%, 67%, #666, 中色点和色标是有区别的
     • 梯度线剖析, 梯度线作垂线交于对角点, 作为起点和终点的颜色
     • 梯度线副作用, 第一, 终点的颜色始终从所指象限两侧的一个角延伸到另一个角. 第二, 如果图像的形状变了, 即宽高比变了, 梯度线的方向也会变, 因此渐变线也将改变方向. 第三, 方形渐变图像的梯度线将于一个角相交.

   • 径向渐变

     • 简单的, background-image: radial-gradient(purple, gold);
     • 只有两种可用的形状值, 即 circle 和 ellipse, 尺寸, 可以提供一个值, 也可以提供两个, radial-gradient(50px 100px, purple, gold); 椭圆
     • 使用百分数只能设置椭圆

     设定径向渐变尺寸的关键字,

     closest-side: 径向渐变的形状为圆形时, 梯度射线的末端正好接触渐变图像上距径向渐变中心点最近的那一边. 形状为椭圆时, 梯度射线的末端在横轴和纵轴上都正好接触最近的边.

     farthest-side: 径向渐变的形状为圆形时, 梯度射线的末端正好接触渐变图像上距径向渐变中心点最远的那一边. 形状为椭圆时, 梯度射线的末端在横轴和纵轴上都正好接触最远的边.

     closest-corner: 径向渐变的形状为圆形时, 梯度射线的末端正好接触渐变图像上距径向渐变中心点最近的那一角. 形状为椭圆时, 梯度射线的末端在横轴和纵轴上都正好接触最近的那一角. 而且椭圆的宽高比与设为 closest-side 时一样.

     farthest-corner: 径向渐变的形状为圆形时, 梯度射线的末端正好接触渐变图像上距径向渐变中心点最远的那一角. 形状为椭圆时, 梯度射线的末端在横轴和纵轴上都正好接触最远的那一角. 而且椭圆的宽高比与设为 farthest-side 时一样. 默认值

     • 定向径向渐变, 改变渐变中心

       radial-gradient(at bottom left, purple, gold);
       radial-gradient(at center right, purple, gold);
       radial-gradient(at bottom left, purple, gold);
       radial-gradient(at 30px 30px, purple, gold);
       radial-gradient(at 25% 20px, purple, gold);
       设置尺寸
       radial-gradient(30px 14px at bottom left, purple, gold);
       

     • 多个色标和线性渐变处理方式一样, 0%到100%, 重点就是开始设置的长度

     • 极端情况, 宽或高为0, 暂时不考虑

   • 处理渐变图像, 渐变是图像, 可以作为图像使用

   • 循环渐变, 渐变是图像, 平铺会发生奇怪行为, repeating-linear-gradient, 最后一个色标明确指明了长度( 50px ), 使用平滑过渡最后一个色标的颜色必须和第一个色标的颜色值一致. 在重复线性渐变中使用百分数值, 各色标的位置就像没有重复时一样. 百分数值在循环径向渐变中十分有用

     • 创建循环径向渐变时, 默认为椭圆形, 而且宽高比与渐变图像相同. 如果不使用 background 属性为渐变图像声明尺寸, 默认为目标元素背景区域的尺寸
     • 默认的径向渐变尺寸为 farthest-corner, 即把梯度射线的终点放在右侧足够远的地方, 让椭圆与径向上离径向中心点最远的那一角相交

4. 盒子投影

   • box-shadow, 第一个, 第二个值, 横向和纵向偏移, 第三个定义的是模糊距离, 第四个定义展开距离, inset 表示在投影内部渲染