Css的尺寸,display属性,浮动和清除浮动。

Css的尺寸
  width height
  line-height 行高是由三部分构成,上间距,文本高度,下间距,且上下间距相等
  行高 一旦设置行高了,元素内部必须有内容。
  line-height:3;行高是当前数字乘以当前字体大小就是行高的值
Display
  这个属性规定元素以某种形式显示
  display:none;当前元素不显示
  Visibility;当前元素隐藏,还占用之前的空间
  Display:block;当前元素以块级形式显示出来,往往可以将行级元素转块级元素。
  Display:inline;当前元素以行级元素显示出来,往往可以将块级元素转行级元素。
  Display:inline-block;当前元素以行级块显示出来,即不占用一行,也可设置宽高
float(浮动)
  属性值有left/right
  1.浮动的元素脱离文档流了
  2.浮动的元素互相贴靠
  浮动的元素会紧紧贴靠在一起,如果后面的窗口空间足够这个浮动元素的宽,他会挨着前一个元素贴靠,如果窗口空间不够他的宽,他会找前一个的前一个元素贴靠,如果还不够继续往前走,不会越级去贴靠。这种排列方式叫流氏布局。
  3.浮动的元素有文字环绕的效果(用在图文结合上)
清除浮动
  浮动元素脱离了文档流,不在占用文档的空间,导致后面的元素回去紧跟着上一个元素的位置进行排列,我们清除浮动的目的就是杜绝这种现象发生。
  1.给父级元素设置高度。
  2.给最后一个浮动元素 后面加一个空元素 设置属性 clear:both;
  3.给浮动元素的父级设置一个类型。叫clearfix
    .clearfix:after{ //伪类选择器
        clearn:both; //清除浮动
        height:0;
        visibility:hidden;
        content:""; //内容
        display:block;
          }

猜你喜欢

转载自www.cnblogs.com/guoyaoning/p/11912413.html