CSS笔记
CSS笔记
一、基本知识
CSS 指层叠样式表 (Cascading Style Sheets)
1.1 CSS选择器
- 派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
/* 在<li><strong>标签得联合作用下的样式 */
li strong {
font-style: italic;
font-weight: normal;
}- id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。
/* 标签id为red的样式 */
#red {color:red;}
<p id="red">这个段落是红色。</p>- 类选择器 在 CSS 中，类选择器以一个点号显示。
/* 类为center的样式 */
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>- 属性选择器 对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
/* title属性值中包含hello的样式 */
[title~=hello] { color:red; }1.2 创建
- 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>- 内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>- 内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>二、样式
1. 背景
属性 | 描述 |
|---|---|
background | 简写属性，作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动，防止滚动时图形消失 fixed。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景，url(/i/eg_bg_04.gif)。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。（repeat-x、repeat-y、no-repeat） |
2. 文本
CSS中长度单位：
px：像素（Pixel）；em：相对长度单位，相对于当前对象内文本的字体尺寸；pt：点（Point），绝对长度单位；pc：派卡（Pica）；in：英寸（Inch）；mm：毫米；cm：厘米。
1 in = 2.54 cm = 25.4 mm = 72 pt = 6 pc
属性 | 描述 |
|---|---|
color | 设置文本颜色 |
background-color | 设置文本的背景颜色 |
direction | 设置文本方向，ltr默认从左到右、rtl、inherit继承父元素。 |
line-height | 设置行高。 |
letter-spacing | 设置字符间距。 |
text-align | 对齐元素中的文本，默认left，right、center、justify两端对齐。 |
text-decoration | 向文本添加修饰，none、underline、overline、line-through、blink。 |
text-indent | 缩进元素中文本的首行。 |
text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
text-transform | 控制元素中的字母，uppercase、lowercase、capitalize首字母大写。 |
unicode-bidi | 设置文本方向。 |
white-space | 设置元素中空白的处理方式，pre不忽略空白符、nowrap忽略换行、pre-wrap、pre-line。 |
word-spacing | 设置字间距。 |
3. 字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
属性 | 描述 |
|---|---|
font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family | 设置字体系列。 |
font-size | 设置字体的尺寸。 |
font-size-adjust | 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） |
font-stretch | 对字体进行水平拉伸。（CSS2.1 已删除该属性。） |
font-style | 设置字体风格。 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 设置字体的粗细。 |
4. 链接
a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻
/* 使用 */
a:link {color:#FF0000;text-decoration:none;}5. 列表
CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
属性 | 描述 |
|---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
marker-offset |
6. 表格
属性 | 描述 |
|---|---|
border-collapse | 设置是否把表格边框合并为单一的边框。 |
border-spacing | 设置分隔单元格边框的距离。 |
caption-side | 设置表格标题的位置。 |
empty-cells | 设置是否显示表格中的空单元格。 |
table-layout | 设置显示单元、行和列的算法。 |
- 轮廓 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。
属性 | 描述 |
|---|---|
outline | 在一个声明中设置所有的轮廓属性。 |
outline-color | 设置轮廓的颜色。 |
outline-style | 设置轮廓的样式。 |
outline-width | 设置轮廓的宽度。 |
8. js 中获取高/宽
dom.style.width/height
window.getComputedStyle(dom).width/height9. 隐藏模块
- opacity 属性 指定了一个元素的透明度，0：元素完全透明（即元素不可见）；(0.0-1.0)：元素半透明（即元素后面的背景可见）；1：元素完全不透明（即元素后面的背景不可见）。
- z-index 属性
设定了一个定位元素及其后代元素或 flex 项目的 z-order，当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。
可以被设定为关键词 auto 或
<integer>，设置为负数可以降低显示优先级。 - overflow 属性 overflow:hidden——溢出,坍塌,清除浮动
1. 隐藏溢出
当父div拥有固定的高度时
2. 清除浮动
当父元素的高height:auto时
3. 解除坍塌10. :nth-child
这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。
11. vh/vw与%区别
单位 | 依赖于 |
|---|---|
% | 元素的祖先元素 |
vh/vw | 视口高度/宽度的尺寸（横屏/竖屏会自动变化） |
12. export default 和 export 区别
- export 与 export default 均可用于导出常量、函数、文件、模块等
- 你可以在其它文件或模块中通过 import+ (常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
- 在一个文件或模块中，export、import 可以有多个，export default 仅有一个
- 通过 export 方式导出，在导入时要加 { }，export default 则不需要
13. undefined与null的区别
null表示"没有对象"，即该处不应该有值。 undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。
最初的解释：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
14. 击穿Scoped
使用 scoped 后，父组件的样式将不会渗透到子组件中。如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代码将会编译成：
.a[data-v-f3f3eg9] .b { /* ... */ }三、进阶
1. 盒模型
每个盒子有四个边界：
- 内容边界 Content edge：容纳着元素的“真实”内容
- 内边距边界 Padding Edge：扩展自内容区域，负责延伸内容区域的背景
- 边框边界 Border Edge：扩展自内边距区域，是容纳边框的区域
- 外边框边界 Margin Edge：用空白区域扩展边框区域，以分开相邻的元素
标准盒子模型中 content 不包括其他元素，IE盒子模型中 content 包含了 border、padding。
// content-box为标准盒子模型，默认，最后会汇总content + border + padding的值
// border-box为IE盒子模型，内容区的实际宽度是width减去(border + padding)的值
box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px; // 内容的边框大小
padding: 5px; // 定义元素边框与元素内容之间的空间，即上下左右的内边距（简写，可填四个值）2. display 属性 + position属性 + float属性
- display 属性 指定了一个DOM元素说使用的盒子模型（box），即元素应该生成的框的类型。
1. block
div是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器，其他常用的块级元素包括 p、 form和header、 footer、 section等。
2. inline
span是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span>包裹一些文字而不会打乱段落的布局，其他有a元素。
3. none
一些特殊元素的默认display值是它，例如 script 。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和visibility属性不一样，把 display:none 不会保留元素本该显示的空间，但是 visibility:hidden 还会保留。
4. inline-block
同时具有block的宽高特性又具有inline的同行元素特性。
- position 属性 指出一个元素的定位方法。有四种可能值：static、relative、absolute、fixed。
- float 属性 定义元素在哪个方向浮动，用于实现横向多列布局，主要值取 none、left、right。 实际使用参考博客
1. 对元素本身的影响
2. 对父容器的印象
3. 对相邻元素的影响3. 行内元素和块级元素
- 行内元素
display:inline行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效 - 块级元素
display:block块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。 inline-block如input、img，既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。
4. Flex 布局
1）定义
Flex 是 Flexible Box 的缩写，意为"弹性布局"。子元素的float、clear和vertical-align属性将失效。
.box {
display: flex/inline-flex;
}2）概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
3）容器的属性
（1）flex-direction属性 决定主轴的方向（即项目的排列方向）。
// row（默认值）：主轴为水平方向，起点在左端。 （从左到右）
// row-reverse：主轴为水平方向，起点在右端。 （从右到左）
// column：主轴为垂直方向，起点在上沿。 （从上到下）
// column-reverse：主轴为垂直方向，起点在下沿。（从下到上）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}（2）flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
// nowrap（默认）：不换行。 （不换行）
// wrap：换行，第一行在上方。 （正常换行）
// wrap-reverse：换行，第一行在下方。（后来居上）
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}（3）flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}（4）justify-content 定义了项目在主轴上的对齐方式。
// flex-start（默认值）：左对齐
// flex-end：右对齐
// center：居中
// space-between：两端对齐，项目之间的间隔都相等。
// space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}（5）align-items 定义项目在交叉轴上如何对齐。
// flex-start：交叉轴的起点对齐。
// flex-end：交叉轴的终点对齐。
// center：交叉轴的中点对齐。
// baseline: 项目的第一行文字的基线对齐。
// stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}（6）align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
// flex-start：与交叉轴的起点对齐。
// flex-end：与交叉轴的终点对齐。
// center：与交叉轴的中点对齐。
// space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
// space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
// stretch（默认值）：轴线占满整个交叉轴。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
4）项目的属性
（1）order 定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负值。
（2）flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。与其他比例相比。
（3）flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
（4）flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间，且优先级高于width。
.item {
flex-basis: <length> | auto; /* default auto: original size */
}（5）flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
（6）align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}