一文彻底学会CSS-2

一文彻底学会CSS-2

一、背景相关的属性(background)

1.背景颜色

在这里插入图片描述

2.背景图片

在这里插入图片描述

3.背景平铺

在这里插入图片描述

4.背景位置

在这里插入图片描述

5.背景的连写

在这里插入图片描述

二、标签的三种显示方式(重要,必会!!)

在这里插入图片描述

1.块级元素

在这里插入图片描述

2.行内元素

在这里插入图片描述

3.行内块元素

在这里插入图片描述

4.三种显示方式的转换

在这里插入图片描述

三、行高(line-height)

在这里插入图片描述

四、伪类选择器(了解)

选择的元素的一种状态,并只是找到元素就没了

1.伪类选择器介绍

在这里插入图片描述

2. 伪类选择器注意点

在这里插入图片描述

五、居中方法小总结

1.让标签中的内容(文本、图片、span)水平居中

在这里插入图片描述

2.让标签中的内容(文本、图片、span)垂直居中

在这里插入图片描述

3.让盒子自身水平居中

在这里插入图片描述

4.让盒子自身垂直居中

在这里插入图片描述

六、盒子模型

一种思维方式(万物皆盒子,每个标签都可以看成是一个盒子)
在这里插入图片描述

1.盒子模型的组成

在这里插入图片描述

2.边框(border-边框-盒子的外纸壳)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.内边距(padding-内边距-盒子的泡沫)

在这里插入图片描述

4.计算盒子的大小

在这里插入图片描述
在这里插入图片描述

5.外边距(margin-外边距-盒子与盒子之间的距离)

在这里插入图片描述
在这里插入图片描述

6.清除默认内外边距

在这里插入图片描述

七、行高(line-height)(补充说明)

在这里插入图片描述

1.行高的单位

在这里插入图片描述

2.行高与font的连写

在这里插入图片描述

八、margin的两种特殊现象(了解)

1.marign的合并现象

在这里插入图片描述

2.margin的塌陷现象(面试和考试必考!)

在这里插入图片描述

九、浮动

1.浮动初体验

在这里插入图片描述

2.浮动的特点(了解)

在这里插入图片描述

3.浮动的案例

在这里插入图片描述
在这里插入图片描述

4.清除浮动(清除浮动的影响)

在这里插入图片描述

额外标签法

在这里插入图片描述

使用 overflow 清除浮动

在这里插入图片描述

使用伪元素清除浮动

在这里插入图片描述

设置高度

在这里插入图片描述

5.浮动的意义

在这里插入图片描述

十、拓展

1.关于行内的padding和margin使用

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/xiaotai1234/article/details/108526690