源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[CSS] CSS 盒模型、块状元素与内联元素、CSS选择器

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2010-1-7 00:19:32 | 显示全部楼层 |阅读模式
CSS实例 盒模型、块状元素与内联元素、CSS选择器. 【例子】
要求:
1)宽度、高度均是200像素;
2)颜色为红色#900;
自己做做,看看能不能作出来?先不要看我的代码,如果真的做不出来,就下载下来,跟着我下面说的一步一步修改。
下面是我的代码:  例子1.rar (498 Bytes)
在IE6和FF中显示效果如下图:
 未标题-2.gif

怎么样,比较容易吧~,但是你们有没有发现,红色区域离浏览器的顶部和左边的边距IE6和FF的不一样,有没有发现?这样的话,我们作出来的页面浏览器就不兼容了,效果不一样了?为什么会这样?
这是因为每个浏览器都有一个内置的CSS文件,当你没有对某个标签的属性设置的时候,浏览器就会应用内置的CSS文件,怎么才能做到浏览器兼容?不着急,你只需要在CSS文件中,将我们目前应用到得标签body和div置零就OK了,代码这么写
body,div{padding:0; margin:0;}
当把这句话加上之后,是不是两款浏览器显示效果一样了吧~如下图

未标题-2副本.gif

好,我们接着来,现在再加一个条件
3)让红色区域与浏览器的顶部和左边距离为20像素;

怎么样,有没有思路?没有思路没关系,继续向下看
我们,只需要设置红色方块的外边距就可以了,添加如下CSS代码:
margin-top:20px;
margin-left:20px;
效果如下图

111.jpg

这样就使红色区域定位于页面坐标(20,20)处了,与浏览器上边距和左边距都为20像素。
不过上面的这种写法我们可以精简为
margin:20px 0 0 20px;

其中的数值顺序是:上右下左。
而margin:20px 0;则和margin:20px 0 20px 0;是等价的哟~只不过是更加精简而已,这样写CSS加载速度会更快。

我们接着将问题延伸,怎样才能让红色区域水平定位于浏览器的正中间,无论浏览器窗口的大小,显示器分辨率的大小。
也很简单,刚刚加的两句话"margin-top:20px;margin-left:20px;"修改为

margin:0 auto;

怎么样,有意思吧,红色区域是不是位于浏览器的正中间了~

好~!到这里第一节课结束,是不是很简单,或者太简单了!!!KwooJan可以保证,后面的课程照样很简单,当你看完教程,肯定会说XHTML+CSS就这么简单!easy!
如果你有看不懂的,赶紧点击文章最上面的课程关键词,只要你看了这些关键词,相信你绝对能明白!

第一次写教程,不知道大家能不能看懂,能不能接受,如果你觉着不错,就顶我吧,如果你有建议或者想法,就直接留言,我会在下节课改进!
回复

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2022-8-20 13:42:57 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-10-27 12:28:36 | 显示全部楼层
很不错的玩意
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2023-10-11 03:15:02 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

1

主题

1万

回帖

51

积分

注册会员

Rank: 2

积分
51
发表于 2023-11-16 18:14:43 | 显示全部楼层
啪啪啪生怕PSP怕
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2023-12-8 09:14:53 | 显示全部楼层
来看看怎么样
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2024-5-4 00:31:15 | 显示全部楼层
飞飞飞飞飞飞飞飞飞飞飞飞飞
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2024-5-11 20:10:03 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2024-5-18 00:13:17 | 显示全部楼层
快更新啊,我擦
回复 支持 反对

使用道具 举报

5

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-5-21 08:06:34 | 显示全部楼层
人都不在了啊 啊
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-28 23:53 , Processed in 0.133924 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表