11.22

Css的尺寸

Width  height  

Line-height 行高是有三部分构成，上间距 文本高度 下间距 且上下间距相等。所以文字居中。

行高 一旦设置行高了，元素内部必须有内容。

Line-height:3; 行高是当前数字乘以当前字体大小就是行高的值。

Display

这个属性规定元素以某种形式显示

display:none；当前元素不显示，不占用当前的空间了

Visibility:hidden;当前元素隐藏，还占用之前的空间。

Display:block; 当前元素以块级形式显示出来，往往可以将行级元素转块级元素。

Display:inline;当前元素以行级元素显示出来，往往可以将块级元素转行级元素

Display:inline-block; 当前元素以行级块显示出来，即不占用一行，也可设置宽高。

 

Float:

浮动 属性值有left/right

1. 浮动的元素脱离文档流了。

 

2.浮动的元素互相贴靠

浮动的元素会紧紧贴靠在一起，如果后面的窗口空间够这个浮动元素的宽，他会挨着前一个元素贴靠，如果窗口空间不够他的宽，他会找前一个的前一个元素贴靠，如果还不够继续往前找，不会越级去贴靠。这种排列方式叫流氏布局。

3.浮动的元素有文字环绕的效果

用在图文结合上。

清除浮动

浮动元素脱离了文档流，不在占用文档的空间，导致后面的元素会去紧跟着上一个元素的位置进行排列，我们清除浮动的目的就是杜绝这种现象发生。

1.给父级元素设置高度。

 

1. 给最后一个浮动元素后面加一个空元素 设置属性 clear:both;

 

1. 给浮动元素的父级设置一个类型 叫clearfix

.clearfix:after{     //伪类选择器   给这个父级后面设定一假的子代元素

Clear:both;    清除浮动

Height:0;  

Visibility:hidden;

Content:””; 内容

Display:block;

}