01-CSS – nobility blog

CSS

css使用方式

类别	引入方法	css所在位置	加载
行内样式	html的style属性	html文件内	同时
内部样式	head标签内使用style标签包裹	html文件内	同时
链入式外部样式	head标签内使用link引入css文件	单独的css文件内	同时
导入式外部样式	style标签最上方使用`@import url(css文件地址);`导入css文件，此方式可以在css文件中使用	单独的css文件内	读取完html后加载

若有样式冲突的情况，则是低下的样式将上方的样式覆盖掉，所以行内样式的优先级是最高的，其他的使用方式则是低下覆盖上面，这也符合了层叠样式表的层叠性

css选择器

注意

虽然html不区分大小写，但是class和id选择器属于变量，所以是区分大小写的，命名规则是英文字母、数字、中划线、下划线切不能以数字、下划线、中划线打头

权重

计算css样式权重，就是将这个css样式的所有相同类型选择器个数乘以选择器对应的权重（不会发生进位），之后再将不同选择器的权重相加得到权重，权重相同低下覆盖，权重不同则权重大的显示

全体选择器（0）

标签选择器（1）

类和伪类选择器（10）

id选择器（100）

行内样式（1000）

!important用法

选择器{样式键：样式值 !important;},注意是在样式值后分号前添加该关键字

css三大特性

优先级：优先级高的样式覆盖优先级低的样式
层叠性：优先级相同后面的样式会覆盖前面的样式
继承性：字体样式都可继承，如text-、font-、line-、color（除拉text-decoration）都可以自动继承，其他的也可以设置为inherit手动继承

css中的单位

单位	含义	类型
px	像素，会根据屏幕分辨率而变化	绝对单位
em	相对于自身元素字体大小的倍数（因为子元素会继承父元素的字体大小，也可以说是父元素字体大小倍数）	相对单位
%	相对于包含块的百分比，若是字体则和em一致	相对单位
vw	相对视口宽度，百分数1vw=视窗宽度的1%	相对单位
vh	相对视口高度，百分数1vw=视窗宽度的1%	相对单位
rem	相对根元素的字体大小倍数，即html元素	相对单位

css中的函数

css中的颜色可以使用rgb()、rgba()、hsl()、hsla()、颜色16进制(#开头)、具体颜色名、transparent(透明的)、var()函数定义的颜色常量、甚至可以在这些函数嵌套calc()函数实现动态颜色效果

函数名	描述
`rgb(RED,GREEN,BLUE)`	三原色描述颜色，参数都是0-255的数字，也可是0%-100%百分比，超过或小于都会按照边界算，如360则会转换为255
`rgba(RED,GREEN,BLUE,ALPHA)`	在三原色的基础上增加了透明度，0-1之间
`hsla(HUE,SATURATION)`	色相、饱和度、亮度描述颜色，色相是0-360的数字，饱和度和亮度是0%-100%的百分比
`hsla(HUE,SATURATION,ALPHA)`	在色相、饱和度、亮度的基础上增加了透明度，0-1之间
`attr(attr-name)`	返回该属性的值
`calc(expression)`	加减乘除计算函数，返回计算结果，运算符前后要有空格，除数和乘数不能有单位
`url(URL)`	返回URL地址的资源
`var(property-name[,value])`	返回自定义变量的值，自定义变量一般在全局定义且必须`--`作为前缀；`value`可选，若变量不存在则使用value的值

css盒模型

内容

width和height：设置盒子内容宽高
- auto：自适应宽高，默认
- 具体的宽高
- 百分比宽高，针对父元素的宽度而定
min-width和max-width：限制盒子内容宽高范围min-height和max-height也是同理

边框

属性

border-[width|color|style]：设置四个边框宽度、颜色、样式
- border-[left|right|top|bottom]-[width|color|style]：设置不同方向的边框宽度、颜色、样式
border：设置四个边框的宽度、颜色、样式的简写，不区分先后顺序
- border-[left|right|top|bottom]：设置不同边框的宽度、颜色、样式的简写

属性值

width属性值可选：thin 薄的、medium 中等的、thick 厚的、具体值
color属性值可选：transparent透明的、具体颜色
style属性值可选：solid实线、dashed虚线、dotted点线、double双实线、inset凹、outset凸、groove槽线、ridge脊线、hidden隐藏线、none、没有

内边距

注意

内边距不能为负数，为负数将失效，也不能设置为auto

padding-[top|right|bottom|left]：定义不同方向上的内边距
- 具体宽度
- 百分比宽度
padding：四个方向上内边距简写
- 值1：四个方向
- 值1 值2：上下值1，左右值2
- 值1 值2 值3：上值1，左右值2，下值3
- 值1 值2 值3 值3：上值1，右值2，下值3，下值4

外边距

注意

外边距是可以为负数的，且可以设置为auto

margin-[top|right|bottom|left]：定义不同方向上的外边距
- 具体宽度
- 百分比宽度
- auto：自适应宽高
margin：四个方向上外边距简写
- 值1：四个方向
- 值1 值2：上下值1，左右值2
- 值1 值2 值3：上值1，左右值2，下值3
- 值1 值2 值3 值3：上值1，右值2，下值3，下值4

外边距重叠现象

两个盒子垂直方向相邻的块级元素才会发生外边距显示上的重叠现象，检索元素时外边距的值还是设置的值

兄弟之间：外边距一正一负，取两个的和；外边距都是正数取较大的值；外边距都是负数取绝对值较大值
- 兄弟之间的外边距合并是有利的，也是无法使用转BFC解决的
父子之间：子元素设置上外边距，父元素会因为外边距合并的问题跟着下来，有时父子外边距合并不是有利的就解决它
- 使用父元素的padding代替字元素的margin
- 将父元素设置边框，将相邻的外边距隔开（子元素设置无用）
- 父元素使用overflow:hidden、auto、scroll转换BFC
- 子元素或父元素设置定位为absolute或fixed转BFC
- 父元素或子元素浮动转换BFC
- 父元素或子元素转换行内块、table、table-cell、table-caption转为BFC

完美解决方案

在子元素之前插入一个元素，将父子外边距隔开

.clearfix::before{
  content:'';
  display:table;
  /*black和inline无法隔开，inline-black会有一个字符的高度，所以最好的方法是table*/
}

盒模型分类

共有两种盒模型，W3C标准盒模型和IE盒模型，默认情况下浏览器都是W3C标准和盒模型，区别在于：

IE盒模型在添加内边距和边框时，不会改变元素的占地面积，会将减少内容区域
W3C标准盒模型在添加内边距和边框时，不会减少内容区域，会改变元素的占地面积

box-sizing属性可设置为哪种盒模型

content-box：W3C标准和盒模型
border-box：IE盒模型

盒模型计算

块级元素

对与一个盒模型块级元素来说，它的占地宽度应该是包含块的宽度，应该满足以下公式：

$占地宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距$

默认情况下文档流是从左到右（可以利用html的align属性更改排列方式，不使用css中的text-align才有效，css中的text-align属性无法更改子块元素的排列方式）

对于块级元素来说，就算设置了宽度也是独占一行的，它的占地宽度它包含块宽度，他依然满足上面的公式，若设置的宽度不足以将包含块的一整行撑满或超过包含块宽度，则浏览器会将对外边距进行扩充或负扩充，使公式强制成立；若这其中有一个值是auto则浏览器会扩充auto的值，只有外边距和宽度可以设置为auto，然而扩充的优先级是宽度最高，两侧外边距优先级距相等，所以若想让一个块级元素在包含块中水平居中设置margin: 0 auto;左右边距平分扩充即可

默认外边距、内边距和边框宽度为0，宽度为auto；若设置宽度为auto会将宽度充满包含块；若设置一侧外边距为auto则和设置对齐方式一个效果；若设置一个宽度和一侧外边距为auto，则和对齐方式一个效果；若宽度和两侧外边距都设置为auto，则宽度优先扩充，充满包含块

行内元素

宽高由内容撑开，设置宽高无效
默认margin、border、padding都是0
border、margin、padding水平方向上占据位置，垂直方向上不占据位置，不占据位置则会覆盖掉其他元素，被覆盖的元素使用z-index提升层级是无效的，开启定位提升层级有效
不会发生外边距重叠

元素的显示

display：设置元素显示类型
- none：元素不被显示
- block：以块元素显示
- inline：以行内元素显示
- inline-block：以行内块元素显示
- table：以块级表格显示
- inline-table：以行内表格显示
- table-row：以单元格行显示，类似tr
- table-cell：以单元格形式显示，类似td和th
- list-item：以块级列表显示，类似li，在ul、ol中才会显示项目符号
visibility：元素是否可见
- visible：可见的，默认
- hidden：隐藏的，位置保留，相当于透明度为0
overflow：对溢出部分设置
- visible：可见的，默认
- hidden：隐藏的，裁剪掉溢出部分
- scroll：生成滚动条，可以滚动查看
- auto：溢出生成滚动条，不溢出不会生成滚动条

css样式

css字体样式

font-family：设置字体家族
- 具体字体名，用双引号包裹，多个字体用逗号分隔，表示依次寻找这些字体，若都没有则使用操作系统默认字体
- 字体集
  - serif：衬线字体集，笔画结尾有装饰
  - sans-serif：非衬线字体集，笔画结尾有装饰
  - cursive：手写字体集
  - monospace：等宽字体集
  - fantasy ：艺术字体集
font-size：设置字体大小，默认16px
color：前景色（字体、边框和文本装饰），边框颜色若不设置则也是该属性的值，默认黑色
font-weight：字重，字体粗细
- normal：正常的，400
- bold：加粗的，700
- bolder：更粗的
- lighter：更细的
- 100-900：粗细程度
font-style：字体风格，斜体
- normal：正常的
- italic：斜体
- oblique：倾斜体
font-variant:small-caps：将小写字母转换为小型大写字母
font
- 同时设置font-size和font-family才会起作用，并且font-size必须在font-family之前
- 其他字体样式都应该在font-size之前
- 若设置行高则必须以font-size/line-height斜线分隔开来的形式书写

css文本样式

text-align：子元素水平对齐方式，仅对设置该属性的子元素是文本元素、行内元素和行内块元素有效
- left：左对齐，默认
- right：右对齐
- center：居中对齐
- justify：两端对齐
line-height：设置行高，默认1.2em，使用em或百分比可以实现行高随着字体大小变化而变化，从而解决固定值带来的字体过大导致行与行重叠现象
text-indent：首行缩进，一般习惯两个字体大小，即2em
vertical-align：自身垂直对齐方式，仅对自身是行内元素、行内块元素和单元格中内容（包括子元素）有效
- sub：下标对齐
- super：上标对齐
- top：行顶部
- text-top：顶线对齐
- middle：中线对齐
- baseline：基线对齐，默认
- text-bottom：底线对齐
- bootom：行底部
- 具体值和百分比：正值对于基线上移，负值对于基线下移
word-spacing：单词间距，对空格而言的
letter-spacing：字母间接，对每个字符而言
text-transform：文本大小写
- capitalize：单词首字母大写
- uppercase：全部大写
- lowercase：全部小写
- none：无变化，默认
text-decoration：文本装饰，可设置多个属性
- underline：下划线
- overline：上划线
- line-through：贯穿线，删除线
- blink：文字闪烁，没用
- none：无装饰
white-space：文本空白符处理
- normal：正常的忽略空白符
- pre：保留空白符，与pre标签一样
- nowrap：文本不换行，除非遇到br标签

css背景样式

background-color：设置背景色，默认值transparent，背景颜色包括内边距、内容、边框（边框前景色会遮住背景色）
background-image：设置背景图片，在背景颜色之上，同样包括内边距、内容、边框（边框前景色会遮住背景图片）
- URL()：引入图片资源
- none：没有背景图片，默认
background-position：背景图片相对于容器的定位，定位锚点默认在图片左上角，需要同时设置水平方向和垂直方向，只写一个则另一个方向默认居中
- 设置具体方位词``top|right|bottom|left|center，默认top left`
- 也可以是具体的值和百分比
background-repeat：背景图片不足够大时是否重复设置
- repeat：重复，默认
- no-repeat：不重复
- repeat-x：横向重复
- repeat-y：纵向重复
background-attachment：背景图片附着状态
- scroll：背景随滚动条滚动而滚动，默认
- fixed：背景不随滚动条滚动而滚动，是固定的，添加此属性值会改变定位，相对于整个网页来说的而不是容器
background：设置背景简写，不区分先后顺序

css列表样式

list-style：列表项前面的标记
- none：无标记
- 无序列表
  - disc：实心圆
  - circle：空心圆
  - square：实心方块
- 有序列表
  - decimal：从1开始的整数
  - lower-roman：小写罗马数字
  - upper-roman：大写罗马数字
  - lower-alpha：小写英文字母
  - upper-alpha：大写英文字母
list-style-image：列表项前面标记使用图片
- none：没有标记图片，默认
- URL()：引入图片资源
list-style-position：列表项标记位置
- outside：列表标记在列表文本外部，不会占据文本位置，默认
- inside：列表标记在列表文本内部，会占据文本位置，相对于一个字符但是不可选中和复制
list-style：列表样式简写，不区分先后顺序，同时设置图片图标和默认图标，则图片标记会覆盖掉默认标记

css表格样式

border-spacing：设置边框与边框之间的距离
border-collapse:collapse：单元格边框合并，设置此值后边框距离将失效
vertical-align：设置单元格中内容垂直居中方式，包括子元素，参数详见文本样式
text-align：设置单元格中文字、行内、行内块元素水平居中方式，对于块元素水平居中还是使用margin:0 auto;

浮动

浮动元素的包含快是其最近的块级祖先（inline-block在这种情况也属于块级元素）

float设置浮动
- none：不浮动，默认
- left：左浮动
- right：有浮动

浮动元素特点

任何类型的元素浮动后都会变为特殊的块级元素，不会发生外边距合并，默认宽高由内容撑开，可以设置宽高
脱离正常文档流，不占据文档位置，浮动的块元素不在独占一行，文本、行内、行内块会环绕浮动元素，而不会遮住
浮动元素不会超过包含块左右边界，除拉他本身就比包含块就大的情况或负外边距情况；水平方向上不会与其他浮动元素重叠，顶多挨着；垂直方向上不会超过上一个浮动的兄弟元素的高度；不会越过未浮动的块级元素；

清除浮动

设置此属性后，浏览器自动为该元素设置与浮动元素等高的上外边距，使该元素不再被浮动元素盖住，而是相当于将浮动元素当作块级元素对待

clear：清除浮动元素对自身的影响
- left：清除左浮动元素对自己的影响
- right：清除有浮动元素对自己的影响
- both：清除左右浮动对自己的影响，这取决于左浮动元素高还是右浮动影响高

BFC（块格式化环境）

BFC是CSS中的一个隐含属性，元素开启BFC后，元素内部布局不会影响到外面，外面的布局也不会影响到里面，是一块独立的布局区域

BFC的特点

内容区不会被浮动元素覆盖，宽度足够的情况下会与浮动元素在一行上，这不意味着块级元素不独占一行，只不过浏览器会为BFC元素添加与浮动元素等宽的外边距
与子元素不会发生上外边距重叠问题，因为外边距的重叠问题的前提是相邻，BFC能将内和外环境分开所以不会重叠
子元素浮动，父元素不会高度塌陷，会包裹住浮动的子元素

BFC的开启方式

float设置为非none值
转换为行内块元素、table-cell、table-caption、table
overflow设置非visible值
position为absolute或fixed

高度塌陷问题

由于浮动，子元素与包含快不在一个文档流中，包含快无法检测子元素的高度，而引起的高度塌陷

解决方案

在浮动容器的最后添加一个没有高度的块级元素，使其清除浮动对自己的影响，在原来解决父子元素的外边距合并问题上增加一下代码，这样就既可以解决父子外边距合并问题又可以解决浮动高度塌陷问题了

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

定位

包含块

如果position属性为static 、relative或 sticky，包含块可能由它的最近的祖先块元素（inline-block在这种情况也属于块级元素），所以一般的包含快是最近祖先的块元素或行内块元素的内容区
如果position属性为absolute，包含块就是由它的最近的position的值不是static
如果position属性为fixed，包含块是viewport视口

包含块的影响

为子元素设置百分比的height、top、bottom时是通过包含快height值计算的
为子元素设置百分比的width、left、right、padding、margin是通过包含块的width值计算的
为字体设置百分比与其父元素有关，不一定和包含快有关

开启定位

position：设置定位
- static：静态的，默认，为开启定位
- relative：开启相对定位
- absolute：开启绝对定位
- fixed：开启固定定位
- sticky：开启粘滞定位
left：左偏移量
right：右偏移量
top：上偏移量
bottom：下偏移量
z-index：设置元素层级，要注意父元素无法覆盖子元素

相对定位的特点

未设置偏移量位置不会发生变化，但是元素的层级提升，在浮动元素之上
元素不会脱离文档流，即元素性值不会发生变化
参照点是元素在文档流中原来的位置，原位置保留

绝对定位的特点

未设置偏移量位置不会发生变化，元素层级提升，在浮动元素之上
元素会脱离文档流，不占据文档位置，但是不会像浮动元素那样不重叠，元素性值会发生变化，变为特殊的块元素，默认宽高由内容撑开，可以设置宽高
参照点是包含块，一般子绝父相定位原则

固定定位的特点

固定定位是特殊的绝对定位，只不过参照点变成了浏览器的视口

粘滞定位特点

到达某个偏移量时会像固定定位一样，固定在浏览器视口位置
原位置保留
若最近祖先元素有滚动特性(overflow:scroll)，则不会跟随视口滚动

开启绝对定位的盒模型计算

这个特殊的块级元素，需要在水平方向上的占地宽度应该是包含块的宽度，要满足以下公式：

$占地宽度=左偏移量+左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距+右偏移量$

若设置的宽度不足以将包含块的一整行撑满或超过包含块宽度，则浏览器会将对偏移量进行扩充或负扩充，使公式强制成立；若这其中有一个值是auto则浏览器会扩充auto的值，只有偏移量、外边距和宽度可以设置为auto，然而扩充的优先级是宽度最高，其次是偏移量，再其次是两侧外边距优先级距相等，所以若想让一个开启绝对定位的元素在包含块中水平居中设置margin: 0 auto;left: 0;right: 0;先固定住左右偏移量，左右外边距平分扩充即可

默认外边距、内边距和边框宽度为0，宽度由内容撑开、偏移量为auto；若设置宽度为auto会将宽度充满包含块

这个特殊的块级元素，需要在垂直方向上的占地高度应该是包含块的高度，要满足以下公式：

$占地高度=上偏移量+上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距+下偏移量$

同样的，若设置的高度不足以将包含块的高度撑满或超过包含块高度，则浏览器会将对偏移量进行扩充或负扩充，使公式强制成立；若这其中有一个值是auto则浏览器会扩充auto的值，只有偏移量、外边距和宽度可以设置为auto，然而扩充的优先级是宽度最高，其次是偏移量，再其次是两侧外边距优先级距相等，所以若想让一个开启绝对定位的元素在包含块中垂直居中设置margin: auto 0;top: 0;bottom: 0;先固定住上下偏移量，上下外边距平分扩充即可

默认外边距、内边距和边框宽度为0，宽度由内容撑开、偏移量为auto；若设置宽度为auto会将宽度充满包含块；当同时设置两个方向偏移量冲突时则会忽略一侧的偏移量，只有一侧偏移量生效；