CSS（层叠样式表）知识

一、CSS基础

1.引入方式

内嵌式写在style标签中

外联式通过link标签引入

行内式写在标签的style属性中

2.选择器

标签选择器

类选择器.

Id选择器#

通配符选择器*：去除标签默认的margin和padding

3.字体样式

字体大小：font-size

字体粗细：font-weight （400变细，700加粗）

字体样式：font-style （取值normal正常，italic倾斜）

字体类型：font-family

font复合属性：font：style weight size/line-height family

4．文本样式

行高：line-height（文字加上下边距的高）

文本缩进：text-indent (1em为一个字距离)

水平对齐：text-align

(在文本、span标签、a标签、input标签、img标签实现水平对齐效果，只需给其标签的父元素设置text-align即可)

文本修饰：text-decoration

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无修饰

标签水平居中：margin: 0 auto（可用于div p h标签）

二、CSS进阶

1.选择器进阶

后代选择器：选择器1 选择器2，会选中所以指定标签

子代选择器：选择器1>选择器2，只会改变子级样式

并集选择器：选择器1，选择器2

交集选择器：选择器1选择器2

hover伪类选择器：选择器：hover（鼠标悬停在元素上的状态）

2.背景相关属性

背景平铺：background-repeat

背景位置：background-position:水平位置垂直位置；

（left center right top center bottom）

背景复合属性：color image repeat position

重要图片用img，修饰图用background

3.元素显示模式

块级元素：

独占一行，如div p h

行内元素：

一行可显示多个，不可设置宽高，如a span

行内块元素：

一行可显示多个，可设置宽高，如input textarea button select img

元素转换：

display:block

display:inline-block

display:inline

4.CSS特性

继承性

子级继承父级，只有控制文字的属性能继承；但元素有浏览器默认样式的，继承会失效，如a的color, h的font-size

层叠性

选择器优先级相同时，样式冲突时，后面的会覆盖前面的

优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承

三、CSS盒子模型

1.盒子模型

content（内容）padding（内边距）border-方向（边框）margin（外边距）

margin和padding对行内标签中的垂直位置无法生效，可用行高line-height解决

2.内减模式

加上box-sizing:border-box，给盒子设置border和padding时，盒子就不会被撑大

3.外边距塌陷问题

（互相嵌套的块级元素，子元素的margin会作用在父元素上，导致子父级一起移动）

方法：

1.给父元素设置border或padding

2.给父元素设置overflow:hidden

3.子元素转换成行内块元素

4.浮动

四、CSS浮动

1.结构伪类选择器

元素：first-child

元素：last-child

元素：nth-child(n)

元素：nth-last-child(n)n可以组合公式

2.伪元素

（用CSS模拟出的标签效果，大部分用来加不重要的小图）

：：before

：：after

注：必须加上content才生效，content里放需要在元素前或后需要加的东西

3.标准流

标签默认的排列方式

4.浮动

（为了让多个块级元素完美的一行排列）

1.图文环绕

2.浏览器解析行内块或行内标签，如果标签换行，标签间会出现间距，所以使用浮动，可以让两块标签更好在一行排列；两个标签都左浮动，不会有间距，但是一个标签左浮，一个右浮，两标签间会有空隙

3.浮动会脱标，在标准流中不占位置

4.浮动后的标签具备行内块特点

5.清除浮动

1.给父元素加高度

2.额外标签法：有些不适合加高度的，可以在父元素内容最后添加一个块级元素，再给添加的块级元素设置clear:both

3.单伪元素清除法：项目中使用，直接给标签加类即可清除浮动

（clearfix直接加在父元素标签类名之后，如<div class=”xxx clearfix”>）

基本写法：

.clearfix::after{

content:'';

display:block;

clear：both；}

补充写法（考虑兼容性时使用）：

.clearfix::after{

content:'';

display:block;

clear：both；

height:0;

visibility:hidden

}

4.双伪元素清除法（清除浮动和解决塌陷问题）：

项目中使用，直接给标签加类即可清除浮动

.clearfix::before,

.clearfix::after{

content:'';

display:table;

}

.clearfix::after{

clear:both;

}

5.给父元素设置overflow:hidden

拓展：

CSS书写顺序（浏览器执行效率更高）

浮动/display

盒子模型

文字样式

五、CSS定位装饰

1.设置定位方式

属性名：position

relative（相对定位）

参照自己原来位置改变位置；

占有原来位置；

不改变原有显示模式特点

absolute（绝对定位）

先找已定位的父级，没有则以浏览器窗口作为参照物；

脱标，不占位；

改变标签的显示模式特点，具备行内块特点

fixed（固定定位）

相对于浏览器进行定位；

脱标，不占位；

具备行内块特点（需设置宽度，或标签里有内容才能显示盒子）

2.位移居中

left：50%；

right：50%；

//自己宽高度的一半

Transform:translate(-50%,-50%)

3.显示层级

默认情况下，两个定位的盒子，后来者居上

但加上z-index：整数；其中取值越大，显示顺序越上，z-index默认值为0

z-index配合定位才生效

4.垂直对齐方式

vertical-align（浏览器遇到行内和行内块标签当做文字处理，默认文字按基线对齐，会有溢出部分，给其中一标签设置vertical-align，其他元素就向它看齐；应用1：当盒子没有设置高度，想让盒子的高度与盒子里的图片一样高时，可给图片标签加vertical-align：middle；或display：block；应用2：盒子有设置宽高，盒子设置line-height，再让盒子里的图片加上vertical-align：middle；可以让图片在盒子里垂直居中；如在盒子再加上text-align：center；图片会显示在盒子正中间）

5.光标类型

属性名：cursor

属性值	效果
default	箭头
pointer	小手效果，提示可点击
text	工字型，提示可选文字
move	十字光标，提示可移动

6.边框圆角

属性名：border-radius

一个圆形：先设置一个正方形，再加border-radius:50%

7.overflow溢出部分显示效果

属性名：overflow

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	是否溢出都显示滚动条
auto	根据是否溢出显示滚动条

8.元素本身隐藏

visibility:hidden（占位隐藏效果）

display:none（隐藏不占位，工作中常用，可用于下拉菜单）

拓展：

SEO搜索引擎优化：

1.将网页制作成html后缀

2.标签语义化