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

css的三种表现形式：

1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中；

2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内；

3、外部样式（外联样式）：写在css文件内；

color:设置文本颜色；

属性值：1、表示颜色的英文单词。

2、十六进制表示法：#ff0000；

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、通用选择器（通配符）：给所有的标签添加样式；

代码：

3、类选择器：给同一类（同一个群体）标签添加样式；要先给同一类标签取一个名字；

属性--class给标签命名类名；

4、id选择器：给某一个标签添加样式；要先取一个id名

属性--id；

5、后代选择器：选择的是某一个元素的后代元素；

6、子选择器：选择某个元素的直接后代；

7、并集选择器：将两个不相干的元素同时添加相同属性；

代码：

8、交集选择器：当标签和类名（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都可以被继承；

文本修饰：text-decoration--underline；下划线

line-through；删除线

none；无/没有修饰；

文本对齐：text-align--left；左对齐

center；居中对齐

right；右对齐

文本缩进：text-indent；指的是文本的首行缩进；

单位px、em；

行高：line-height--用于设置一行文本的高度，常用于设置一行文本在容器当中垂直居中；

单位：1、px；

2、百分比；

3、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；

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；相对于浏览器窗口的左上角；

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

css的三种表现形式：

1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中；

2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内；

3、外部样式（外联样式）：写在css文件内；

color:设置文本颜色；

属性值：1、表示颜色的英文单词。

2、十六进制表示法：#ff0000；

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、通用选择器（通配符）：给所有的标签添加样式；

代码：

3、类选择器：给同一类（同一个群体）标签添加样式；要先给同一类标签取一个名字；

属性--class给标签命名类名；

4、id选择器：给某一个标签添加样式；要先取一个id名

属性--id；

5、后代选择器：选择的是某一个元素的后代元素；

6、子选择器：选择某个元素的直接后代；

7、并集选择器：将两个不相干的元素同时添加相同属性；

代码：

8、交集选择器：当标签和类名（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都可以被继承；

文本修饰：text-decoration--underline；下划线

line-through；删除线

none；无/没有修饰；

文本对齐：text-align--left；左对齐

center；居中对齐

right；右对齐

文本缩进：text-indent；指的是文本的首行缩进；

单位px、em；

行高：line-height--用于设置一行文本的高度，常用于设置一行文本在容器当中垂直居中；

单位：1、px；

2、百分比；

3、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；

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；相对于浏览器窗口的左上角；