css013 构建基于浮动的布局

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

float有三个值:left 、right 、none

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

.float-left{

float:eft;

}

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

.sidebar{

float:left;

width: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值

css013 构建基于浮动的布局的更多相关文章

  1. ch8 基于浮动的布局(两列浮动布局、三列浮动布局)

    CSS布局技术的根本是3个基本概念:定位.浮动.外边距操纵. 只需要设置希望定位的元素的宽度,然后将它们向左或向右浮动.因为浮动的元素不再占据文档流中的任何空间,它们就不再对包围他们的块框产生任何影响 ...

  2. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

  3. 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

    [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...

  4. 使用PowerApps快速构建基于主题的轻业务应用 —— 进阶篇

    作者:陈希章 发表于 2017年12月14日 在上一篇 使用PowerApps快速构建基于主题的轻业务应用 -- 入门篇 中,我用了三个实际的例子演示了如何快速开始使用PowerApps构建轻业务应用 ...

  5. 构建基于WCF Restful Service的服务

    前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添加服务端引用才能使用(虽然看到网络上已经提供了这方面的Dynamic Proxy,但是没有这种方式简便), ...

  6. maven-bundle-plugin插件, 用maven构建基于osgi的web应用

    maven-bundle-plugin 2.4.0以下版本导出META-INF中的内容到MANIFEST.MF中 今天终于把maven-bundle-plugin不能导出META-INF中的内容到Ex ...

  7. 正则表达式引擎的构建——基于编译原理DFA(龙书第三章)——3 计算4个函数

    整个引擎代码在github上,地址为:https://github.com/sun2043430/RegularExpression_Engine.git nullable, firstpos, la ...

  8. 构建基于Javascript的移动web CMS——模板

    在上一篇<构建基于Javascript的移动CMS--Hello,World>讲述了墨颀 CMS的大概组成,并进行了一个简单的演示样例,即Hello,World.这一次,我们将把CMS简单 ...

  9. Net 项目构建基于Jenkins + Github + Mono 的持续集成环境

    Net 项目构建基于Jenkins + Github + Mono 的持续集成环境 阅读目录 1 安装 2 配置 3 测试 在Redhat enterprise 6.5 的服务器上,为在gutub 上 ...

随机推荐

  1. 【CSS】 background

    background: #22b4ff //背景色 url("http://images.cnblogs.com/cnblogs_com/oiliu/529256/o_titleIMG.jp ...

  2. oracle 在分区内查询数据

    查看当前分区 select t.partition_name,t.num_rows from all_tab_partitions t where table_name='table_name' 单个 ...

  3. AndroidStudio修改项目名称

    项目名称修改了,想修改Android Studio 中 project的名字 右键project 的名字,refactor - rename ,填写好新名字后修改,被提示 “can’t rename ...

  4. 【BZOJ 3672】【UOJ #7】【NOI 2014】购票

    http://www.lydsy.com/JudgeOnline/problem.php?id=3672 http://uoj.ac/problem/7 链上的情况可以用斜率优化dp.树上用斜率优化d ...

  5. c#如何使输入数据类型限制,C#如何添加限制

    验证n位的数字:^\d{n}$ ,例如要输6位数字,不能多也不能少: ^\d{6}$ 验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$ ...

  6. 使用 Daynamic 动态添加属性

    所谓的Dynamic 动态类型,页面也要是动态的(强撸) 很简单的 直接上代码: //案例一 DynamicpersonCollection = new ObservableCollection(); ...

  7. 由多线程引起的map取值为null的分析

    昨天写了一个多线程的程序,却发现了一个很奇特的问题,就是我的map对象明明put了,可是get的时候竟然会取到null,而且尝试多次,有时候成功,有时候取到null,并不确定. 程序代码如下: pub ...

  8. bzoj2653: middle

    首先,对于每个询问,我们二分答案 然后对于序列中大于等于中位数的数,我们把它们置为1,小于中位数的数,置为-1 那么如果一个区间和大于等于0,那么就资磁,否则就不滋磁 这个区间和呢,我们可以用主席树维 ...

  9. BeautifulSoup_python3

    1.错误排除 bsObj = BeautifulSoup(html.read()) 报错: UserWarning: No parser was explicitly specified, so I' ...

  10. NOIP2014

    DAY1 生活大爆炸版石头剪刀布 直接模拟即可. // codevs3716 #include<algorithm> #include<iostream> #include&l ...