CSS基础总结

什么是CSS

CSS是层叠样式表，用于控制网页数据的表现，使得网页数据和表现分离。

CSS引入的四种方式

行内式（内联）
行内式就是在标签内部的style属性编辑控制方式，这种方式，不能体现css的优势，不推荐！

<p style="background-color: rebeccapurple">hello css</p>

嵌入式
嵌入式指的是在head标签中，嵌入style标签控制对应的标签

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        p{ 
            background-color: rebeccapurple; 
         } 
    </style>
</head>

链接式

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="1.css"> 
</head>

导入式
同样在head标签中嵌套style，然后在style里导入css文件链接

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
        @import "1.css"; 
    </style> 
</head>

注意：使用导入式，css是在整个页面都加载后再导入的，这样就可能导致网页在一个短时间内处于杂乱的状态。但是链接式不一样，他是在加载网页内容前，先导入的，所以不存在这个问题。

CSS选择器

基础选择器

*:通用元素选择器，控制所有的标签
*{background-color: rebeccapurple}
E:标签选择器，控制所有该标签的样式 
p*{background-color: rebeccapurple}
.info class选择器 也可以具体指定某个标签下的选择器 
E .class .abc{background-color: rebeccapurple} 
div .abc{background-color: red} 
#info E #info id 选择器。 ID是唯一的，class也可以不唯一。
#abc{background-color: rebeccapurple} 
div #abc{background-color: red}

组合选择器

E,F 多元素选择器，同时控制多个元素。
div,a{background-color: rebeccapurple} 
E F 后代选择器，注意空格。 
E>F 子选择器 
E+F 毗邻选择器，找到紧跟着E后面的F。
注意：后代选择器是包括子孙后代，子选择器只包括子代

属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） 
p[title] { color:#f00; } 

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] 
{ color:#f00; } 

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 
div[class^="test"]{background:#ffff00;} 

E[attr$=val] 匹配属性值以指定值结尾的每个元素 
div[class$="test"]{background:#ffff00;} 

E[attr*=val] 匹配属性值中包含指定值的每个元素 
div[class*="test"]{background:#ffff00;}

伪类
用于给选择器，增加一些效果。

a:link 控制没接触过的链接 
a:hover 鼠标放在上面时 
a:visited 已经访问的链接 
a:active 选定的时候

伪元素
标准的伪元素应该使用::，但单:也行，只是为了兼容。

E:first-letter  向文本的第一个字母添加特殊样式。
E:first-line    向文本的首行添加特殊样式。
E:before    在元素之前添加内容。
E:after 在元素之后添加内容。

CSS的继承和优先级

css继承

所谓的继承就是说父标签的部分属性可以被后代继承，但是这个权重是非常低的，只要是有相同的属性控制，就可以直接被覆盖。有部分属性是无法被继承的:border, margin, padding, background等

css优先级

css优先级是指在多个选择器同时控制同一个标签时，应该选择哪一个。
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符
权重、特殊性计算法：

内联样式表权重为1000
ID，一个ID权重为100
class，权重为10
标签，权重为1

计算方式是逐个累加。比如 div .aaa权重为1+10

!important

有这个声明的优先级是最高的，除非冲突不然无视一切。当冲突时，再使用权重比较。

CSS常用属性

颜色属性

<div style="color:blueviolet">ppppp</div> 
<div style="color:#ffee33">ppppp</div> 
<div style="color:rgb(255,0,0)">ppppp</div> 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

字体属性

font-size: 20px/50%/larger 
font-family:'Lucida Bright' 
font-weight: lighter/bold/border/ 
<h1 style="font-style: oblique">hello</h1>

背景属性

background-color: cornflowerblue;
background-image: url('1.jpg'); 
background-repeat: no-repeat;  (repeat:平铺满) 
background-position: right top（20px 20px);  (横向：left center right) 
(纵向：top center bottom)

文本属性

font-size: 10px; 
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 
text-indent: 150px; 首行缩进 
letter-spacing: 10px; 
word-spacing: 20px; 
text-transform: capitalize;

边框属性

border-color: red; 
border-style: dashed; 
border-width: 1px; 
可以简写为：border：1px dashed 1px

display属性

none 
block 
inline
inline-block 
其中inline-block拼接的两个元素中间有小空隙，可以通过下面的方法去掉 在外层div下，word-spacing: -5px;

外边距，内边距

margin 外边距
padding 内边距
border 边框
content 内容

刻度

在CSS中刻度是用于设置元素尺寸的单位。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

绝对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

动态计算长度值

calc() = calc(四则运算)

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；

文本相对长度单位

em
相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)
浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet，就是所有浏览器内置的默认样式，多数是可以被修改的，但chrome不能直接修改，可以被用户样式覆盖。
rem
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。（相对是的HTML元素的字体大，默认16px）

盒模型

CSS盒子模型：网页设计中CSS技术所使用的一种思维模型。
CSS盒子模型组成：外边距（margin）、边框（border）、内边距（padding）、内容（content）。
CSS盒子模型分为：标准W3C盒子模型，IE盒子模型，注意在两种模型中宽（width）和高（height）包括属性的不同。

W3C模型中
CSS中的宽（width）=内容（content）的宽
CSS中的高（height）=内容（content）的高

W3C盒模型

IE模型中
CSS中的宽（width）=内容（content）的宽+（border+padding）* 2
CSS中的高（height）=内容（content）的高+（border+padding）* 2

IE盒模型

在代码顶部加如下的 doctype 声明

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

使页面以W3C盒子模型渲染。

box-sizing属性

content-box
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
border-box
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

css绘图

根据盒模型，设置content为0，展示border，通过控制隐藏部分边框，绘制三角形、梯形。

外边距叠加

在CSS中，两个或多个毗邻的标准流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。

毗邻
毗邻说明了他们的位置关系，没有被padding、border、clear和line box分隔开。
两个或多个
两个或多个盒子是指元素之间的相互影响，单个元素不会存在外边距叠加的情况。
垂直方向
只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。
标准流
元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。只要不是float、absolutely positioned和root element时就是标准流。

解决外边距叠加

浮动元素不会与任何元素发生叠加，也包括它的子元素
创建了BFC的元素不会和它的子元素发生外边距叠加
绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
普通流中的块级元素的margin-bottom永远和它相邻的下一个块级元素的margin-top叠加，除非相邻的兄弟元素clear
普通流中的块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加
普通流中的块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个* * 普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加
如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加

BFC与IFC

BFC（Block Formatting Context）即“块级格式化上下文”。
IFC（Inline Formatting Context）即行内格式化上下文。
常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。

BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

如何产生BFC

如何产生BFC
当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

float的值不为none
overflow的值不为visible
display的值为table-cell, table-caption, inline-block中的任何一个
position的值不为relative和static

CSS3触发BFC方式则可以简单描述为：在元素定位非static,relative的情况下触发，float也是一种定位方式。

BFC的作用与特点

不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖
清除元素内部浮动，计算浮动元素的高度
外边距将不再与上下文之外的元素折叠
元素会一个接一个地被垂直放置，它们的起点是一个包含块的顶部（文字不会环绕布局）

定位

position

static
可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。
relative
相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute
绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素(position的属性值为非static)，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed
固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
center
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
page
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
sticky
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

z-index属性

z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
当多个元素层叠在一起时，数字大者将显示在上面。

auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
整数：用整数值来定义堆叠级别。可以为负值。说明：
检索或设置对象的层叠顺序。

:target伪类

E:target { css }
URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。只有支持CSS3的浏览器可用。

float浮动

float取值

none：设置对象不浮动，默认值
left：设置对象浮在左边
right：设置对象浮在右边

float的特性

浮动元素会从标准流中脱离
浮动元素会触发BFC（块级元素格式化）、不影响外边距折叠
float元素会变成块标签
如果float不是none，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值。
float在绝对定位和display为none时不生效
当display为none时元素会隐藏，所以float意义不大；当position为absolute绝对定位时元素也将从标准流中脱离，元素使用偏移量移动，float特性无效。
浮动元素间会堆叠
浮动元素不能溢出包含块
浮动元素在包含块内，当包含块的宽度不足以容下浮动的子元素时，将自动折行；垂直方向当包含块认为浮动的子元素没有高度时，子元素会溢出，BFC能解决该问题。水平方向不会溢出，垂直方向有可能会溢出。
相邻的浮动元素，left属性最前面的元素，排在最左边
相邻的浮动元素，right属性最前面的元素，排在最右边
包含块不会计算浮动元素的高宽
浮动元素与非浮动元素会重叠，挤出块中的内容

清除浮动

该属性的值指出了不允许有浮动对象的边。

clear：none | left | right | both
适用于：块级元素

取值：

none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象

清除外部浮动
需要注意的是clear是用于控制元素本身的，不能影响别的元素。
清除内部浮动
当一个包含块内部有浮动元素时，外部块不会计算浮动块的高度与宽度，为了让内部的浮动元素撑开包含块，需要还原高度，暂且称为清除内部浮动。

BFC
增加一个空的div，清除浮动