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框架
待补充……
发表回复