CSS除了能够改变字体、背景和所有其他属性,还能够完成基本布局任务。

div+css通过浮动和定位、盒子模型等技术应用,是最常用的布局方式。

定位的基本思想很简单,它允许定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,另一个元素甚至浏览器窗口本身的位置。

另一方面,css1提出浮动。浮动不完全是定位,不过,他当然也不是正常流布局。

浮动

声明<img src ="b5.jpg" align="right">会导致一个图像浮动到右边,而允许其他内容(文本)“围绕”该图像。css允许浮动任何元素,从图像到段落再到列表,所有元素都可以浮动,使用属性float实现。

因此,上述代码还能写作<img src ="b5.jpg" style="float:left">。

浮动元素

对于浮动元素,有几点要记住。首先,会以某种方式将浮动元素从文档的正常流中删除,影响布局。一个元素浮动是,其他内容会“环绕”该元素。

注意,浮动元素周围的外边距不会合并。如果浮动一个有20像素外边距的图像,在这个图像将至少有20像素的空间。如果其他元素与此图像响铃,而且都有外边距,那么这些外边距不会与浮动图像的外边距合并。

如果确实要浮动一个非替换元素,则必须为该元素声明一个width,否则,浮动段落可能只有1个字符宽。

不浮动

除了left和right外,float属性还有一个值。float:none用于防止元素浮动。也许不会认为,如果让一个元素不浮动,就不声明float,实际上,要得到正常的非浮动元素,必须有这个值,不然所有元素都会以某种方式浮动。

浮动的详细内幕

深入讨论浮动的详细内容之前,首先要建立包含块的概念。浮动元素的包含块是最近的块级祖先元素。因此,在以下标记中,浮动元素的包含块就是包含该浮动的段落元素:

<h1>Test</h1>
<p><img src ="U54.jpg" style ="float:right;border:1px solid #000">
This is paragraph text,but you knew that. Whthin the content of this paragraph id an image that's been floated.The containing block for the floated image is the paragraph.
</p>

此外,浮动元素会生成一个块级框,而不论这个元素本身是什么,因此如果让一个链接浮动,即使该链接本身是行内元素,通常会生成一个行内框,但只要她是浮动的,就会生成一个块级框,规则:

1)浮动元素的左右边界不能超出其包含块的左右内边界。(虽然设置负边距或浮动元素比其父元素更宽,会让其出现在父元素的外面。)

2)浮动元素的左右外边界必须是源文档中之前出现的左浮动(或右浮动)元素的有(左)边界,除非后出现浮动元素的顶端在先出现的浮动元素的底端下面。

浮动内容都是可见的,不必担心一个浮动元素与另外一个浮动元素重叠。而使用定位情况会完全不同,可能会导致元素相互覆盖。

3)左浮动元素的右边界不会在其右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左浮动元素的右外边界的左边。

4)一个浮动元素的顶端不能比其父元素的顶端更高。如果一个浮动元素在两个合并外边距之间,放置这个浮动元素时就好像在两个元素之间有一个块级父元素。

这能防止浮动段落一直向上移动到三个段落共同的父元素顶端。

5)浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。

6)如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶部当不能比包含该元素所生成框的任何行框的顶端更高。

7)左(或右)浮动元素的左边(右边)有另一个浮动元素,前者的右外边界不能在其包含块的有(左)边界的右边(左边)。

8)浮动元素必须尽可能高低放置。

9)左浮动元素必须向左尽可能元,右浮动元素必须向右尽可能元,位置越高,就会向右或向左浮动得越远。

实用行为

在段落1中插入左浮动的图片:

这样看浮动元素超出了左元素的底端,但是不明显。前面讨论的浮动规则只处理乐路浮动元素和其父元素的左右和上边界,而没有涉及下边界。

css2.1澄清了浮动元素行为的一个方面:浮动元素会延伸,从而包含其所有后代浮动元素。

设置图片左边距10像素,同时添加Test标题的背景和边框:

由于浮动元素同时处于流内和流外,所以这种情况肯定会发生。标题的内容由浮动元素“显示”,不过标题元素的宽度还是和父元素相等。为了避免盖在浮动元素下面,具体内容并不从其内容区左边界开始显示。

清除

你可能并不总是希望内容流过浮动元素,某些情况下,可能要特意避免这种行为。在这种情况下,你希望将没小节第一个元素设置为禁止浮动元素出现在它旁边。如果第一个元素可能放在一个浮动旁边,则会向下推,直到出现子啊浮动元素的下面,而且所有后续内容都在其后面出现。

这可以利用clear属性完成。

给标题“Test”添加属性clear:left

类似于html中的<br clear = "left">防止h3元素左边有浮动元素,还会把h3推过所有左浮动元素,不过还允许浮动元素出现在h3右边。

css细节复习笔记——浮动的更多相关文章

  1. css细节复习笔记——基本视觉格式化

    css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个 ...

  2. css细节复习笔记——结构与层叠

    每个合法的文档都会生成一个结构树,有了结构树元素的祖先.属性兄弟元素等等创建选择器来选择元素,这是CSS继承的核心.继承是从一个元素向后代元素传递属性值所采用的机制.面向一个元素使用哪些值时,用户代理 ...

  3. css细节复习笔记——内边距、边框和外边距

    一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确 ...

  4. Css深入理解之浮动_慕课网课程笔记

    前言 这篇是在慕课网上跟着张鑫旭重走CSS之路的第三篇学习笔记了,主要是学习float属性,闲话少说,下面进入正文. float的历史 要想了解一个东西,我们还是需要从本质去了解它,那么我们就需要问一 ...

  5. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

  6. css 细节收集

    细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...

  7. css随堂笔记(三)

    Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 ...

  8. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  9. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

随机推荐

  1. DevExpress GridView 整理

    1:去除 GridView 头上的 "Drag a column header here to group by that column" -->  点击 Run Desig ...

  2. c# 数据集调试工具插件

    DataSetSpySetup,调试期查看dataset数据集的记录内容, Debug DataSet

  3. URL的名称设置

    1. 对于login.html 此为跳转文件, 加入了参数nid,在views.py中进行关于request.POST.get()的文件中获取 <a href='/detail?nid={{k} ...

  4. maven 统一管理依赖的版本号

  5. linux 解析json

    epel源 yum install jq ====================== [root@mhc NaHan-master]# curl 127.0.0.1:5000/v2/_catalog ...

  6. 47. Permutations II (Back-Track, Sort)

    Given a collection of numbers that might contain duplicates, return all possible unique permutations ...

  7. Element DatePicker日期范围选择

    前7天后7天 <el-date-picker v-model="value1" type="date" :picker-options="pic ...

  8. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  9. 6-Ubuntu与Windows不能相互复制

    在安装Ubuntu系统后发现与Windows系统的文件不能相互复制,网上查了很多教程,发现都是不能用的,能实现的方法如下所示: 第一步: sudo apt-get autoremove open-vm ...

  10. log日志查看

    (1)类型1: TcLogCls::add_log($data, __METHOD__ . '::订单号:' . $order_no, 'tc_order'); (2)类型2: