css float特性

日期:2021-03-18 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

网页页面合理布局方法

网页页面合理布局方法,关键包括:文本文档流、波动层、float特性。

文本文档流

HTML网页页面的规范文本文档流(默认设置合理布局)是:从上到下,从左到右,遇块(块级元素)换行。

波动层

波动层:给元素的float特性取值后,便是摆脱文本文档流,开展上下波动,紧贴着父元素(默认设置为body文字地区)的上下边框。而此波动元素在文本文档流空出的部位,由后续的(非波动)元素填充上去:块级元素立即填充上去,若跟波动元素的范畴产生重合,波动元素遮盖块级元素。内联元素:有时间隙就插进。

float 特性详细介绍

  ① left :元素向左波动。

  ② right :元素向右波动。

  ③ none :默认设置值。

  ④ inherit :从父元素承继float特性。

示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>2.3-float特性</title>
    <style type="text/css">
        #a
        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b
        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c
        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d
         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style>
</head>
<body>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>

2. float:left

表明:元素向左波动。

编码变动

  1. input2 加上:float:left
  2. div-b 加上:float:left
  3. div-d 加上:float:left

变动后主视图

① 访问器的宽度“不足长”时

② 访问器的宽度"够长"时

    

结果

当今元素归类(float:left)
下1个相邻元素归类(不含float)
结果
块级元素(a)
块级元素(b)
b会填充a遗留下下来的室内空间,a会和b产生重合,a的涂层在上面。
 
内联元素(b)
b会紧跟在a的后边。并依据本身内联元素的特性,是不是换行。
内联元素(a)
块级元素(b)
b不容易追随a的挪动。
 
内联元素(b)
b会紧跟在a的后边。并依据本身内联元素的特性,是不是换行。

3. float:right

表明:元素向右波动。

编码变动

  1. input2元素:加上 float:right
  2. div-b 加上:float:right
  3. div-d 加上:float:right

变动后主视图

① 访问器的宽度“不足长”时

② 访问器的宽度"够长"时

结果

当今元素归类(float:right)
下1个相邻元素归类(不包括float)
结果
块级元素(a)
块级元素(b)
b会填充a遗留下下来的室内空间,若a会和b产生重合(父器皿宽度降低),a的涂层在上面。
 
内联元素(b)
b会填充a遗留下下来的室内空间。
内联元素(a)
块级元素(b)
b不容易追随a的挪动。
 
内联元素(b)
b会填充a遗留下下来的室内空间。

4. 邻近元素含有float特性 

因内联元素的特点,最好是别把内联元素与块级元素邻近应用float特性。

下面都以块级元素为例:

默认设置主视图:

4.1 float:left

给这3个div都加上 float:left

主视图

①访问器的宽度"充足长"

②访问器的宽度"不足长"

结果

    Ⅰ 邻近的波动元素,left特性最前面的元素,排在最左边。

    Ⅱ 变成波动元素后,在波动层有着内联元素的"特点",当好几个波动元素1排容不下时,就换行。

4.2 float:right

给这3个div都加上 float:right

主视图

①访问器的宽度"充足长"

②访问器的宽度"不足长"

结果

    Ⅰ 邻近的波动元素,right特性最前面的元素,排在最右面。

    Ⅱ 变成波动元素后,在波动层有着内联元素的"特点",当好几个波动元素1排容不下时,就换行。

4.3 height高宽比不等的块级元素

把div-a的height值设为超过div-b,3个div都加上 float:left后:

主视图

①访问器的宽度"充足长"

②访问器宽度变小时

③访问器宽度进1步变小时

结果

Ⅰ height不相同的div波动元素排列时,照有着内联元素的"特点",当好几个波动元素1排容不下时,就换行。

处理访问器宽度变小形变

把加上float的特性的div元素嵌入在1个div中,并给此div加上width和height特性。访问器宽度变小时,也不容易产生形变。

上一篇:CSS3制做旋转实际效果 返回下一篇:没有了