CSS学习（1）

学习资源：
1、学习CSS布局
2、CSS 禅意花园
3、CSS 开发者指南【MDN】
4、HTML Dog
5、CSS ZEN GARGEN

HTML/CSS/JS的前世今生【过去的需要了解CSS2，未来的需要掌握CSS3】

学习CSS布局

没有布局

---

display
1、每个元素都有一个默认的display属性，其值与元素的类型有关。
2、可以重写。比如：把li元素最改成：display: inline;，制作水平菜单。
3、设置成block的元素与设置成inline的元素的区别？
4、设置成none用在哪些地方？比如： script标签是display: none;。常用在js中控制元素的显示与隐藏【弹出框】。
5、display: none;与visibility: hidden;的区别？

---

margin: auto; 与 max-width
{width: 600px; margin: 0 auto;}与{max-width: 600px; margin: 0 auto;}
当浏览器宽度小于元素的宽，就会产生水平方向的滚动条。
解决：提倡使用后者。处理小窗口视图【移动设备】。
针对display属性是block的元素。

---

与元素宽度相关的盒子模型
1、元素的宽度是什么？包含了什么？
2、盒子【margin-left + border-left + padding-left + content + padding-right + border-right + margin-right】

---

box-sizing->盒子模型的重点
1、border-box与content-box
2、元素box-sizing的默认属性是content-box，即：元素的宽和高是content部分；
3、border-box：元素的宽和高是border+padding+content

---

定位position
1、static【没有定位、在文档流中】
2、relative【相对于自身定位、在文档流中】
3、fixed【相对于浏览器定位，不在文档流中】
4、absolute【相对于离它最近的非static定位的父元素定位，如果没有，就是相对于body定位，不在文档流中】
5、例子？？

---

float属性
1、文字环绕图片

---

clear属性
1、控制浮动

---

如何清除浮动？
1、这是一潭很深的水！

---

如何使用浮动布局？
1、两列布局，三列布局，，，
2、用定位实现同样的布局？？

---

百分比宽度【百分比的坑】
1、相对计量单位的关键点是：相对于谁？
2、百分比宽度布局【响应式布局】

---

媒体查询
1、做针对各种设备兼容的页面
2、meta viewport？？？

---

inline-block
1、IE6、IE7不支持该属性值
2、hasLayout【只是用来支持旧的浏览器】
3、inline-block布局与float布局【具体实现与对比】
4、inline-block布局注意的点：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
【没仔细理解，明天看】

---

columns属性【CSS布局】
1、支持IE9及其以上
2、例子

---

flex-box的各种布局
1、支持性不友好
2、例子

---

CSS框架