图文环绕和浮动
- 最初的CSS只是用来写文章，熟练使用float和clear两个属性来布局：
float属性:指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动中移除，尽管仍然保持部分的流动性（与绝对定位相反）。
float: left; /* 左浮动 */
float: right; /* 右浮动 */
float: none; /* 不浮动 */
float: inline-start ; /* 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。 */
float: inline-end ; /* 关键字，表明元素必须浮动在其所在块容器的结束一侧，在ltr脚本中是右侧，在rtl脚本中是左侧。 */
clear属性：指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 在它的下面。clear 属性适用于浮动和非浮动元素。
clear: none; /*元素不会向下移动清除之前的浮动。 */
clear: left; /*元素被向下移动用于清除之前的左浮动。 */
clear: right; /* 元素被向下移动用于清除之前的右浮动。 */
clear: both; /*元素被向下移动用于清除之前的左右浮动。 */
clear: inline-start; /* 在某个区域的左侧浮动或右侧浮动。 */
clear: inline-end; /* 在某个区域的右侧浮动或左侧浮动。 */
- 浮动元素会脱离文档流,设置文字与图片之间的间距需要对图片设置margin-right、margin-top等。
将图片变成半透明代码：
.image {
opacity: 0.5;
}
- 布局步骤：
1.给要布局的元素加边框，如：
border: 1px solid red;
2.浮动布局（浮动布局后显示为块级元素），给要布局的元素加float，如：
float: left; /* 左浮动 */
float: right; /* 右浮动 */
3，清除浮动，给加了float的父元素加clearfix。
- 补充清除浮动的方法，但最好不使用，用clearfix清除浮动。
图片对齐问题
- 网页中，图片的底边默认和文字的基线对齐，图片下边会有空白，除去空白的两种方法：
/* 第一种：将图片设置成其他对齐方式，比如居中对齐 */
p img {
vertical-align: middle;
}
/* 第二种：将图片转换成块级元素 */
.logo img {
display: block;
}
flex和grid的兼容支持情况
-
flex：只有IE不支持，如图：
1.png
-
grid：IE、Opera Mini、QQ Browser不支持，如图：
2.png
清除浮动使用zoom: 1的作用
zoom:1;属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。但它没有通过W3C验证。
网友评论