1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

2天驾驭DIV+CSS!第二课

作者:用户 来源:互联网 时间:2016-06-25 10:23:06

background像素元素px方块margin-top

2天驾驭DIV+CSS!第二课 - 摘要: 本文讲的是2天驾驭DIV+CSS!第二课, 大家应该明白Float的作用了吧,就是为了消除块状元素“霸权主义”的一把利器! 页面布局有两种方式 1)浮动Float 2)定位Position 今天就来

大家应该明白Float的作用了吧,就是为了消除块状元素“霸权主义”的一把利器!

页面布局有两种方式
1)浮动Float
2)定位Position

今天就来一个小小的练习,让大家理解Float的含义
【例子】
要求:
1)两个方块,一个红色#900,一个蓝色#009;
2)红色方块宽度和高度均为200像素,蓝色方块
宽度为300像素,高度为200像素;
3)红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素;
页面效果如下:
2天驾驭DIV+CSS!第二课-2天驾驭div <a href=css">
源代码如下:
<!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=gb2312" />
<title>例子2</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<div id="redBlock"></div>
<div id="blueBlock"></div>
</body>
</html>
/* CSS Document */
body,div{padding:0; margin:0;}
#redBlock{
 width:200px;
 height:200px;
 background:#900;
 margin-top:20px;
 margin-left:20px;
}
#blueBlock{
 width:300px;
 height:200px;
 background:#009;
 margin-top:20px;
 margin-left:20px;
}
大家应该注意到了,虽然红色方块的宽度并不是100%,但是蓝色并未和红色处于同一行,这就是块状元素比较“霸道”的一点,(即使块状元素的宽度不是100%,它也不允许其他元素和他同在一行)为了消除这种“霸权”,让红色和蓝色方块都处在一行,如图:
2天驾驭DIV+CSS!第二课-一堂课学会div css
此时就需要拿出我们的利器Float!只需要在红色方块的CSS里面加上“float:left;”,这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了,并且处于一行了,但是在FireFox中却变成了如下效果:
2天驾驭DIV+CSS!第二课-div css课件
这时候就需要注意了,FF中如果前面的区域浮动了,后面的那个区域很有可能就会和前面的区域发生重叠并错位。
怎么才能解决这个问题,解决这个浏览器兼容的问题,很容易,只需要在蓝色方块的CSS代码中也加入“Float:left;”,问题就解决了,加上试试,看看在FF中蓝色方块是不是和红色方块处于一行了~
到这里,大家应该明白Float的作用了吧,就是为了消除块状元素“霸权主义”的一把利器!在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟.
细心的同学会注意到,在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素,而是40像素,如下图:
2天驾驭DIV+CSS!第二课-div css
其实这是IE6的一个BUG,(IE6双倍边距BUG),只要满足下面3个条件才会出现这个BUG: 
1)要为块状元素;
2)要左侧浮动;
3)要有左外边距(margin-left);
解决这个BUG很容易,只需要在相应的块状元素的CSS树形中加入“display:inline;”,代码如下:
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}
现在再看看,是不是IE6和FF显示一样了呢~

呵呵,这节课也比较容易吧,如果大家有不明白的可以留言,我会做进一步解释。
下节课,我们讲讲“浮动清除(Clear)”问题!
最终代码如下:
<!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=gb2312" />
<title>例子2</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<div id="redBlock"></div>
<div id="blueBlock"></div>
</body>
</html>
/* CSS Document */
body,div{padding:0; margin:0;}
#redBlock{
 width:200px;
 height:200px;
 background:#900;
 margin-top:20px;
 margin-left:20px;
 float:left;
 display:inline;
}
#blueBlock{
 width:300px;
 height:200px;
 background:#009;
 margin-top:20px;
 margin-left:20px;
 float:left;
}



本文来自www.cssxuexi.cn*尊重他人劳动成果,转载请自觉注明出处! 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索background , 像素 , 元素 , px , 方块 margin-top 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

css-CSS选择器的问题:.class.class{}

...果有空格,表示的是父子关系,即第一个属性节点的包含第二个属性的子节点,比如.id1 .id2表示的是包含.id1样式的子节点中包含.id2样式的节点 如果没有空格,表示的是同一个节点,即一个元素包含第一个属性同时包含第二个...

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。 不过,你将能完整网页内容的HTML构成要素:更重要的...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

...块的特点 在一行内显示,有行高 None:不显示,display:none; 第二节 CSS引入的方式 行内,内嵌,外部 a)  行内        i.     在标签内部,直接使用style=”CSS规则”       ii.      容易写错:文字 1.  这个地方用冒号 b)  ...

第二课(MySQL基础知识)

过滤数据select * from table_name where column_name = 5; select * from table_name where column_name = ‘5’; 字符串需要用单引号隔开 select * from table_name where column_name != 5; select * from table_name where column_name between 5 and 10; select * from table_name where column_name...

原生js练习题---第二课(上)

0x1百度输入法 实现效果: See the Pen 2-01百度输入法 主要是切换的判断条件,一开始我还用点击次数的奇偶性来判断-_-||,其实直接检查菜单有没有显示即可。检查的时候有个小trick,初始状态菜单的style属性为空,因为我们接下...

前三篇
后三篇