css基础笔记总结

-- CSS层叠样式表，负责页面的表现

- CSS的编写位置：

1.内联样式(不推荐使用)

<p style="color:red;font-size:20px;">我是一个段落</p >

2.内部样式表（推荐使用）

<style type="text/css" >

p {

color:red ;

font-size:20px ;

}

</style >

3.外部样式表（开发中最常用的）

<link rel="stylesheet" type="text/css" href="相对路径" / >

-可以将CSS样式编写到元素的style属性 中

1--内联模式

- 将样式编写到style属性中，这种样式我们称为内联样式

内联样式只会对当前的标签起作用，对其他元素不起作用

内联样式我们称为结构和表现耦合不方便后期维护，不推荐使用

<p style="color:red;font-size:60px;" >

-可以将CSS样式编写到head中的style标签里

-然后通过CSS选择器来为指定元素来设置样式，这样可以同时为多个元素设置样式，使结构和表现进一步分离，方便后期的维护，推荐使用

-内部样式表，只对当前页面起作用，而不能在其他页面中应用，如果要在其他页面中使用，只能复制一遍

<style type="text/css" >

p {

color:red ;

font-size:50px ;

}

-外部样式表，可以将CSS代码编写到一个外部的css文件中,

然后通过link标签来将外部文件引入到当前页面中，

href 需要一个外部css文件的路径，可以使用相对路 径

将样式编写到外部的文件中，可以使样式表在不同的页面中进行复用，更方便后期的维护，使结构和表现完全分离，这个是我们最推荐的使用方式，将样式编写到外部文件中，可以利用浏览器的缓存机制，加快用户的访问速度，提高用户体验

使用此模式引用外部的CSS程序：

<link rel="stylesheet" type="text/css" href="style.css" />写在HTML,的head程序 中

以style.css为扩展名的文件中程序为：p{

color:green ;

font-size:30px ;

}

-CSS注释 /* * /

- CSS的语法 ：

选择器 声明块

- 选择器 ：

- 通过CSS选择器可以选中页面中的指定元素，进而为他们来设置样 式

- 声明块 ：

- 声明块由一对{}括起 来

- 声明块是由一个一个的声明组成 的

- 声明实际上就是一个名值对结 构

一个样式名对应一个样式值，名和值之间使用:连接，每个名值对以;结尾

- 常见的样式 ：

width 宽 度

height 高 度

color 字体颜 色

font-size 字体大 小

background-color 背景颜色

2--选择器：

--元素选择 器

作用：根据标签名选中页面中的指定元素

语法：标签名 {}

例子：p{} h1{} div{ }

h1 {

color: red ;

}

--id选择 器

作用：根据元素的id属性值来选中一个元 素

语法：#id属性值 { }

例子：#p1{} #box{}

#p1 {

color: blue ;

}

--类选择 器

作用：根据元素的class属性值来选中一组元素

语法：.class属性值{}

例子：.p2{} .box1{}

.p2 {

font-size: 40px ;

}

--可以为一个元素同时指定多个class,多个class之间使用空格隔 开

例如：<div class="box1 box2 box3"></div>

<p id="p1" class="box1"></p >

--选择器分组（并集选择器 ）

作用：可以同时选中多个选择器对应的元素

语法：选择器1 , 选择器2 , 选择器N{}

例子：p , div , h1 , ul{}

h1 , #p1 , .p2 {

background-color: yellow ;

}

--交集选择器 ：

作用：可以选中同时符合多个选择器的元素

语法：选择器1选择器2选择器N{}

p.p3 {

color: green ;

}

注意：元素选择器必须在前面

--通配选择 器

作用：选中页面中的所有元素

语法：*{}

注意：通配选择器的性能较差，避免使用它

* {

font-size: 40px ;

}

--每个元素都可以指定一个class属性，class属性和id属性类似 ，

不同的是class属性可以重复，拥有相同class属性值的元素可以称为一类元 素

例如：<p class="p1 box1 p2"></p>

--后代元素选择 器

- 作用：选中元素的指定的后代元 素

- 语法：祖先 后代{ }

- 例子：div span{} .box1 span{ }

body div span a {}

--子元素选择器 ：

- 作用：选中元素的指定的子元 素

- 语法：父元素 > 子元素{ }

--例子：.box1 > span {

color: red ;

}

--伪类选择 器

伪类 ：

- 伪类用来表示元素所处在的一个特殊状 态

比如：访问过的超链接 没访问过的超链接

- 超链接的伪 类

:li nk

- 普通的链接（未访问过的链接 ）

:visit ed

访问过的链接

- 浏览器是根据历史记录来判断一个链接是否访问过 的

- 由于隐私的原因，visited这个伪类只能设置字体的 颜色

:hove r

- 鼠标正在移入的链 接

:acti ve

- 鼠标正在点击的 链接

:hover和:active也可以用于其他的 元素

例如:a:link{

color: greenyellow;(a 表示超链接和link的交集选择器 )

}

3-- 父元素

- 直接包含子元素的元素，称为父元 素

子元素

- 直接被父元素包含的元素，称为子元 素

祖先元素

- 直接或间接包含后代元素的元素，称为祖先元素（父元素也是祖先元素 ）

后代元素

- 直接或间接被祖先元素包含的元素，称为后代元素（子元素也是后代元素 ）

兄弟元素

- 拥有相同父元素的元素是兄弟元 素

4--样式的继承

-就像后代可以继承祖先的财产一样，在网页中祖先元素上的样式也会被子元素所继承样式的继承是对开发的简化使我们可以少做很多工作

-通过继承可以将元素共有的样式，统一设置给他们共同祖先元素，这样只需要设置一次，即可让所有的后代元素都拥有该样式

-但是并不是所有的样式都会被继承，比如：背景相关的样式、 边框相关的样式、 宽度 、高度..... .

例如：

<p>我是一个p元素<span>我是一个p中的span</span></p >

将p标签中的内容设置成蓝色，span中的内容也会集成变为蓝色。

5--选择器的优先级

* 当我们通过不同的选择器选中同一个元素并且设置相同的样式时 ，

* 此时样式之间就发生了冲突 。

* 这时显示哪个样式由选择器的优先级(权重)来决 定

*

* 1.内联样式 优先级 1 000

* 2.id选择器 优先级 1 00

* 3.类和伪类选择器 优先级 1 0

* 4.元素选择器 优先级 1

* 5.通配选择器 优先级 0

* 6.继承的样式 没有优 先级

*

* - 当样式发生冲突时，需要将选择器的优先级进行比较，优先级高的优先 显示

* 如果我们使用的是复合选择器，则需要将多个选择器的优先级进行相加然后再比 较

* - 但是注意选择器的相加最大不会超过其最高的数量级 。

* - 如果选择器的一样,则优先显示靠 下的

* - 如果在一个样式的最后添加一个!important，则该样式会获取到最高的优先 级，

* 它将会优先于所有的样式显示，甚至超过内联样式 。

* 但是注意!important在开发中慎 用

伪类选择器：写的顺序为： :lin k

:visite d

:hove r

:activ e

6--单位

* - 长度 单位

* 像素（px ）

* - 我们的显示器实际上是由一个一个的小点点构成，而这一个的小点点就是一个像 素

* - 1366 x 7 68

* -像素数值越低，画面就越清晰 。

* 百分比(% )

* - 如果将长度设置为百分比，则浏览器会自动根据父元素的指定属性来计算当前 的值

* - 设置百分比的好处是，如果父元素的属性发生变化，子元素的对应属性将会等比例 改变

* - 在移动端的开发中会使用大量的百分比 单位

*

* - 颜色 单位

* 1.在CSS中可以直接使用颜色的单词来设置 颜色

* 比如：red orange yellow blue gree n

yellowgreen greenyellow .. .

* 2.还可以使用RGB值来设置 颜色

* 所谓的RGB值指的就是通过三元色（红色 绿色 蓝色）的不同组合来搭配的不同的颜 色

* 语法 ：

* -rgb(红色的浓度,绿色的浓度,蓝色的浓 度)

颜色的浓度需要一个0-255之间的值，0表示没有，255表示最 大

红色：rgb(255,0,0)

* -颜色的浓度也可以传一个0% - 100%之间的值，0% 表示没有 100%表示最 大

* 3.也可以使用十六进制的rgb值来表示一个 颜色

* - 需要使用三组 两位的十六进制数字来表示一个 颜色

- 0 1 2 3 4 5 6 7 8 9 a b c d e f

- 00 ~ ff

* - 语法: #红色绿色 蓝色

* - 红色：#ff00 00

* - 如果十六进制的RGB值是两位两位重复的，则可以进行 简写

#ff0000 --> #f 00

#aabbcc --> #ab c

7--盒模型

* 普通盒子模型：box-sizing:content-box;

* 怪异盒子模型：box-sizing:border-box

-设置宽度和高 度

width和height用来设置盒子 “内容区” 的大 小

- 设置边框 border

- 设置边框会影响整个盒子的 大小

- 要设置边框必须要同时设置三个 样式

border-width 边框的 宽度

border-color 边框的颜 色

border-style 边框的样 式

* 如果只指定一个值，则四个方向的边框都是这个宽度

* boder:10 px

* 如果指定四个值，则顺序是 上(top) 右(right) 下(bottom) 左(left )

* border-width: 10px 20px 30px 40px;(顺时针方向 )

* 如果指定三个值 上 左右 下

* border-width: 10px 20px 30p x;

* 如果指定两个值 上下 左 右

* border-width: 10px 20p x;

* 除了border-width以外 ，

* CSS中还为我们提供了border-xxx-width 来分别设置四个边的 宽度

* 其中 xxx 可能是top right bottom lef t

border-width:10px ;

border-top-width:100px ;

- border-color用来设置边框的颜 色

- 除了border-color还提供border-xxx-col or

border-color: red yellow blue orange ;

border-color: red;（它的格式和border一样 ）

- border-style设置边框的样 式

* 可选值 ：

solid 实线 边框

double 双线 边框

dotted 点状 边框

dashed 虚线 边框

* - 除了border-style还提供border-xxx-style

border-style: dashed double dotted solid ;

border-style: soid;(格式和border一样，顺序也一样 )

- 在CSS中还我们提供了一个样 式

* border 通过它可以同时来设置四个边框的样式、宽度和 颜色

* 语法 ：

border : 宽度 样式 颜色（之间用空格隔开 ）

* - border中的三个样式没有顺序 要求

* - 注意，border一旦设置就是同时设置四个 边的

* - 除了border，还有border-xx x

border-le ft

border-rig ht

border-t op

border-botto m

* - 这四个样式的用法和border一样，只是他们只对一条边起作 用

* border: 10px blue solid;(设置的边框是10px，颜色为蓝色，线条为实线 )

* border-top: 10px blue solid;（设置的边框上面是10px，颜色为蓝色，线条为实线 ）

- 去掉右边（去掉其中一边用none ）

border-right: none ;

--盒子的内边距 （padding）

* - 内容区和边框之间的距离称为内边距(内边距和内容区的底面颜色是相同 的)

* - 一共有四个方向的内边 距

padding-to p

padding-rig ht

padding-bott om

padding-lef t

* - 盒子的可见框的大小由内容区 内边距 和 边框共同决定（200*200指的是他们三者之 和）

* - 可以通过padding来同时设置四个方向的内边距,它的规则和border-width 一样

--盒子的外边距(margin)

* - 盒子与盒子之间的 距离称为外 边距

* - 外边距不会影响盒子的大小，而是会影响盒子的 位置

* - 有四个方向的外 边距

margin-t op

margin-righ t

margin-bott om

margin-le ft

* - 由于元素的默认情况下靠页面的"左上"排列 的

* 所以当我们设置元素的 左或上 外边距时，会改变元素自身的位置

* 而当我们设置 右或下 外边距时不会改变元素自身的位置，而是改变其他元素的位置

* - 外边距也可以指定为负值，如果指定为负值，则元素会向相反的方向移 动

* - 外边距的值也可以设置为auto，如果值指定为了auto则浏览器会自动计算元素的外边距 值

* -如果将"垂直"方向的外边距设置为auto，则浏览器会默认将其设置为 0

* -如果将"水平"方向的外边距设置auto，则浏览器会将其设置为可能的 最大 值

* 如果同时将 水平 外边距设置为auto，则会将他们设置为相等的值

* - 所以我们经常利用该特点使一个元素在其父元素中水平居 中

* - 可以通过margin同时指定四个方向的外边距，规则和padding一样

* 行内块元素不能通过margin:0 auto 来实现居中的效果

--内联元素的盒模型

* 1.内联元素不支持设置宽度和 高度

* 2.内联元素 支持水平 方向的内边距(padding )，

* 可以设置垂直方向的内边距，但是不会影响页面的布 局

* 3.内联元素可以设置边框，但是垂直方向的边框不会影响 布局

* 4.内联元素支持水平外边距，不支持垂直外 边距

(用margin:0 auto;；来设置居中是没有用的，但是margin-right:50px;可以使右边的盒子向右移50px是可以的)

-内联元素要设置成“水平居中”的形式，首先就必须将内联元素转化成块元素才能生效

display:block； (首先将内联元素变成块元素 )

text-align:center; (设置成水平居中 )

text-decoration: none; (将下划线清除 )

--垂直外边距的重 叠

* - “相邻”的 垂直 方向的外边距会发生重叠现 象

* - 兄弟元素的相邻垂直外边距会取 最大 值

* - 父子元素的垂直外边距相邻，子元素的外边距会传递给父元 素

-水平方向的相邻的外边距不是重叠而是，“取和 ”

* - 当子元素设置外边距时，它的外边距会传递给父元素，此时父子元素会一起的移动 。

- 解决外边距重叠问题的方法：设置父元素的内边距，相应的要减少它的宽度和高度，之后设置父子元素就不会有外边距的重叠的问题。

--display和visibilit y

--displa y

* 内联元素无法设置宽度和高 度

* 通过display可以改变元素的类 型

* 可选值 ：

block 将元素设置为块 元素

inline 将元素设置为内联 元素

inline-block 将元素设置为行内块 元素

- 行内块元素，既不独占一行，又可以设置宽度和高度

none 元素在页面中不显示，并且不会占据页面的位置

dispaly:block;将内联元素设置成块元素，也可以将隐藏起来的元素重新显示出来

--visiblit y

* - 可以设置元素的显示 状态

* - 可选 值：

visible 默认值 ，元素在页面中 可见

hidden 元素在页面中不可见，但是依然会占据页面中的 位置

visibility: hidden;看不见但仍然占有位置

8--溢出处理 overflow

div.box$*3表示写了三行代码：<div class="box1"></div >

<div class="box2"></div >

<div class="box3"></div >

* 子元素默认都是在父元素的内容区中 的

* 当子元素的大小超过父元素的大小时，会导致子元素从父元素中溢 出

* 可以通过overflow来设置元素如何处理溢出的内 容

* 可选值：

visible 默认值 不对溢出内容进行处理，直接在父元素以外的位置显 示

hidden 对溢出的内容进行裁剪，溢出内容不会在页面中显 示

scroll 会生成水平和垂直滚动条，可以通过滚动条来查看完整的内 容

auto 根据需要自动生成滚动条

9--默认样式

* 浏览器都会为元素设置一些默认的样式 ，

* 这些默认样式是为当我们页面中没有样式表时，也可以确保网页可以有一个比较好的阅读效果 ，

* 这些样式在编写样式表会为我们带来一些问题，我需要将浏览器的默认样式清除 掉

-去掉项目的符号 ：

ul {

list-style:none ;

}

-在class类属性中设置 ：

.box {

margin:0;(外边距 )

padding:0;（内边距 ）

}

-通常使用的是*通配符,对所有的元素全部设置（推荐使用 ）

* {

margin:0 ;

padding:0 ;

}

10--文档流

- 当元素脱离文档流的时候，不能使用margin:0 auto来居中；但是可以使用外边距margin-right:20px,精确的数可以 。

（总结得出，在脱离文档流的时候，auto是不能使用的）

-文档流是整个网页的最底层，在页面中所创建的元素默认情况下都是在文档流中 的

-元素在文档流中的特点 ：

-块元 素

1.块元素在文档流中 自上向下垂直 排 列

2.块元素在文档流中默认 宽度 是父元素的全 部

3.块元素在文档流中的默认高度是被内容（子元素）撑 开

（当没有设置高度height时，它的高度是根据内容的大小来自行设置的）

-内联元 素

1.内联元素在文档流中 自左向右水平 排列 ，

如果一行不足以容纳所有的内联元素，则会另起一行继续自左向右水平排列

2.内联元素的默认 高度和宽度 都被内容撑 开

11--浮动 float

* - 通过浮动可以使元素完全脱离文档流，改变其在文档流中的排列 方式

* - 使用float来设置元素的 浮动

* 可选值 :

none 默认值 元素在文档 流中

left 元素向左 浮动

right 元素向右 浮动

例如：float:right;

* - 当开启了元素的浮动以后，元素会立即脱离文档流，并且向页面的 左上或右上 移动

* 直到遇到父元素的边框或者其他的浮动元素时，则停止移 动

* - 如果浮动的元素的上边是一个没有浮动的 块元素，则浮动元素不会超过该块 元素

* - 如果一行不足以容纳所有的浮动元素，则会自动换到下 一行

* - 浮动元素不会超过他上边的浮动的兄弟元素，最多一 边齐

<div class="box1"></div >

<div class="box2"></div>

box1和box2是兄弟元素box2的浮动元素不会跑到box1上面，最多两者一般齐 。

* -浮动会使元素完全脱离文档 流

* -块 元素

* 1.块元素脱离文档流以后，不再独占页面的 一行

* 2.块元素脱离文档流以后，默认 宽度和高度 都被内容 撑开

* -内联元 素

* 1.内联元素脱离文档流以后，会变成块元素，属性和块元素一 样。

class="属性名"，属性名的命名用内容来写，将内容的关键字写上方便以后自己看和维护 。

-如在编写网页的布局时，让三个块元素，在一行上显示。要将第一个块元素改成“浮动”的格式，这样下面的块元素才能跑到一行 。

* 如果是div同时开启浮动，则div会浮动在一行中排列；如果开启的是绝对定位，div也会脱离文档流，但是是叠加在一起的。

12--高度塌陷 （用BFC来解决，overflow:hidden;）

* 如果不为父元素指定高度，则父元素的高度默认是被子元素撑开的，子元素多高父元素就多高，但是当子元素脱离文档流以后将会无法撑起父元素的高度，导致父元素的高度塌陷,父元素高度塌陷以后，下边的元素会立即向上移动导致页面的布局 混

* 可以通过开发父元素的BFC来解决高度塌陷的问 题

* BFC（Block Formatting Context）块级格式化环 境，

* BFC是元素的一个隐含属性，默认情况下是关闭的，当开启BFC以后，元素将会具有如下特 性：

1.开启BFC以后，父元素的垂直外边距不会和子元素重 叠

2.开启BFC以后，元素不会被浮动元素所覆 盖

3.开启BFC以后，父元素可以包含浮动的子元 素

* 不能直接开启BFC，而是需要使用一些特殊的样式来间接开启BFC

* 开启BFC的方式(用来解决高度塌陷)：

1.设置元素 浮动

2.设置元素绝对 定位

3.设置元素为行内块 元素

4.将元素的overflow设置为一个非visible 的值

* - 一般情况下我们都是通过 overflow: hidden; 来开启元素的BF C

13--定位(position)

- 定位是一种高级的布局手段，通过定位可以将元素摆放到页面中的任意 位置

- 需要通过position属性来设置元素的 定位

- 可选 值：

static 默认值 元素没有开启 定位

relative 开启元素的相对 定位

absolute 开启元素的绝对 定位

fixed 开启元素的固定 定位

- 相对定位(position:relation; )

* - 当将元素的position设置为relative时，则开启了元素的相对定 位

* - 特点 ：

1.当开启了相对定位，而不设置偏移量时，元素不会发生任何变 化

2.相对定位是相对于元素自身在文档流中的位置来进行定位的

3.相对定位不会使元素脱离文档 流

4.相对定位不会改变元素的性质，块还是块，内联还是内 联

5.相对定位会使元素提升一个层 级

* - 层级

文档流 < 浮动 < 定 位

* - 偏 移量

* - 当元素开启了定位以后（position是非static的值），可以通过四个偏移量来设置元素的位 置

top 当前元素距离其 定位元素 的顶部的距 离

right 当前元素距离其定位元素的右侧的距 离

bottom 当前元素距离其定位元素的底部的距 离

left 当前元素距离其定位元素的左侧的距 离

* - 一般情况下，四个偏移量中只需要使用两个即可确定一个元素的位 置

* 一个水平的 一个垂直 的

top le ft

top rig ht

bottom le ft

bottom right

* 开启相对定位时，移动元素的位置，元素还是占据元素的空间（有占位现象）

- 绝对定位 (position:absolute; )

* - 将元素的position属性设置为absolute即可开启元素的绝对定 位

* - 特点 ：

1.绝对定位会使元素完全脱离文档 流

2.开启绝对定位以后，如果不设置偏移量元素的位置不会发生变 化

3.绝对定位相对于离他最近的开启了定位的祖先元素进行定位 ，

* -如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行 定位

* 所以：一般我们为一个子元素开启 绝对定位（position:absolute;）,同时也会开启其 父元素的 相对定位(position:relative;)

4.绝对定位会提升元素的一个层级

5.绝对定位会改变元素的性质，块元素的默认宽度和高度被内容撑开，内联元素变成 块元素

- 固定定位(position:fixed; )

* - 将position属性值设置fixed则开启了元素的固定定 位

* 固定定位也是一种绝对定位，大部分的特点都会绝对定位相 同

* - 不同的是固定定位的元素永远相对于浏览器窗口进行定位，当将元素放在了窗口的某一位置之后，相对于浏览器就不在改变位 置

* 而且固定定位的元素不会随滚动条滚 动

- opacity

* - 这个样式可以用来设置元素的透明 效果

* - 它需要一个0-1之间 的值

* 1 表示不 透明

* 0 表示完全 透明

* 这个样式IE8及以下的浏览器都不支 持

opacity: 0.3 ;

- 在IE8中需要使用filter来设置透明 度

* filter:alpha(opacity=透明度) ;

* 需要 0 - 100之间的 值

* 0 表示完全 透明

* 100 表示完全不 透明

filter:alpha(opacity=30) ;

-position:absolute ;

top:0 ;

left:0 ;

表示的是位置在原点处。

透明度的设置还可以通过：rgba(红色浓度，绿色浓度，蓝色浓度，代表了颜色的透明的程度)

14--层级(z-index)只有在开启定位的情况下，才能使用此属性。

* 当元素开启了定位以后，可以通过z-index来设置元素的层 级

* z-index需要一个整数作为参数，值越大层级 越高

* 两个元素发生重叠时，z-index值越大越优先显示，z-index值相同的优先显示下边的元 素

z-index: 99 ;

* -父元素的层级再高，他也不会掩盖住子元素。子元素的等级永远高于父元素，子元素总是在父元素的上面 。

margin:0 auto中不能居中的情况

1，脱离文档流的元素，比如开启浮动、绝对定位、相对定位都不能通过margin来实现居中

2，没有设置宽度的块级元素也不能实现居中

3，行内块元素不能实现居中