请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 224|回复: 5

Web开发学习心得4——CSS盒模式与排版

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-25 23:01:27 | 显示全部楼层 |阅读模式

首先简单讲一下盒模式,所谓盒模式,是CSS看待元素的方式,CSS将每个单一的元素都看作一个盒子,如下图所示:


之所以叫它盒模式,是因为它跟我们日常生活中的盒子非常相似,这里不多说了。CSS中大部分的属性都是用来控制content的,比如width、height、color等;padding、border、margin都是可选的,其中,padding、margin表示的是一片空白区域,只能控制其大小,border是一个可见的边框,可以控制其边框样式、粗细、颜色等。

下面主要讲一下排版。

在正常情况下,浏览器从HTML文件的开头开始,从头到尾依次呈现各个元素,块元素从上到下依次排列,内联元素在块元素内从左到右依次排列。而CSS的某些属性却能够改变这种呈现方式,这些属性就是这里要讲的,主要是float与position属性,另外还有clear属性以协助float,z-index属性协助position。这些属性值均无法继承。

float属性定位:

float属性值可以为left、right、none。none为默认值,表示不漂移该元素,浏览器以正常方式显示之,不必多说。若设置为left或right,则表示将该元素漂移到左方或右方。那什么叫漂移?

简单地说,漂移是指将某元素从正常流中抽出,并将其显示在其父元素的左方或右方的一个过程。这样说想来你还不一定明白,那么我们就分步骤来看一下浏览器是如何来漂移某元素的。

假设我们有以下html,为了能更清楚地看到布局,我们将各个部分都加上了一个红色的边框,并给段落加上橙色的背景色,源代码如下:

html
<body>
<div id="header">
<h1>
这里是头部。</h1>
</div>
<div id="content">
<div id="leftbar">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
</div>
<div id="main">
<p>
这里是主区域。</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
<p>
这在阳光明媚、春暖花开的日子里,我窝在家里跟大家分享我Web开发的学习心得,这是一种什么精神?!</p>
</div>
</div>
<div id="footer">
<p>
这里是脚部。</p>
</div>
</body>#header, #footer, #content, #leftbar, #main
{}{
border: solid 1px red;
}

p
{}{
background-color: Orange;
}

这段html在浏览器中将显示如下:

CSS盒模式与排版

CSS盒模式与排版


CSS盒模式与排版

CSS盒模式与排版
回复

使用道具 举报

0

主题

895

帖子

61

积分

注册会员

Rank: 2

积分
61
发表于 2016-7-1 09:36:07 | 显示全部楼层
能再解释的细节一些吗,具体的
回复 支持 反对

使用道具 举报

0

主题

590

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2018-5-8 09:03:59 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

5

主题

492

帖子

73

积分

注册会员

Rank: 2

积分
73
发表于 2018-5-16 15:14:03 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

1

主题

891

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2018-5-29 13:08:16 | 显示全部楼层
太给力啊 跪谢啊
回复 支持 反对

使用道具 举报

1

主题

1041

帖子

76

积分

注册会员

Rank: 2

积分
76
发表于 2018-10-25 12:41:20 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:00 , Processed in 0.267428 second(s), 44 queries .

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