初学CSS时整理的一些笔记

Intro

CSS即层叠样式表。网页实际上是多层结构，CSS可以对任意层的元素的样式进行设置，但最终只能看到最上面一层。
CSS修改元素样式的第一种方式是内联方式/行内方式：在标签内部通过style属性来设置元素样式名:样式值;，但因为只对一个标签生效不推荐使用
第二种方式是内部样式表，将样式表编写到<head>的<style>中，方便对样式进行复用
第三种方式是外部样式表，<link rel="stylesheet" href="">
添加网页icon的方式，网址+/favicon.ico，<link rel="icon" href="">

CSS语法

/* 注释 */
选择器：通过选择器可以选中网页中的指定元素
声明块：对选择器选中的元素指定设置样式

选择器

元素选择器：p{}
id选择器：#id属性值{}
类选择器：.class属性值{}，一个元素可以有多个class
通配选择器：*{}，选择页面中所有元素
交集选择器：选择器1选择器2选择器n{}，如div.classname{}，元素选择器必须开头
并集选择器/分组选择器：选择器1, 选择器2, 选择器n{}
子元素选择器：父元素 > 子元素{}
后代元素选择器：祖先元素后代元素{}
兄弟元素选择器：前一个 + 下一个{}，选择下一个兄弟，A ～ B，选择A后所有的B
属性选择器：[属性名]，[属性名=属性值]，[属性名^=属性值]选择以指定属性值开头，[属性名$=属性值]选择以指定属性值结尾，[属性名*=属性值]选择含有指定属性值的元素
伪类选择器：伪类是不存在的类，用来描述一个元素的特殊状态，比如父元素 > 子元素:first-child{}表示第一个子元素，:last-child最后一个子元素，:nth-child(n)选中第n个，:nth-child(2n)选中偶数位元素，:nth-child(2n+1)选中奇数位，:first-of-type只在同类型中排序，:last-of-type
否定伪类选择器：:not()，如ul > li:not(:nth-child(3)){}
超链接的伪类：:link表示没访问过的链接（正常链接），:visited表示访问过的链接，由于隐私原因visited此伪类仅能修改颜色，这两个元素仅限超链接元素使用。:hover鼠标移入状态，:active表示鼠标点击
伪元素：表示页面中一些特殊的并不真实存在的元素，::first-letter表示第一个字母，::first-line表示第一行，::selection表示选中的内容，::before和::after必须结合content属性来使用表示元素的开始和最后

选择器的权重

内联样式：1,0,0,0
id选择器：0,1,0,0
类和伪类选择器：0,0,1,0
元素选择器：0,0,0,1
通配选择器：0,0,0,0
继承的样式：没有优先级

内联样式>id选择器>类和伪类选择器>元素选择器，比较优先级时，需要将所有选择器的优先级进行相加计算（并集选择器是单独计算的）。

在某一样式之后添加!important，则该样式会获取到最高优先级。

继承

并不是所有的样式都会被继承，布局和背景等相关元素不会继承。

长度单位

像素：显示器实际上是由一个一个的小点构成的，不同屏幕像素大小是不同的，像素越小的屏幕显示效果越清晰，所以同样的200px在不同的设备下显示效果不一样。
百分比：可以将属性值设置为相对于其父元素的百分比。优点是可以根据父元素的变化而变化。
em：em是相对于元素的字体大小来计算的，1em=1font-size，它会根据字体大小的改变而改变。
rem：rem是相对于根元素的字体大小来计算的。

颜色单位

RGB：rgb()，每种颜色范围在0～255之间
RGBA：a表示不透明度，取值范围在0～1之间，1表示完全不透明，0表示完全透明.5表示半透明
十六进制的RGB：#红色绿色蓝色
HSL（Hue色相，Saturation饱和度，Lightness亮度）：H取值0～360，S取值0～100%，L取值0～100%

布局：文档流（Normal Flow）

网页是一个多层结构，最底下的一层称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列的。

元素在文档流中的特点：

块元素：块元素会在页面中独占一行，是自上向下垂直排列的，默认宽度是父元素的全部，默认高度是被内容或子元素撑开的高度
行内元素：在页面中自左向右水平排列，只占自身的大小，如果一行中无法容纳所有的行内元素，则会换行继续自左向右水平排列，默认的高度和宽度总是被内容或子元素撑开

元素脱离文档流的特点：

块元素：不再独占页面的一行，宽度和高度都默认被内容撑开
行内元素：脱离文档流后会变成上述块元素，特点和上述块元素一样
即元素脱离文档流后，不必区分块元素与行内元素

<a>作为行内元素可以包含块级元素的原因是<a>是transparent，即取决于其父元素能否包裹块元素，如<div><a><div></div></a></div>是可以的。

布局：盒子模型/框模型（Box Model）

CSS将页面中所有的元素都设置为一个矩形的盒子，将元素设置为矩形盒子后，对页面的布局就变成将盒子放置到不同的位置。

组成：

默认情况下可见框的大小，由内容区、内边距和边框共同决定。box-sizing属性用来设置盒子尺寸的计算方式，可选值包括content-box，默认值，宽度和高度用来设置内容区的大小；border-box，宽度和高度用来设置整个盒子可见框的大小。

内容区（content）
所有的子元素和文本内容都在内容区中排列，内容区大小由width、height设置
內边距（padding）
padding:10px;，或单独设置
边框（border）
设置边框至少需要三个样式：border-width、border-color、border-style

设置四个值：上、右、下、左
设置三个值：上、左右、下
设置两个值：上下、左右
单独设置：border-top/right/bottom/left-width/color/style
样式值设置为none时会去除先前设置的样式属性

外边距（margin）
外边距不会影响盒子可见框的大小，但是会影响盒子的位置，margin会影响到盒子实际占用的空间。margin:10px;，或单独设置。
一般情况下，上外边距、左外边距影响本元素位置，下外边距、右外边距影响其他元素的位置。

重叠/折叠：相邻、垂直方向的外边距会发生重叠现象。
兄弟元素间的相邻垂直外边距会取两者之间的较大值（均为正值），若一正一负则去两者的和，若都是负值则取绝对值较大的。
父子元素间的相邻垂直外边距，子元素会传递给父元素（上外边距），父子外边距的折叠会影响到页面布局，需要进行处理。
处理方式包括：

子元素改用padding
父元素加border阻碍相邻

水平方向的布局

一个元素在其父元素中，水平布局必须要满足：
margin-left + border-left + padding-left + width+ padding-right + border-right+ margin-right = 其父元素的宽度

以上等式必须满足，如果结果使等式不成立，则称为过度约束，等式会自动调整。如果这七个值没有为auto的情况，则浏览器会自动调整margin-right。

有三个值可以被设置为auto，width、margin-left、margin-right，会自动调整为auto的值来使等式成立。将两个外边距同时设置为auto时，会使该子元素在其父元素水平居中的位置，如maring:0 auto;（要求内部元素为块级元素且不能脱离文档流）。

垂直方向的布局

默认情况下父元素的高度被内容撑开。如果子元素大小超过了父元素，则子元素会从父元素的外部位置溢出，使用overflow属性（overflow-x、overflow-y）来设置父元素如何处理溢出：

visible，默认值，子元素溢出的部分亦会显示
hidden，不显示
scroll，生成两个滚动条，通过滚动条来查看完整内容
auto，根据需要生成滚动条

文字在父元素中居中的方式

垂直居中：line-height= [height] px;
水平居中：text-align: center;

行内元素的盒模型

行内元素盒模型不支持设置高度和宽度，它的高度和宽度由内容撑开
行内元素可以设置padding，但垂直方向padding不会影响页面布局，可能会直接覆盖住其他元素，border、margin同理
display属性用来设置元素显示的类型，display:block设置为块元素，display:inline-block设置为行内块元素即可以设置宽度和高度但不会独占一行，display:table将元素设置为表格，display:none使元素不在页面中显示
visibility属性，默认是visibility:visible正常显示，visibility:hidden使元素不显示但是还占着其原本的位置

处理浏览器的默认样式

写在最前方以免覆盖：

*{
    margin:0;
    padding:0;
}

ul{
    list-style:none;
}

轮廓、阴影和圆角

outline:30px red solid;，用来设置元素的轮廓线，和边框不同的地方在于不会影响到可见框的大小
box-shadow:10px 10px 50px 0px black;，表示水平偏移量、垂直偏移量、模糊半径、扩展半径和阴影颜色。模糊半径越大，模糊面积越大，阴影也就越淡。扩展半径取正值，阴影扩大，取负值，阴影缩小。
border-radius:设置圆角半径，border-top-left-radius设置左上角圆角半径

浮动

float:none/left/right;，元素设置浮动之后，水平布局的等式不需要强制执行，也会完全从文档流中脱离，不再占用文档流的位置，所以该元素下的还在文档流中的元素会自动向上移动。
如果浮动元素上边是没有浮动的块元素，则其无法上移。浮动元素不会超过它上边的浮动的兄弟元素。
浮动元素不会盖住文字<p>，文字会自动环绕在浮动元素中的周围。
浮动的主要目的是让元素进行水平排列。

高度塌陷问题

浮动布局中，子元素浮动后，父元素无法再被子元素撑开，其下元素上移导致页面布局混乱。

块级格式化环境：BFC（Block Formatting Context）

BFC是一个CSS的隐含属性，为一个元素开启BFC会变成一个独立的布局区域。元素开启BFC后的特点：

开启BFC的元素不会被浮动元素覆盖
开启BFC的元素子元素和父元素外边距不重叠
开启BFC的元素可以包含浮动的子元素

开启元素BFC的方式：

设置元素的浮动
将元素设置为行内块元素
设置元素属性overflow为任何非visible的值，如overflow:hidden（常用）

CLEAR

clear样式的作用：清除浮动元素对当前元素所产生的影响，如clear:left、clear:right、clear:both。clearfix属性可以直接加载内联样式中。
原理：浏览器会自动为该元素设置一个上外边距，使其位置不受其他元素的影响。

利用AFTER伪类

.box1::after{
    content: "";
    /* 默认情况下after伪类是行内元素 */
    display: block;
    clear: both;
}

CLEARFIX：同时解决高度塌陷和外边距重叠问题

.clearfix::before,
.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

定位

利用position属性将元素设置于页面的任意位置。

:static默认，元素静止，没有开启定位
:relative开启元素相对定位
:absolute开启元素绝对定位
:fixed开启元素固定定位
:sticky开启元素粘滞定位

偏移量（offset）

top：定位元素和定位位置上边的距离
bottom
left
right

相对定位

元素开启相对定位以后，如果不设置偏移量不会发生任何变化
相对定位是相对于元素在文档流中的位置进行定位的
相对定位不会使元素脱离文档流
相对定位会提升一个元素层级，使其高于普通文档流中的元素
相对定位不会改变元素的性质，块元素仍然是块元素行内元素仍然是行内元素

包含块（containing box）：

正常情况下，包含块就是离当前元素最近的祖先块元素。
绝对定位的包含块，就是离它最近的开启了定位的祖先块元素，如果所有祖先元素都没有开启定位，则根元素就是它的包含块。

绝对定位

开启绝对定位后，如果不设置偏移量不发生任何变化
绝对定位相对于其包含块进行定位
开启绝对定位后，元素会从文档流中脱离
绝对定位会提升一个元素层级
绝对定位会改变元素的性质，行内元素会变成块元素，块的高度会被内容撑开

固定定位

固定定位也是一种绝对定位。
不同点在于固定定位永远参照于浏览器的视口（浏览器的可视窗口，特定是固定不动）进行定位。

粘滞定位

粘滞定位和相对定位特点基本一致。不同的是粘滞定位可以在元素到达某个位置时将其固定。
粘滞定位的兼容性不好，了解为主。

绝对定位的布局公式

水平：
left + margin-left /right + border-left /right + padding-left / right + width + right = 其包含块的宽度
可以设置auto的值：
margin width left right，其中left和right值默认为auto，如果无auto则自动调整right值
垂直：
top + margin-top / bottom + border-top / bottom + padding-top / bottom + height + bottom = 其包含块的高度
实现元素在包容块中居中的方式：

margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

元素的层级

对于开启了定位的元素，通过z-index属性来指定元素的层级，其参数是一个整数，值越大元素层级越高。
如果元素层级一样，则优先显示靠下的元素，祖先元素的层级再高，“水涨船高”，它也不会盖住后代元素。

字体

字体族

color：设置字体颜色
font-size：设置字体代奥，em相当于当前元素的一个font-size，rem相当于根元素的一个font-size
font-family：字体族（字体格式），可选值为：serif衬线字体，sans-serif非衬线字体，monospace等宽字体。可以同时指定多个字体，生效时优先使用第一个。
font-face可以将服务器中的字体直接提供给用户去使用：

@font-face{
        /* 指定字体名字 */
        font-family:'myfont';
        /* 服务器中字体的路径 */
        src:url();
}

图标字体（iconfont）

在网页中经常需要使用一些利用图片来引入的图标，但由于图片本身较大，可以直接将图标设置为字体然后通过font-face形式对字体进行引入。

通过实体来使用图标字体：&#x图标编码;
如：<div class=“fas”>&#xf441</div>

行高（line height）

行高是指文字占有的实际高度，line-height可以设置为一个大小（px em），也可以设置为整数，表示行高会是字体的整数倍。
使单行文字在一个元素中垂直居中的方式就是将行高和元素高度设为一样的值。
行高经常用来设置文字的行间距，行间距=行高-字体大小。
大部分浏览器的默认行高都是1.33。

字体框

字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度。行高会在字体框的上下平均分配。

字体的简写属性

font:字体大小(/行高倍数) 字体族;，如：
font:bold italic 50px/2 'Times New Roman', Times, serif;

font-size
font-weight，可选值：:normal，:bold加粗，:100-900九个级别（用处不大）
font-style，可选值：:normal，：italic斜体

文本

水平对齐

text-align:

left，左对齐
right，右对齐
center，居中对齐
justify，两端对齐

垂直对齐

vertical-align:

baseline，默认值，基线对齐
top，顶部对齐
bottom，底部对齐
middle，居中对齐，middle中线=(baseline+parent’s x-height)/2

文本样式

text-decoration:

none
underline，underline red dotted
line-through，删除线
overline，上划线

white-space设置网页如何处理空白：

normal
nowrap，不换行
pre，保留空白，就算代码里写的是多个空格，也不会被渲染成一个

text-overflow:ellipsis;给超出的文本设置省略号。

背景

background-color
background-image:url();，大于会有一部分无法显示，小于会铺满
background-repeat，背景重复方式，可选值有repeat、repeat-x、repeat-y、no-repeat
background-position，设置背景图片的位置，可选值top、left、right、bottom、center，也可以设置像素值，定位时需要两个值
background-clip，设置背景的范围，可选值：border-box默认值，背景会出现在边框的下边；padding-box，背景不会出现在边框，只会出现在内容区和内边距；content-box，背景只会出现在内容区
background-origin，背景图片偏移量计算的原点，可选值：padding-box默认值，从内边距开始计算；content-box，背景图片的偏移量从内容区开始计算；border-box，从边框开始计算
background-size:宽度高度;，设置背景图片的大小，cover图片比例不变，将元素铺满；contain图片比例不变，将图片在元素中完整显示
background-attachment，背景图片是否跟随元素移动，scroll，默认值，背景图片会跟随元素移动；fixed，背景图片不会跟随元素移动
background，背景简写属性

雪碧图

解决背景图图片因为缓存而出现的闪烁问题：统一保存到整合图片中，通过background-position设置偏移量来切换显示的图片，被称为CSS-Sprite

渐变

渐变是图片，要通过background-image来设置。

线性渐变

:linear-gradient(50 deg, red, yellow);，可以指定渐变方向，to left、to right、to bottom、to top、xxx deg表示度数、turn表示圈
渐变同时指定的多个颜色默认情况下平均分布，也可以在颜色后指定分布范围大小
:repeating-linear-gradient()，可以平铺的线形渐变达到重复效果

径向渐变

:radial-gradient(red, yellow);
默认情况下径向渐变的形状是根据元素的形状来计算的，也可以指定径的大小和渐变的位置，:radial-gradient(100px 100px at 0px 0px, red, white);

表格

<table>：

<tr>代表一行，
<tr>中的<td>代表一列
<td colspan="2">，横向合并单元格
<td rowspan="2">，纵向合并单元格

表格分为三个部分：

<thead>，<th>表示头部单元格，默认会加粗
<tbody>，如果表格中没有使用tbody而是直接使用tr，浏览器会自动创建tbody将tr放到其中，所以tr不会是table的子元素
<tfoot>
这样代码的位置不会影响表格结构实现

样式

border-spacing，table中指定边框间的距离
border-collapse:collapse;，table中设置边框合并
display:table-cell;，将元素设置为单元格

表单

网页中的表单用于将本地数据提交到服务器。
<input>标签用于搜集用户信息。

action属性，表示表单要提交的服务器的地址，将数据提交到服务器中，必须要为元素指定name属性：

<form action="target.html">
        <input type="text" name="username">
        <br><br>
        <input type="password" name="password">
        <br><br>
        <input type="submit" value="登陆">
</form>

单选按钮：
必须要指定一个value属性，最终会作为用户填写的值，如hello=a，checked表示默认选中状态

<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>

多选框：
<input type="checkbox" name="test" value="1" checked>
下拉列表：selected表示默认选中

<select name="hello">
        <option value="1">选项一</option>
        <option selected value="2">选项二</option>
        <option value="3">选项三</option>
</select>

按钮：

提交按钮，<input type="submit">，或<button type="submit">提交</button>
重置按钮， <input type="reset">，或<button type="rest">重置</button>
普通按钮，<input type="button" value="按钮">，或<button type="button">按钮</button>

<input>属性：

autocomplete="off"，关闭自动补全
readonly，将表单项设置为只读
disable，将表单项设置为禁用
autofocus，设置该表单项自动获取焦点
disabled = "disabled"，为true时该元素被禁用

CSS笔记