CSS笔记

川长思鸟来 2023-10-02 17:39 9阅读 0赞

**目录**

1. 三种样式介绍

1) 行间样式:

2) 内嵌样式:

3) 外链样式:

4) 样式的优先级:

2. 选择器

3. 关于背景颜色透明问题

4. 盒子模型的组成部分

5. 外边距的值

1)margin合写

2) 关于 margin 负值

3) 关于块元素使用margin居中显示

4) 关于margin塌陷 和 margin拖拽 问题:

5) 解决margin塌陷和margin拖拽方法:

6. 内边距的值

7.背景图片样式

8.浮动

9.定位

10.关于层级问题的使用注意事项:

11.转换的分类

1)块元素

2)行内元素

3)行内块元素

12.显示 和 隐藏 (导航栏效果)

13.强制在一行 , 溢出隐藏 , 出现省略号

--------------------

### 1. 三种样式介绍 ###

#### 1) 行间样式: ####

即在html中的标签中书写样式

#### 2) 内嵌样式: ####

即在html标签里面书写,控制标签样式

#### 3) 外链样式: ####

即通过 link 标签来引用,在外部的css文件中来控制标签样式,书写方式和内嵌样式的方法一样,但是需要在 head 标签里, style 标签外用 link 标签引用,引用的方式是:

<link rel="stylesheet" href="aaa.css">

#### 4) 样式的优先级: ####

行内样式 > 内嵌样式 ; 行内样式 > 外链样式 ;

内嵌样式和外链样式 , 谁最后执行 , 谁的优先级高 .

--------------------

### 2. 选择器 ###

1) id 选择器 \#

2) class选择器 .

3) 标签选择器 标签名

以上三者的优先级: id > class > 标签

4) 后代选择器 \#box .son .son\_li

5) 子代选择器 \#box > .son

6) 群组选择器 div , p , span , ···

7) 通配选择器 \*

8) 伪类选择器 :link 访问前

:visited 访问后

:hover 鼠标移入时

:active 鼠标按下时

--------------------

### 3. 关于背景颜色透明问题 ###

1) opacity : 0.5; 表示透明度为0.5(范围 0 - 1)

2) background : rgb(0 , 0 , 0 , 0.5) 表示透明度为0.5(范围 0 - 1)

3) 二者的相同点: 都表示可调节透明度

不同点: opacity 父级的背景颜色和子级都透明

rgba 只有父级背景颜色透明,而子级不透明

--------------------

### 4. 盒子模型的组成部分 ###

content (内容) + padding (内边距) + border (边框) + margin (外边距)

--------------------

### 5. 外边距的值 ###

#### 1)margin合写 ####

margin : 1px 2px 3px 4px; (顺时针,上 右 下 左 外边距分别为1px 2px 3px 4px)

注意: margin值(两个div之间)  上下边距取最大 ; 左右边距取之和

#### 2) 关于 margin 负值 ####

margin可以给负值,并且不影响其他布局

#### 3) 关于块元素使用margin居中显示 ####

使用 margin : 0px auto;

#### 4) 关于margin塌陷 和 margin拖拽 问题: ####

a. margin 塌陷

当父级的 margin - top 值大于子级的margin - top 值时,出现margin塌陷

b. margin 拖拽

当父级的 margin - top 值小于子级的margin - top 值时,出现margin拖拽

#### 5) 解决margin塌陷和margin拖拽方法: ####

a. 给父级添加边框 border : 1px solid \#000;

b. 给父级添加内边距 padding - top : 10px; (调父级高)

c. 给父级添加溢出隐藏 overflow : hidden ;

d. 给父级添加浮动 float : left / right ;

e. 给父级添加定位 position : absolute / fixed ;

f. 给父级转行内块 display : inline - block ;

--------------------

### 6. 内边距的值 ###

padding : 1px 2px 3px 4px;

(顺时针与外边距一样 , 上内边距1px;右内边距2px;下内边距3px;左内边距4px)

注意: 使用内边距,需要注意调整元素的宽高 .

--------------------

### 7.背景图片样式 ###

background : url(图片的路径) no-repeat center top border-box;

background-repeat : no-repeat / repeat-x / repeat-y; 表示是否平铺 / x轴平铺 / y轴平铺

background-position : left top; 表示背景图片定位在左上位置

background-size : 100% / cover; 表示图片大小

background-clip : border-box / content-box; 表示背景图片围绕边框 或 内容区域内显示

注意: 背景图片的大小,不能合写

--------------------

### 8.浮动 ###

float : left / right ; 表示左浮动 或 右浮动;

注意:什么时候使用浮动:

一般上下布局变左右布局,使用浮动

1)同级的元素,一个给浮动,其他兄弟元素都要给浮动

2)子级给浮动,父级要清浮动

清浮动的两种方式:

1)overflow : hidden ; (溢出隐藏 , 有缺点)

2).clearfix : after \{

display : block ;

content : ' ';

clear : both;

.clearfix\{

zoom : 1 ;

--------------------

### 9.定位 ###

1) 相对定位 :

position : relative ;(依据自身定位)

2) 绝对对位 :

position : absolute ;(依据有定位的父级定位,就近原则;如果父级都没有定位,依据body定位)

3) 固定定位 :

position : fixed ;(依据body定位,不依据有定位的父级定位)

--------------------

### 10.关于层级问题的使用注意事项: ###

1)z-index 中的数字越大,层级越高

2)在使用z-index层级的基础上,一定要有定位(什么定位都可以)

--------------------

### 11.转换的分类 ###

#### 1)块元素 ####

①特点 : 独占一行 , 支持宽高

②转换成块元素 display : block ;

#### 2)行内元素 ####

①特点 : 不独占一行 , 不支持宽高

②转换成块元素 display : inline ;

#### 3)行内块元素 ####

①特点 : 不独占一行 , 但支持宽高

②转换成块元素 display : inline - block

--------------------

### 12.显示 和 隐藏 (导航栏效果) ###

显示 : display : block ;

隐藏 : display : none ;

--------------------

### 13.强制在一行 , 溢出隐藏 , 出现省略号 ###

white - space : nowrap ;

overflow : hidden ;

text - overflow : ellipsis ;

CSS笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 CSS笔记

相关 CSS笔记

相关 CSS笔记

相关 CSS 笔记

相关 css笔记

相关 CSS笔记

相关 CSS笔记

相关 css笔记

相关 CSS笔记

相关 CSS笔记