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框架

待补充......