目录
1. CSS 为什么难学（不正交 + 属性多 + 性价比低）
-
position: fixedvstransform -
marginvsborder -
小圆点vsdisplay -
position: absolutevsdisplay: inline css filter
2. 学不好 CSS 也没有什么问题
- 记住几个常见的写法即可：两种水平居中、三种垂直居中、两种左右结构、两种左中右结构、一行省略、多行省略
- 别人研究出来我直接用即可
3. 想学好 CSS？
- 通读 specs
- 20篇以上博客（张鑫旭）
- 做好 “学好了但是没有什么卵用” 的心理准备
4. 跟着方方学造轮子
https://github.com/FrankFang/wheels
原始样式
html 发明出来的时候，还没有 css ，那怎么使用样式呢？
：要什么属性加什么属性，以标签的形式
<body bgcolor="yellow">
<h1><center><font color="red">标题</font></center></h1>
</body>
上面就是以标签的形式，给body添加背景颜色，让h1居中 并且颜色变为红色
CSS 样式
给 html 加一个标签，专门用来设置样式 <style></style>
<style>
body{
background-color: yellow;
}
h1{
color: red;
text-align: center;
}
</style>
<body>
<h1>标题</h1>
</body>
通过<link> </link>标签，引用 css
<link rel="stylesheet" href="xxx.css" media="print">
添加media="print"，只给打印提供样式
如果不深入了解 CSS
如果不深入了解 css，就会发现 css 不正交，因而有些反直觉。不正交主要表现在两点：
各属性之间互相影响
marginvsborder
小圆点vsdisplay
position: absolutevsdisplay: inline各元素之间互相影响
position: fixedvstransform
float影响inline元素
兄弟元素间margin默认合并
<style>
div {
border: 1px solid red;
height: 100px;
margin: 10px
}
</style>
<body>
<div></div>
<div></div>
<div></div>
</body>
http://js.jirengu.com/jamoxohuru/1/edit?html,output
上面代码默认产生上下margin合并的问题
受border影响，margin不合并
<style>
.demo {
border: 1px solid red;
height: 100px;
margin: 10px
}
</style>
<body>
<div class="demo"></div>
<div style="border-top: 0.1px solid blue"></div>
<!--添加 border 为 1px ，影响了 margin
border 为 0px ，又不影响 margin
border 为 0.1px 四舍五入为 0px ，却又影响 margin
-->
<div class="demo"></div>
<div class="demo"></div>
</body>
http://js.jirengu.com/qaloxesiko/1/edit
上面的方法是：在要消除合并的元素中间添加一个兄弟元素，设置其border: 0.1px solid;
<style>
.demo {
border: 1px solid red;
height: 100px;
margin: 10px
}
</style>
<body>
<div class="demo"></div>
<div style="display: table"></div>
<!--display: table 和
display: flex 会阻断合并
-->
<div class="demo"></div>
<div class="demo"></div>
</body>
http://js.jirengu.com/ceromuxemu/1/edit
上面的方法是：在要消除合并的元素中间添加一个兄弟元素，设置其display: table或者display: flex
父子元素间margin默认不合并
<style>
.child{
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
.parent{
background-color: lightgreen;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
http://js.jirengu.com/didiluzize/1/edit?html,output
受border影响，margin合并
<style>
.child{
height: 100px;
border: 1px solid red;
margin-top: 100px;
}
.parent{
background-color: lightgreen;
border-top: 0.1px solid blue;
/* padding-top: 10px; */
/* display: inline-block;
width: 100%; */
/* display: table;
width: 100%; */
/* overflow: hidden; */
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
http://js.jirengu.com/kikoq/1/edit
上面例举了 5 种情况，会出现margin合并
小圆点
<style>
li{
display: list-item;
}
</style>
<body>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</body>
<li></li>默认的display: list-item小圆点只负责给list-item元素的
受display影响，小圆点消失
<style>
li{
display: block;
/* display: inline; */
/* display: inline-block; */
}
</style>
<body>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</body>
http://js.jirengu.com/dijik/1/edit
上面的代码：display会影响小圆点
positon影响display
<style>
.parent{
background: lightblue;
height: 100px;
position: relative;
}
.child{
display: inline; /* 设置元素为 inline */
/* display: inline-block; */
border: 1px solid red;
position: absolute;
bottom: 0;
right: 0;
}
</style>
<body>
<div class="parent">
<div class="child">内联样式</div>
</div>
</body>
http://js.jirengu.com/jemix/1/edit
上面的代码，position会影响display: inline;和display: inline-block;把类型变为block
transform影响position: fixed;
<style>
.parent{
background: lightblue;
height: 100px;
position: relative;
/* transform: scale(.9) */
}
.child{
display: inline;
border: 1px solid red;
position: fixed;
bottom: 0;
left: 0;
}
</style>
<body>
<div class="parent">
<div class="child">内联样式</div>
</div>
</body>
http://js.jirengu.com/viyin/1/edit
试试去掉上面的注释，看看有什么变化
原因：由于它做了变形，所以它要把里面的所有元素都一起变形，即使是fixed定位
浮动元素影响内联元素的文字
<style>
.parent{
background: lightblue;
height: 100px;
}
.clearfix::after{ //清除浮动
content: '';
display: block;
clear: both;
}
.float{
background: rgba(255,0,0,0.5);
width: 100px;
height: 60px;
float: left;
}
.child{
width: 300px;
height: 50px;
background: white;
}
</style>
<body>
<div class="parent clearfix">
<div class="float">浮动元素</div>
<div class="child">你好</div>
</div>
</body>
http://js.jirengu.com/mizoz/1/edit
浮动元素是用来做图文混排的，需求就是文字环绕图片，所以你好两个字会自动去找浮动元素的边缘，去环绕这它，这就是为什么行内元素会感知到浮动元素
CSS 学习的易点
- 背套路即可应付日常工作
水平居中
垂直居中 - 巧用工具（自动生成代码）
CSS 3 Generator
