CSS老师授课3-float

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7 *{
 8     margin:0px;
 9     padding:0px;}
10 .a
11 {
12     width:200px;
13     height:400px;
14     border:1px double red;}
15 </style>
16 </head>
17
18 <body>
19 <div class="a" style="float:left;">1</div>
20 <div class="a" style="float:right;">2</div>
21 <div class="a" style="float:left;">3</div>
22 <div class="a" style="float:right;">4</div>
23 <div class="a" style="float:left;">5</div>
24 <div class="a" style="float:right;">6</div>
25 <div class="a" style="float:left;">7</div>
26 <div class="a" style="float:right;">8</div>
27
28 </body>
29 </html>

无标题文档

1

2

3

4

5

6

7

8

时间: 2024-11-10 00:50:31

CSS老师授课3-float的相关文章

CSS样式表-1 老师授课

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

【从0到1学Web前端】CSS定位问题二(float和display的使用)

display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构.对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的. 浏览器支持: 所有主流浏览器都支持 display 属性. 注释:任何版本的 Internet Explorer (包括 IE8)都不支持 "inherit"."inlin

CSS重要属性之float学习心得

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

【51CTO学院三周年】聆听小马老师授课,技能大增啊

大家好,我是2012年注册的51CTO会员帐号.我之前一直学程序开发,对数据分析,大数据这些内容很感兴趣,linux系统管理也有兴趣.51CTO汇集了好多IT名师大家的授课,内容很丰富,对我的学习帮助很大. 去年下半年打算学习HadoopMapreduce,而要搭建这个计算环境,必须先搭建双机或多机的Linux操作系统,所以首先要学习Linux课程,我选择了上座率最高的小马老师的课,结果一下子就被小马老师的授课风格给吸引了,他授课完全脱离课本教材,不是照本宣科的那种,语言诙谐,幽默风趣,善于用生

CSS定位——position、float小结

在CSS使用position属性来指定元素的定位类型,该属性有四种不同类型的定位,分别为static(默认定位).relative(相对定位).absolute(绝对定位)和fixed(固定定位). 要理解以上四种定位,写看一下CSS的文档流(普通流)概念: 除非专门指定,否则所有框(也就是html元素)都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.若某元素的position属

CSS入门:CSS中Position、Float属性深入探讨

文章来源:http://www.zretc.com/technologyDetail/430.html Position.Float是平时使用频率非常高的两个CSS属性,对于这两个属性的使用,可能大多数人存在一些模糊与不清晰的地方.今天小卓为大家分享的文章主要是对这两个属性使用上的介绍,以及两个属性交叉使用上的一些探讨. 1.HTML布局的基本要点 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(box model) HTML的普通流(no

CSS 中,用 float 和 position 的区别是什么?

呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果.float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切.float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.并且float这也是目前使用最多的网页布局方式.不过需要注意的是清除浮动是你可能需要注意的地方.并且如果你要考虑到古老的IE6

Css中position、float和clear整理

Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom&