css background-image显示全部_CSS笔记（1）

一、CSS的排版现象、布局问题

1.<link rel=" " href=" " media="print"> 表示只给打印机显示的样式引用。

2.CSS抄袭的排版概念

1

上下margin合并，只有10px

3.消除上述CSS的排版现象

2

4.display会影响列表的小圆点

（1）display:list-item;是默认的，加或不加都可以

3

（2）加 display:block;可以去掉小圆点

4

（3）加display:inline;不光可以去掉小圆点，还能排列成一行

5

(4)加display：inline-block;好像也等同于display:inline;的效果

6

5.影响margin的属性

7

（1）在.child{}里添加了margin-top:100px;效果如下：

8

（2）修改代码，改用outline（outline不占位置）

9

（3）往.child{}里添加margin-top:100px;蓝框下移100px,儿子超出老爸

10

（4）修改代码，如下，parent现在把child和margin包住了

11

（5）去掉border-top:1px solid black;

12

(6)去掉以后，再换上padding-top:10px;结果parent又把child的margin给包住了，只不过又多了10px

13

（7）那么除了border-top和padding-top之外，还有什么可以实现相同效果？

答：display:inline-block;

14

display:flex;

15

display:table;

16

overflow:hidden;

17

前提是，父子全部加上 width：100%；

display:block;不能实现。

18

6.内联样式

19

这里position改变了display:inline;变成了display:block;

而且，display:table;也会变成display:block;

20

7.float浮动元素

浮动元素并不是真的浮了上去，浮动元素只是为了图文混排，将文字贴在图片周围而设计的。它影响文字，不影响div。

21

8.方方写的CSS不正交的博客：

为什么 CSS 这么难学？​www.zhihu.com

二、其他知识点

1.CSS发明者有：哈肯·维姆·李、伯特·波斯

2.CSS升级很快、属性很多、元素属性之间相互影响，难以完全掌握。

3.CSS中常用套路不多，不外乎布局、居中、文字省略，位置变换、动画过渡等。记住几个常见的写法即可：两种水平居中、三种垂直居中、两种左右结构、两种左中右结构、一行省略、多行省略。

4.CSS中没有复杂的逻辑，记忆型知识居多，只要多做demo会看文档就可以掌握CSS。

5.想学好CSS，可以多看看张鑫旭的博客。

注：本文著作权归本人和饥人谷所有，转载请注明来源。