CSS基础知识总结

CSS是层叠样式表

也称CSS样式表或级联样式表

CSS也是一种标记语言

CSS规则：选择器以及一条或多条声明

选择器

类命名规则：

CSS样式命名规则
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar --> ./CSS类命名规则.md

标签选择器

类选择器 .类名

多类名选择器

在标签class属性中写多个类名 类名之间用空格隔开

id选择器 只能调用一次 经常和js搭配使用

通配符选择器 *选择所有的元素标签

字体属性

字体系列

front-family 定义文本的字体系列

font-size 字号大小

front-weight 字体粗细 “normal / bold / bolder / lighter / number(100-900) 400=normal 700=bold”

front-style 字体样式 italic 斜体 normal

font 复合属性写法 font: front-style front-weight font-size front-family 严格按照这个顺序

​ 可以省略 ，但是必须保留 font-size和font-family

文本属性

color

text-align left默认值

text-decoration 装饰文本 none underline overline line-through 可以给a标签取消下划线 ：none

text-indent 文本缩进

//em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

line-height 设置行间的距离（行高）上间距 文本高度 下间距

引入方式

内部样式表 抽取出来放到style标签

行内样式表 在元素标签内设置

外部样式表 单独写入到CSS文件中，再引入CSS文件

Emmet语法

1.快速生成HTML结构

eg: tab * > + .demo #two $ {}

2.快速生成CSS样式语法

eg: w100 h200

复合选择器

后代选择器

​ 又称包含选择器 ol li{} 元素1 元素2{} 元素2是元素1的孩子才行 元素1和元素2可以是任意标签

子选择器

​ 只会选择亲儿子（孙子都不行） 元素1>元素2{}

并集选择器

​ 可以选择多组标签，同时为他们定义相同的样式。元素1，元素2{} //中间有逗号 最后一个选择器不需要加逗号

伪类选择器

​ 最大特点 用冒号 ：表示 ；如 ：hover ，

链接伪类

a:link 选择所有未被访问的链接 a:vistited 已被访问的链接 a:hover 鼠标指针位于其上的链接 a:active 选择活动链接

注意：为了确保生效，请按照LVHA的顺序声明 ：link visited hover active 记忆法：love hate

focus伪类选择器

​ 用于选取获得焦点的表单元素 一般用再 input上 input:focus{}

CSS的元素显示模式

块元素

​ h p div ul ol li 等

​ 特点：1.独占一行，2.可以设置高宽，内外边距，默认宽度是容器（父级宽度）的100%3.是一个容器及盒子，里面可以放行内或块级元素

​ 注意：文字类的元素不能使用块级元素 p标签主要放文字，不能放块级元素，h同样

行内元素

​ a strong b em i del s ins u span等

​ 特点：1.相邻行内元素在一行上，一行可以显示多个

2.高宽直接设置无效 3.默认宽度就是它本身内容的宽度4.行内元素只能容纳文本或其他行内元素

​ a 链接里面不能再放a ，但是a里面可以放块级元素

行内块元素

​ img input td 他们同时具有块元素和行内元素的特点

​ 特点：1.和相邻行内元素（行内快）在一行上，一行可以显示多个，但是之间会有空隙

​ 2.默认宽度就是它本身内容的宽度 3.高度，行高，外边距以及内边距都可以控制

元素显示模式转化

转化为块元素： display:block

转化为行内元素：display:inline

转化为行内快：display:inline-block

工具推荐 snipaste F1截图 F3在桌面置顶显示 点击图片，alt可以取色 esc取消图片显示

一个技巧

​ 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中

CSS背景

background

-color -image -repeat -attachment -position

//transparent 透明

-image：none|url（url）

-repeat ：no-repeat | repeat-x |repeat-y

-position：x y；//精确 ：数值顺序有关 top center bottom left center right/方位：位置顺序无关 精确和方位可以混合

-attachment：固定背景图片 ：scroll（默认） | fixed

背景复合写法

background：背景图片 图片地址 背景平铺 背景图像滚动 背景图片位置

没有特定的书写顺序，上面为一般习惯

背景色半透明

background：rgba(0,0,0,0.3) 最后一个参数是alpha透明度，取值范围在0~1之间 0.3一般省略0 写成 .3

CSS三大特性

层叠性

​ 就近原则 但只会覆盖有冲突的样式

继承性 inherited

​ 子标签会继承父标签的某些样式，如文本颜色和字号

​ 可以继承 text-，font-，line-这些元素开头的以及color属性

​ 特殊：行高的继承性

​ font：24px/24px ‘字体’ | font：24px/1.5 ‘字体’ 1.5就是当前元素文字大小font-size的1.5倍

​ 没有指定文字大小 但是会继承父亲的 文字大小

优先级

​ 选择器相同，则执行层叠性

​ 选择器不同，根据选择器权重执行 最大的 !important

​ 类选择器大于标签选择器 id选择器大于类选择器 行内样式第二大

​ 继承的权重为0

复合选择器会有权重叠加的问题

盒子模型

组成：border content padding margin

border 边框

-width -style -color

-style ：none solid 实线 dashed虚线 dotted 点线 常用

简写：border ： 1px solid red； 没有顺序

border-top bottom left right

表格的细线边框

border-collapse：collapse；合并相邻的边框

padding 内边距

padding -top left right bottom

padding 简写：top right bottom left 复制值

padding会影响盒子实际大小，盒子本身如果设置了高宽，则再设置padding会撑开盒子

padding不会影响盒子大小的情况

盒子本身没有设置width就不会撑开

margin 外边距

同padding

外边距典型应用

外边距可以让块级盒 水平居中，但是必须满足：1.盒子必须指定了宽度，2.盒子左右的外边距都设置为auto

3种写法：margin：0 auto；|margin-left：auto，margin-right：auto|margin：auto

行内元素或行内块元素水平居中给其父元素添加text-align：center即可

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷

解决：1.定义父级元素的border 2.为父元素定义上内边距 3.为父元素添加overflow:hidden

之后 浮动，固定，绝对定位的盒子就不会再有这个问题

清除内外边距

网页元素很多都带有默认的内外边距

padding：0；margin：0；

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

圆角边框

border-radius：length；数值或百分比

圆形：宽度的一半

圆角矩形：高度的一半

设置不同的圆角：顺时针设置4个脚

盒子阴影

box-shadow ：h-shadow必需 v-shadow必需 blur 可选 模糊距离 spread 阴影尺寸 color inset 将外部阴影（outset）改为内部阴影

注意：outset是默认的 不能写

文字阴影

text-shadow：h0shadow v-shadow

---

总结

盒子布局用什么标签

标签是有语义的 ，h标题 p大量文字段落

为啥那么多类名

方便维护

margin还是padding

大部分情况可以混用，2者各有优缺点，

自己做没有思路

先模仿，再创新

---

浮动 float

三种传统布局方式 ：标准流 浮动 定位

浮动：可以改变标签默认的排列方式

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

选择器 { float ： 属性值} 属性值 none left right

浮动的元素是相互贴靠在一起的

特性：（重难点）

1.浮动元素会脱离标准流（脱标）

​ 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

​ 浮动的盒子不在保留原先的位置

2.如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列

3.浮动元素具有行内块元素的相似特性

浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

浮动布局注意点

1.同上

2.一个元素浮动了，其他兄弟元素也要浮动 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

为什么需要清除浮动：

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

清除浮动本质

清除浮动的本质就是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器{clear:属性值} clear:both

方法:

1.额外标签法也称隔墙法 添加一个额外的标签 clear:both 添加的元素必须是块级元素不能是行内元素

*2.父级添加 overflow 其属性可以设置为hidden，scroll或auto overflow:hidden;

*3.父级添加 :after伪元素 是额外标签法的升级版

.clearfix:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix { /* IE6,7专有*/
    *zoom:1;
}

*4.父级添加双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix { /* IE6,7专有*/
    *zoom:1;
}    

页面布局整体思路

1.必须确定页面的版心（可视区），我们测量可得知

2.分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则

3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则

4.制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远重要

5.所以，先理清楚布局结构，再写代码尤为重要。这需要我们多写多积累

案例：

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法

1.li+a语义更清晰，一看这就是有条理的列表型内容。

2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎降权的风险），从而影响网站排名 SEO

注意：

1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示

2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字

3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度

CSS属性书写顺序（重点）

定位

为什么需要定位

1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子

2.当我们滚动窗口的时候，某个元素固定在一个位置

定位组成

定位:将盒子定位在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

定位模式

static（默认定位方式，无定位的意思） relative absolute fixed（固定定位）

边偏移

top bottom left right

relative

特点：1.相对于它原来的位置来移动的（移动位置的时候参照点是自己原来的位置）

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）

因此，相对定位并没有脱标，它最典型的应用就是用来给绝对定位当爹的

absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

特点：1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动

3.绝对定位不再占有原来的位置（脱标）

子绝父相的由来

子级是绝对定位的话，父级要用相对定位

1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

2.父盒子需要加定位限制子盒子在父盒子内显示

3.父盒子布局时，需要占有位置，因此父亲只能时相对定位

总结：因为父级需要占有位置，因此时相对定位，子盒子不需要占有位置，则是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

fixed固定

固定于浏览器的某个位置

特点：1.以浏览器的可视窗口为参照点移动元素

2.跟父元素没有任何关系 ，不随滚动条滚动

3.固定定位不在占有原先的位置

​ 固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位

小技巧：固定在版心右侧位置

小算法：

1.让固定定位的盒子left:50%

2.让固定定位的盒子margin-left:版心宽度的一半距离

sticky粘性定位

定位总结：

是否脱标：是：absolute fixed 否：static relative sticky

定位叠放次序 z-index

数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上

定位的拓展

绝对定位的盒子居中

定位特殊特性

绝对定位和固定定位也和浮动类似

1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度

2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

脱标的盒子不会触发外边距塌陷

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字

但是绝对定位（固定定位）会压住下面标准流所有的内容

绝对定位的盒子水平垂直居中

加了绝对定位的盒子是不能通过margin:0 auto水平居中，但是可以通过计算达到水平居中

1.left 50%，2.margin 负值 往左边走自己盒子的一半 margin-left：-100px

网页布局第二准则

先设置盒子大小，再设置位置

并集选择器

可以集体声明相同的样式

类名，类名{}

如果一个盒子既有left属性也有right属性，则默认会执行 left属性 同理 top bottome也是

网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子

通过CSS浮动，定位可以让每个盒子排列成网页

一个完整的网页，是标准流，浮动，定位一起完成布局的，每个都有自己的专门用法

1.标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准布局

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局

元素的显示与隐藏*

display

display属性用于设置一个元素应如何显示。

display:none 隐藏对象 / 且隐藏后不再占有位置

display:block 除了有设置成块级元素外，还有显示元素的意思

visibility

visibility属性用于指定一个元素应可见还是隐藏

visibility：visible；元素可视

visibility：visible；元素隐藏

visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility：hidden

如果隐藏元素不想要原来位置，就用display：none

overflow 溢出

参数：

visible：默认 显示溢出元素

hidden：隐藏溢出元素

scroll：溢出的部分显示滚动条

auto：在需要的时候添加滚动条 即不超出就不显示滚动条 超出就显示

一般情况下，我们不想让溢出的内容显示出来，因为溢出的部分会影响布局

但是如果有定位的盒子，请慎用overflow：hidden 因为它会隐藏多余的部分。