CSS 简单归纳 -- 前端知识

CSS:cascading style sheets层叠样式表，用于美化页面

css的三种表现形式：
1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中；
<标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"></标记>
2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内；
注意：style标记不要写在title标记上方；
<style>
选择器 {
属性名：属性值；
属性名：属性值；
......
}
</style>
3、外部样式（外联样式）：写在css文件内；
<link type="text/css" rel="stylesheet" href="css/main.css" />

color:设置文本颜色；
属性值：1、表示颜色的英文单词，例如：red、blue、green、pink、purple、cyan等；
2、十六进制表示法：#ff0000； 0、1、2...9、a、b、c...f
# ff 00 00
红色 绿色 蓝色
0表示颜色的最低值，f表示颜色的最大值；
3、rgb表示法：color：rgb(0,0,0)；取值0-255；
4、rgba表示法：color:rgba(0,0,0,0)；前三个值的取值0-255，第四个值的取值0-1；
a--alpha

font-family：设置字体格式；可以设置多个字体格式，之间用“，”隔开，字体格式用“”包含；

font-size：设置字体大小，单位像素（px）；

font-style：设置字体样式
normal--正常的，没有任何样式；
italic--斜体字；只有字体本身有斜体才能倾斜，否则不能倾斜；
oblique--倾斜的；可以强行倾斜字体；

font-weight：设置字体字重，即字体的粗细；
100-900取整百，700相当于粗体（bold），900相当于更粗（bolder）；
bold--粗体
bolder--比粗体更粗；
lighter--细体；

选择器：选择对应的标签，将样式给到对应的标签
1、标签选择器：给同一种标签添加样式；
代码：
标签名 {
属性名：属性值；
}

2、通用选择器（通配符）：给所有的标签添加样式；
代码：
* {
属性名：属性值；
}
注意：通用选择器是先遍历页面当中所有的标签，然后再给这些标签添加样式，所以这个选择器的性能非常低；一般只会在测试的时候使用，用于css的初始化，但是在项目当中不要使用；

3、类选择器：给同一类（同一个群体）标签添加样式；要先给同一类标签取一个名字；
属性--class给标签命名类名；
代码：
.class名（类名）{
属性名：属性值；
}
注意：一个类名可以给多个标签，一个标签可以有多个类名，多个类名之间用“空格”隔开；

4、id选择器：给某一个标签添加样式；要先取一个id名
属性--id；
代码：
#ID名 {
属性名：属性值；
}
注意：一个ID名只能给一个标签，一个标签只能有一个ID名；（从一而终）

5、后代选择器：选择的是某一个元素的后代元素；
代码：
祖先选择器 后代名 {
属性名：属性值；
}
注意：中间是用“空格”连接，表示“里面的”意思；

选择器原理：是由内向外查找，先查找所有的p，然后判断这个p是否由满足要求的父节点father，不满足就继续向上一级查找，没有找到就不满要求，找到了才给这个p添加样式；

6、子选择器：选择某个元素的直接后代；
代码：
父选择器>子级{
属性名：属性值；
}

7、相邻兄弟选择器：选择紧挨着该元素的后面的一个元素；
代码：
元素名+兄弟名{
属性名：属性值；
}

8、通用兄弟选择器：选择的是该元素后面的所有的某一种元素；
代码：
元素名~兄弟名{
属性名：属性值；
}

9、并集选择器：将两个不相干的元素同时添加相同属性；
代码：
元素1，元素2，元素3......{
属性名：属性值；
}

10、交集选择器：当标签和类名（ID名）都冲突的时候，使用交集选择器；
代码：
元素名.类名（#ID名）{
属性名：属性值；
}

css三大特性：
1、继承：父级的样式会被子级继承；!important不会被继承；

2、层叠：当样式发生冲突的时候，样式会产生覆盖（层叠）；

3、优先级：!important(最高级)>行内样式>id>类>标签>*>继承；
同级样式遵循“就近原则”；就近指定是谁离内容进谁的优先级就高；

权重：标签选择器
类选择武器--10
id选择器--100
行内样式--1000
!important--1/0(无穷大)
数标签：先数id，比较完id再数类，比较完类再数标签；

盒子模型：
1、内容--宽度：width；单位px、百分比（继承）、em、rem；
高度：height；单位px、百分比（继承）、em、rem；
背景--背景色：background-color；颜色单词、十六进制表示法、rgb、rgba；
背景图片：background-image:url(路径)；
背景图片重复：background-repeat；no-repeat(不重复)、repeat-x（水平重复）、repeat-y（垂直重复）、repeat（水平垂直重复、默认）；
背景定位：background-position：left、center、right、top、center、bottom、具体的数值（单位px）
背景连写：background：背景颜色 背景图片 背景图片重复 背景定位；可以只单写某一个属性；

2、填充：上填充--padding-top
下填充--padding-bottom
左填充--padding-left
右填充--padding-right
填充连写--padding：1个值--》上、右、下、左全部是这个值；
2个值--》第一个值表示上下，第二个值表示左右；
3个值--》第一个值表示上，第二个值表示左右，第三个值表示下；
4个值--》依次为上、右、下、左；（顺时针方向）
注意：padding会改变盒子的大小，要想在添加padding的同时保持盒子的大小不变，应将padding的值从盒子的大小中减去；

3、边框：边框粗细--border-width
边框颜色--border-color
边框样式--border-style：solid（实线）、dashed（虚线）、dotted（点线）
边框连写--border：width style color;
可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right
注意：边框的对齐方式为向外对齐，所以边框会改变盒子大小；

4、外边距：上边距--margin-top
下边距--margin-bottom
左边距--margin-left
右边距--margin-right
外边距连写--margin：1个值 2个值 3个值 4个值（参照padding）；

默认文档流布局下，父子上边界共用问题？
解决：1、使用padding；
2、给父级使用border；
3、给父级添加属性--overflow：hidden；
4、浮动；
5、定位；

外边距塌陷：在垂直方向上上下边距会合并，取最大值；

盒子水平居中：margin：0 auto；

样式的继承：width、color、font-、text-、line-height都可以被继承；

<ins></ins>下划线标记

<del></del>删除线标记

文本修饰：text-decoration--underline；下划线
line-through；删除线
none；无/没有修饰；

文本对齐：text-align--left；左对齐
center；居中对齐
right；右对齐

文本缩进：text-indent；指的是文本的首行缩进；
单位px、em；

行高：line-height--用于设置一行文本的高度，常用于设置一行文本在容器当中垂直居中；
单位：1、px；
2、百分比；基于文字大小的百分比，“%”前必须是整十，如：150%、200%
3、em；相对单位，同样是基于文字大小；如：1.5em、2em；
4、没有单位；a--没有继承的情况下，相当于em；
b--在有继承的情况下：
i、父级的行高有单位em，则会先计算好行高，然后将行高的数值直接继承给子级，子级本身不会再计算行高；
ii、行高没有单位，则父级会直接将行高继承给子级，然后子级根据行高值自行计算行高；

font连写--font：样式/粗细 大小 格式；大小和格式必须都有，缺少任何一个都不行；

元素的显示方式：
1、块级--block；独占一行，支持宽高；
2、行内--inline；和其他行内元素在一行显示，不支持宽高；
3、行内块级--inline-block，既有行内元素特性，又有块级元素的特性；同样在一行中显示，并且支持宽高；
display:block/inline/inline-block；
以上为默认文档流（标准文档流）下的情况；

在有链接的情况下，a标记无法继承父级的color样式；

伪类选择器：
a:link--链接的原本的样式（没有访问过）；一旦访问过后就失效；
a:hover--鼠标移入时的样式；
a:active--鼠标按下时的样式（鼠标没有松开）；
a:viseted--链接访问过后的样式；
L--H--V--A

浮动：让默认（标准）文档流下的元素漂浮起来水平排列；
float--left左浮动；
right右浮动；
none不浮动；
浮动排列的顺序不会改变，默认时谁在第一个，浮动就会排在第一个；

浮动的影响：
1、行内元素浮动之后可以支持宽高；
2、文本会给浮动的元素让位；可以制作文本绕排的效果；
3、在父级没有给高度的情况下，子级浮动后父级会没有高度；

清除浮动：
1、在父级内容的最后添加一个空的div，添加clear属性；
clear--left清除左浮动；
right清除右浮动；
both清除所有（左/右）浮动；
clear是清除上一个元素带来的影响；
不推荐使用，因为会在页面上添加太多的无用标签，让页面的布局变得更复杂；

2、给父级设置overflow：hidden；
会触发bfc（block formatting context）块级格式化上下文；
不推荐使用，因为这个属性和定位一起使用时会产生问题；

3、使用伪元素after
.clearfix:after {
content:"";/*内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*块级元素*/
visibility:hide;/*隐藏*/
clear:both;/*清除浮动*/
}
.clearfix {
zoom:1;/*IE678*/
}

4、使用双伪元素after和before
.clearfix:afer,.clearfix:before {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
以上四种方式推荐使用第三种；

列表样式：list-style

定位：
1、静态定位--static；按照标准文档流进行布局；

2、相对定位--relative；相对自身；以自身的坐上角（坐标点）为参考；会保留原来的位置不被其他元素侵占；

3、绝对定位--absolute；参考的是页面的左上角；绝对定位位置不会被保留；
如果父级有定位，则参考父级的坐标点；如果父级没有定位，则会一级一级向上查找，直到html标签，中途有定位就会参照这个定位元素的坐标点；

4、固定定位--fixed；相对于浏览器窗口的左上角；