zoukankan      html  css  js  c++  java
  • css013 构建基于浮动的布局

    css013 构建基于浮动的布局

    基于浮动的布局时利用float属性是网页上的元素并排,并创建列

    float有三个值:left 、right 、none

    1、假设要把一张图片浮动到网页的左侧

    .float-left{

       float:eft;

    }

    假如要把一个装满内容的<div>浮动到一边,形成一个侧边栏

    .sidebar{

       float:left;

       150px;

    }

    2、设计一个简单的两列布局需要的几个步骤

    a、 把每列都包在一个带有ID或class属性的<div>标签里面

    b、把侧边栏<div>浮动到左侧或者右侧

    c、 给浮动的侧边栏设定一个宽度

    宽度可以是一个固定的尺寸,也可以是基于浏览器窗口宽度的弹性设置,使用百分比。

    d、     给正文添加一个margin-left

    (要仔细弄明白了)

     

    一、    用浮动进行布局

    1、让所有的列都浮动让所有的列浮动时要注意每一列的宽度,列宽度总和应该小于总宽度

    2、在浮动元素中浮动 

    3、在浮动元素中浮动

    二、    克服浮动问题

    1、清除浮动和保持浮动

    a、 在<div>的底部添加一个清除元素

    b、浮动外围元素:让浮动元素的<div>也浮动起来

    c、 利用overflow:hidden; (如果容器中有绝对定位的元素,它们可能会显示不出来。例如:当一个下拉菜单中有另一个标签或者下拉菜单时,就会显示不出来)

    d、   使用Mico Clear Fix

    利用html分区元素,添加一个类,如:

    <div class=”clear”>

    在css中写:

    .clear{

      clear:both;

    }

    2、多列布局

    三、    多列的布局

    1、设置列项目:column-count

    设置列列之间的间隔:column-gap

    在列之间绘制一条直线:column-rule

    如:给这个类定义一个名为:multicol的类,创建一个3列的布局,间隔为1em ,并添加一条黑色的虚线

    . multicol{

        column-count:3;

        column-gap:1em;

        column-rule:1px dotted black;

    }

    3、创建全网页高度的列

    假设有个3列的设计,第一列为25%宽,第二列有50%,第三列有25%。你想让背景色为红白蓝。

    <div class="wrapper">

         <div class="sidebar1">hello everyone!</div>

         <div class="main">i am the main content</div>

         <div class="sidebar2">nice to meet you!</div>

    </div>

    添加一个线性渐变,让颜色站与列的宽度相匹配

     .wrapper{

         background-color: linear-gradient(left,

                red:0%,

                red:25%,

                white:25%,

                white:75%,

                blue:75%,

                blue:100%);

    }

    添加供应商版本的代码:

             ……

    4、防止浮动下落

    浮动下落(float drop)总是犹豫没有组否的空间容纳所有的列才造成的

    5、用box-sizing防止浮动下落

    box-sizing的三个值分别如下:

    a、 content-box

    b、  box-sizing:content-box

    屏幕宽度为width属性值+padding值+border值

    c、 padding-box

    box-sizing:padding-box

              屏幕宽度为width属性值+padding值

    d、           border-box

    box-sizing:border-box

    屏幕宽度为width属性值+border值

  • 相关阅读:
    css3动画之1--animation小例子
    炎炎夏日,走入美妙的前端设计案例
    模拟腾讯、携程、百度音乐 移动端图片切换第一版
    仿QQ空间长图效果简易版--母亲节感恩
    001-搭建框架
    javascript事件绑定1-模拟jquery可爱的东西
    图片尺寸
    mvc3结合spring.net-依赖注入
    *创建索引初步
    Lucene的分词_中文分词器介绍
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5111588.html
Copyright © 2011-2022 走看看