CSS 总结

公告

Posted on 2022-05-27 07:25 quantumLQ 阅读(48) 评论(0) 编辑收藏举报

TIPS

通过行高等于容器高度实现单行文字垂直居中

box-sizing 盒子边框边距是否影响总尺寸：content-box ：影响。border-box ：不影响。

id不可以取纯数字，必须以字符或下划线开头。

背景渐变色必须添加浏览器私有前缀，否则可能不识别。

浏览器私有前缀（浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加）：

-moz-：代表Firefox浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit: 带阿标Safari、Chrome私有属性（手机端)
-o-：代表Opera 私有属性

定位

position位置

relative：

对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：

对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

绝对定位不占用位置空间。
fixed：

与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

z-index层叠

同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。

top、right、bottom、left边距

该属性用来指定盒子参照相对物顶边界的偏移。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
大概率是相对父容器边界。本组件需position不为static才可设置

布局

display元素形式

none 隐藏元素，不为其保留物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

float浮动

none：设置元素不浮动
left：设置元素浮在左边
right：设置元素浮在右边

clear清除浮动

左边是黄色区域清除浮动，右边黄色区域未添加清除浮动

none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
当一个元素定义了clear值不为none时，可以被用来清除其之前的浮动元素对自身的影响

visibility显示及隐藏

visible：设置对象可视

<div class="s" ></div>

<script>
	$('.s').attr('style','visibility; visible;')

hidden：设置对象隐藏 会为隐藏的元素保留其占据的物理空间
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

overflow 溢出元素内容

visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。
clip：与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动。

尺寸与补白

width、min-width、max-width、height、min-height、max-height

参数为XX%或XXpx（开发像素）

margin外边距

参数为XX%或XXpx（开发像素）

vertical-margin竖直方向外边距

top、bottom、auto

horizontal-margin水平方向外边距

left、right、auto

padding内边距

背景与边框

border边框

		border-color: #000;

      border-width: 2px;

      border-top-style: groovy;

      border-right-style: ridge;

      border-bottom-style: inset;

      border-right-style: outset;

可通过border, borderTop, borderRight, borderBottom, borderLeft分别设置

border-radius设置边框圆角，参数为度数和像素

box-shandow阴影

none：无阴影
①：第 1 个长度值定义元素的阴影水平偏移值。正值，阴影出现在元素右侧；负值，则阴影出现在元素左侧
②：第 2 个长度值定义元素的阴影垂直偏移值。正值，阴影出现在元素底部；负值，则阴影出现在元素顶部
③：第 3 个长度值定义元素的阴影模糊值半径（如果提供了）。该值越大阴影边缘越模糊，若该值为0，阴影边缘不出现模糊。不允许负值
④：第 4 个长度值定义元素的阴影外延值（如果提供了）。正值，阴影将向四面扩展；负值，则阴影向里收缩
color：定义元素阴影的颜色。如果该值未定义，阴影颜色将默认取当前最近的文本颜色
inset：定义元素的阴影类型为内阴影。该值为空时，则元素的阴影类型为外阴影

box-shadow: 5px 5px red;

border-image边框背景图

border-image-source：定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。

border-image-slice：定义元素边框背景图像从什么位置开始分割。

数字：用浮点数指定图像分割的位置。数字代表在图像上的像素位置或向量坐标。不允许负值。
百分比：用百分比指定图像分割的位置。垂直和水平方向的百分比分别参照图片的宽和高进行换算。不允许负值。
fill：保留裁减后的中间区域，其铺排方式遵循border-image-repeat的定义

border-image-width：定义元素边框背景图像厚度。

border-image-outset：定义元素边框背景图像的外延尺寸。

border-image-repeat：定义元素边框背景图像的平铺方式。

background背景

background-image：指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”

background-position：指定背景图像在元素中出现的位置。

background-size：指定背景图像尺寸。

XXpx：用长度值指定背景图像大小。不允许负值。
百分比：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

background-repeat：指定背景图像如何填充。

repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space：当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）

background-attachment：定义滚动时背景图像相对于谁固定。

fixed：背景图像相对于视口（viewport）固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

background-origin：指定背景图像从元素的哪个区域作为显示的原点。

border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。
content-box：从content区域开始显示背景图像。

background-clip：指定背景图像向外裁剪的区域。

border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

background-position：位置

百分比：用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
XXpx：用长度值指定背景图像在元素中出现的位置。可以为负值。
center：背景图像横向或纵向居中。
left：背景图像从元素左边开始出现。
right：背景图像从元素右边开始出现。
top：背景图像从元素顶部开始出现。
bottom：背景图像从元素底部开始出现。

颜色

color颜色

opacity不透明度，范围0到1

linear-gradient渐变色

/* 从上到下，蓝色渐变到红色 */

*linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 /

linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 /

linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

linear-gradient(0deg, blue, green 40%, red);

字体

font-style：指定文本字体样式

normal：指定文本字体样式为正常的字体
italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字

font-variant：指定文本是否为小型的大写字母

normal：正常的字体
small-caps：小型的大写字母字体

font-weight：指定文本字体的粗细

normal：正常的字体。相当于数字值400
bold：粗体。相当于数字值700。
bolder：定义比继承值更重的值
lighter：定义比继承值更轻的值
integer：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-stretch：指定文本字体拉伸变形

normal：正常文字宽度
ultra-condensed：比正常文字宽度窄4个基数。
extra-condensed：比正常文字宽度窄3个基数。
condensed：比正常文字宽度窄2个基数。
semi-condensed：比正常文字宽度窄1个基数。
semi-expanded：比正常文字宽度宽1个基数。
expanded：比正常文字宽度宽2个基数。
extra-expanded：比正常文字宽度宽3个基数。
ultra-expanded：比正常文字宽度宽4个基数。

font-size：指定文本字体尺寸

根据对象字号进行调节。以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)，
相对于父对像中字号进行相对调节。使用成比例的em单位计算。
用长度值指定文字大小。不允许负值。
用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。

line-height：指定文本字体的行高

font-family：指定文本使用某个字体或字体序列

caption：使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）

icon：使用图标标签的字体（CSS2）

menu：使用菜单的字体（CSS2）

message-box：使用信息对话框的文本字体（CSS2）

small-caption：使用小控件的字体（CSS2）

status-bar：使用窗口状态栏的字体（CSS2）

文本

text-transform格式转换

none：无转换
capitalize：将每个单词的第一个字母转换成大写
uppercase：将每个单词转换成大写
lowercase：将每个单词转换成小写
full-width：将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样。这个值通常用于排版拉丁字符和数字等表意符号。（CSS3）

white-space空格处理

normal：默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果
nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示。
pre-wrap：与pre值一致，不同的是文字超出边界时将自动换行。
pre-line：与normal值一致，但是会保留文本输入时的换行

tab-size制表符

参数为长度或整数，用于指定制表符的长度

word-break换行

normal：默认的换行规则。依据各自语言的规则，允许在字间发生换行。
keep-all：对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal
break-all：对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。
break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。这与word-wrap的break-word值效果相同

word-wrap, overflow-wrap文本溢出容器

normal：允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行，如果需要，单词内部允许断行。它要求一个没有断行破发点的词必须保持为一个整体单位，如果当前行无法放下需要被打断的单词，为了保持完整性，会将整个单词放到下一行进行展示。这与word-break的break-word值效果相同

text-align文本对齐

left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。（CSS3）
start：内容对齐开始边界。（CSS3）
end：内容对齐结束边界。（CSS3）
match-parent：这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是 left 和 right 。（CSS3）
justify-all：效果等同于justify，不同的是最后一行也会两端对齐。（CSS3）

text-align-last最后一行对齐方式

auto：无特殊对齐方式。
left：内容左对齐。
center：内容居中对齐。
right：内容右对齐。
justify：内容两端对齐。
start：内容对齐开始边界。
end：内容对齐结束边界。

text-justify定义实现两端对齐的方法

auto：允许浏览器用户代理确定使用的两端对齐法则。
none：禁止两端对齐。
inter-word：通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法，它的两端对齐行为对段落的最后一行无效。
inter-ideograph：为表意字文本提供完全两端对齐，增加或减少表意字和词间的空格。
inter-cluster：调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的
distribute：通过增加或减少字或字母之间的空格对齐文本，适用于东亚文档，尤其是泰国。
kashida：通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

word-spacing单词间隔（参数为长度或百分比）

letter-spacing字母间隔

该属性可以将指定的额外间隙添加到每个字符之后，最后一个单词也会被添加。

text-indent

长度：用长度值指定文本的缩进。可以为负值。
百分比：用百分比指定文本的缩进。可以为负值。
each-line：定义缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响。（CSS3）
hanging：反向所有被缩进作用的行。（CSS3）

vertical-align垂直对齐

baseline：把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：把当前盒的top和父级的内容区的top对齐
text-bottom：把当前盒的bottom和父级的内容区的bottom对齐
middle：把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top：把当前盒的top与行盒的top对齐
bottom：把当前盒的bottom与行盒的bottom对齐
长度：把当前盒提升（正值）或者降低（负值）这个距离，百分比相对line-height计算。当值为0%时等同于baseline。
长度：把当前盒提升（正值）或者降低（负值）这个距离。当值为0时等同于baseline。（CSS2）

line-height 用来指定块容器内行框的最小高度

normal：允许内容顶开或溢出指定的容器边界。
长度：用长度值指定行高。不允许负值。
百分比：用百分比指定行高，其百分比基于文本的font-size进行换算。不允许负值。
乘积：用乘积因子指定行高。不允许负值。

text-size-adjust定义移动端页面中元素文本的大小如何调整

该属性只在移动设备上生效；

如果你的页面没有定义meta viewport，此属性定义将无效；

auto：文本大小根据设备尺寸进行调整。
none：文本大小不会根据设备尺寸进行调整。
百分比：用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

文本装饰

text-decoration文本装饰线

参数[text-decoration-line] || [text-decoration-style] || [text-decoration-color]

text-decoration-line定义元素文本装饰线条位于文本的哪个位置

none：指定文字无装饰
underline：指定文字的装饰是下划线
overline：指定文字的装饰是上划线
line-through：指定文字的装饰是贯穿线
blink：指定文字的装饰是闪烁。

text-decoration-style 定义元素文本装饰线条的形状。

solid：实线
double：双线
dotted：点状线条
dashed：虚线
wavy：波浪线

text-decoration-skip装饰线跳过部分

none：不跳过：文本装饰将绘制在所有文本及原子内联级盒上。
objects：跳过原子内联级盒（例如图片或内联块）
spaces：跳过空白：包括常规空白（U+0020）、制表符（U+0009）以及不间断空格（U+00A0）、表意空格（U+3000）、所有固定宽度空格（U+2000至U+200A、U+202F和U+205F）、以及相邻的字母间隔或单词间隔。
ink：跳过字符绘制处：中断装饰线，以显示文本装饰件将穿过该字形的文本。用户代理可能还会在该字形轮廓的两侧额外的跳过一段距离。
edges：用户代理应当将装饰线的起始、结束放置在文本内容边缘更靠内的位置，使得诸如两个紧密相邻的元素的下划线不会显示为一条下划线。（这在中文里很重要，对于中文，下划线是一种标点符号。）
box-decoration：跳过盒子的 margin, border, padding 区域。需要注意的是，这只针对祖先的装饰效果，装饰盒不会绘制自身的装饰。

text-underline-position定义元素装饰线的位置

auto：用户代理可能会使用任意算法确定下划线的位置。
under：下划线的定位与元素内容盒子的下边缘相关
left：下划线的定位与元素内容盒子的左边缘相关
right：下划线的定位与元素内容盒子的右边缘相关

text-shadow定义文字是否有阴影及模糊效果

none：无阴影
①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
color：设置对象的阴影的颜色。

text-shadow:1px 1px red;

用户界面

box-sizing盒子边框边距是否影响总尺寸

content-box ：影响，对象的实际宽度等于设置的width值和border、padding之和。

border-box ：不影响，对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度。

刷新页面返回顶部

QuantumLQ

当为则为

公告