css笔记19：浮动的案例
案例一：
1. 首先是01.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="01.css" />
</head> <body>
<div class="div1">
<div class="div2 special_div">1div</div>
<div class="div2">2div</div>
<div class="div2">3div</div>
<div class="div2">4div</div>
<div class="div2">5div</div>
<div class="div2">6div</div>
</div>
</body>
</html>
2. 然后01.css文件：
@charset "utf-8";
/* CSS Document */ .div1 {
width:800px;
height:800px;
border: 1px solid pink;
} .div2 {
width:150px;
height:100px;
border:1px solid blue;
background-color:pink;
margin-top:5px;
margin-left:5px;
text-align: center;
float:left;/*左浮动：指让该元素尽量向左边移动，让出自己右边的空间，给下一个元素*/
} .special_div {
height:120px;
}
效果图：
总结：
浮动是一个重要的概念，分为左浮动、右浮动和清除浮动。
特别注意：如果一行宽度不够排下所有的div，则会自动换行;当然如果有某个div过大，则会卡住别的div，如上图会后移
案例二：
1.首先是01.html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="01.css" />
</head> <body>
<div class="div1">
<div id="div3" class="div2">1div</div>
<div class="div2">2div</div>
<div class="div2">3div</div>
</div>
</body>
</html>
2.然后是01.css文件：
@charset "utf-8";
/* CSS Document */ .div1 {
width:800px;
height:800px;
border: 1px solid pink;
} .div2 {
width:150px;
height:100px;
border:1px solid blue;
background-color:pink;
margin-top:5px;
margin-left:5px; text-align: center;
} #div3 {
float:right;/*右浮动：让该元素尽量向右移动，直到碰到他的父元素的右边界*/
}
效果图：
css笔记19：浮动的案例的更多相关文章
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- HTML+CSS笔记 CSS进阶再续
CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- 写给后端的前端笔记：浮动（float）布局
写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
- JAVA自学笔记19
JAVA自学笔记19 1.集合总结 Collection(单列集合) List(有序可重复) ArrayList:底层数据结构是数组 ,查询快,增删慢.线程不安全,效率高 Vector:底层数据结构是 ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
随机推荐
- web服务器分析与设计（五）--一些总结
随着年龄与经验的增加,对于软件方面的分析与设计也会有一些新的认识.下面做个近期的总结: 1,关于到底用不用作设计的问题: 在最近两个公司,原有人马是不会作设计(我自己的感觉),也察觉不到作设计的任何冲 ...
- 关于C++ vector的拷贝
定义了vector变量,在使用时直接用了等号赋值,后来发现有问题,就查了一下vector怎么赋值? 说明:vector是一个构造对象,不能直接使用=符号进行复制,必须迭代每个元素来复制.或者重载=操作 ...
- Layout No collapsible
center 不可折叠 其它的,没有 title 没法折叠 title 使用子控件的
- work5
这一次写的内容是黄金豆小游戏,由于现在偏重写服务器端.对于算法层面其实涉及不多,更多偏于工程上的架构. 总而言之本次作业的服务器核心是用web.py所写,而且为了方便其他用户写客户端,架构非常简单. ...
- VHDL TestBench基础（转）
TestBench的主要目标是: 实例化DUT-Design Under Test 为DUT产生激励波形 产生参考输出,并将DUT的输出与参考输出进行比较 提供测试通过或失败的指示 TestBench ...
- 糟糕的双重检查加锁（DCL)
在Java并发编程时,同步都会存在着巨大的性能开销,因此,人们使用了很多的技巧来降低同步的影响,这其中有一些技巧很好,但是也有一些技巧存在一些缺陷,下面要结束的双重检查加锁(DCL)就是有缺陷的一类. ...
- Kerberos和NTLM - SQL Server
当我们使用Windows Authentication去连接SQL Server的时候,SQL Server可能会使用Kerberos或者是NTLM来进行认证,有时间就会因为认证失败的缘故造成各种登录 ...
- Android应用开发多语言drawable目录
Android程序多语言的支持是就该Value目录不同国家的区分,前面文档有介绍相相应的国家名称Value怎样写 例如以下说下多语言图片的替换也是就该图片目录目录drawable目录例如以下: Bac ...
- stm32上的Lava虚拟机开发进度汇报（2）
现在已经基本完成了Lava主要函数的编写,但还是有几个问题没解决: 1.实心圆和实心椭圆 2.FillArea 3.GetWord 其中FillArea如果没有很好的解决方法就算了,GetWord用g ...
- C++ 内存相关
1.C++的内存管理可分为以下几个部分: 栈:记录程序的执行过程. 堆:采用new,delete申请释放内存. 自由存储区:对应于C中使用malloc,free申请释放内存. 全局存储区:也叫静态存储 ...