CSS盒子模型(续一)

来源:互联网 发布:js a href click 编辑:程序博客网 时间:2024/06/07 03:07

上一次的博客我们已经对盒子模型进行过总结了,下面就是我根据最近的学习,更深的一点体会了


优点
用CSS排版有一个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。

其次就是可以减少我们网页的大小,因为我们的对网页的设计都放在了CSS里边,而且好多部分都是可以继承的。这是我们的编码也简单了起来


实现结构与表现的分离
结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},这样结果body内容部分没有外加任何表现控制的标签。

如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:

<p><font color="#FF0000" face="宋体">段落内容</font></p>


介绍一下 float
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float语法:
float : none | left |right
参数值:
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边
float只解决了我们的左右浮动问题,居中的问题以后的博客再去总结啦。

0 0