共计 2360 个字符，预计需要花费 6 分钟才能阅读完成。
1.Float 布局
上面这段代码
div {background-color: #00FFFF;}
p {
width: 50px;
height: 50px;
border: 1px solid black;
}
#p1 {background-color: #A52A2A;}
#p2 {background-color: #DEB887;}
#p3 {background-color: #5F9EA0;}
#p4 {background-color: #FF7F50;}最后的展现成果是
当咱们给第一个 p1 增加 float 属性：right，让他浮动到右方之后
#p1 {
background-color: #A52A2A;
float:right;
}
能够看到 p1 曾经浮动到左边，且前面三个盒子顺次向上移占据了 p1 原本的地位，阐明当咱们设置 float 属性之后，浏览器会把它从惯例的文档流移走，它本来的地位也就空进去了
而且 float 属性，不会让盒子产生 margin 塌陷，能够看到浏览器自带的 margin，p1 浮动到左边之后，p2 的 margin 曾经塌陷而 p1 依然保留
当咱们把所有盒子都设置为 float:left 时
p {
width: 50px;
height: 50px;
border: 1px solid black;
float: left;
}
咱们能够看到，蓝色盒子曾经被齐全压缩了，因为咱们之前说过，设置 float 属性会让盒子脱离以后的文档流，因而这四个盒子绝对于失常文档流来说不存在了，自适应调节使得其只蕴含 <section>
如何复原呢？在某个盒子上应用clear 属性，将禁止其余盒子浮动在其四周，
section {clear:left;}
能够看到当禁止 p1,p2,p3,p4 浮动在 <section> 右边之后，<section> 自成一行，成为最左端的标签
当咱们给 p2 减少高度且设置 float:right 之后
#p2 {
background-color: #DEB887;
float: right;
height: 100px;
}
如果咱们不想让 p2 和 p3 在竖直方向上重叠，给 p3 设置
p3 {clear:right}
当 p1 的高度过高时，就会重叠 p3
#p1 {
background-color: #A52A2A;
height: 200px;
float: left;
}
这时咱们能够设置 clear:both
这样既禁止盒子在 p3 右边 float，也禁止盒子在 p3 左边 float
当初咱们想要设计两个段落，别离飘浮在界面的左右两侧
p {
width: 50%;
border: 1px solid black;
float: left;
}
#p1 {background-color: #A52A2A;}
#p2 {background-color: #DEB887;}
但理论状况却是
两个段落并没有像咱们所冀望地浮动在同一行，而是换行了，起因是默认的 box-sizing 仍是 conten-box，当咱们设置 p 的 width 是 50%, 这代表两个 content 曾经各占一半了，当咱们再增加 border:1px，这无疑是压死骆驼的最初一根稻草，因为空间的不够，导致换行，为了把 border 也算在盒子理论尺寸内，应用box-sizing:border-box
最初删去所有的背景色彩
* {box-sizing: border-box;}
div {/* background-color: #00FFFF;*/}
p {
width: 50%;
/* border: 1px solid black;*/
float: left;
padding: 10px;
}
因为 float 属性，咱们在压缩浏览器时，仍能保障冀望的布局，这是因为咱们并没有应用固定的高度与宽度，而是百分比，他会依据以后窗口大小自带调整
2.Relative and Absolute Element Positioning
绝对定位与相对定位
对于所有 HTML 元素来说，除了 <HTML> 之外，所有元素的 position 均是动态的，<HTML> 是 relative。
- 绝对定位
positon:relative
此语句相当于给你的盒子 四个顶点都增加锚点 ，如图顶点处的彩色小点，之后能够挪动该盒子
须要留神的是，坐标系是 右 – 下型 的，也就是如图所示，
top:间隔顶部边界的长度
left: 间隔左边界的长度
right： 间隔右边界的长度
bottom： 间隔底部的长度
绝对定位只是视觉上把你的盒子挪动到了别的中央，而浏览器则认为原来的中央依然存在该盒子，
如果给父元素开启 relative，那么挪动父元素时，其蕴含的子元素均将被挪动
- 相对定位
position:absolute
开启相对定位之后会让 该元素脱离失常的文档流，该元素原先的地位将会被认为空置，相对定位是绝对于它最近的先人而言的，其先人必须是 relative 或者 absolute, 倘如均为设置，则会冒泡到 <HTML> 元素上
3.Media Queries
media Quweies 就是针对不同的设施，咱们的网站该如何显示，根本语法是
- **@media(media feature){}
- **@media(media feature) 逻辑运算符 (and–&&(and 对应与) ,–|(逗号对应或)){}
也就是当满足 () 内的 media feature 时，{}外面的款式就会失效
举例：
@media (min-width: 1200px) {
#p1 {width: 80%;}
#p2 {
width: 150px;
height: 150px;
}
}倘如以后媒体设施像素宽度至多在 1200px 以上时，那么 p1 标签的宽度就会达到 80%, 当压缩浏览器窗口至 1200px 以下时，该款式又会生效
又如：
@media (min-width: 992px) and (max-width: 1199px) {#p1 {}示意设施像素在 992–1199px 之间。
4.BootStrap 框架
待补充 ……
