一 css盒模型

所有html元素都可以被认为是盒子. css盒模型代表网站的设计和布局.它由边距(margin),边框(border),填充(padding)和实际内容组成.

属性以相同的顺序工作:顶部(top),右侧(right),底部(bottom)和左侧(left)

二 认识盒模型

网页的每个元素都是一个盒子.

css通过盒模型来确定一个元素的大小以及如如何放置它们.

使用盒模型时,了解元素的总宽度是如何计算的 非常重要

例如,带有填充(padding)的盒子的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和.

如果有边距,边框和填充,总的宽度是左右边距,左右边框,左右填充以及内容的实际宽度的总和.

当你使用css设置元素的宽度和高度属性时,可以设置内容区域的宽度和高度.

在盒模型中设置背景颜色时,将覆盖内容区域以及填充(padding)

元素的总高度的计算方式与计算宽度总宽度的方式相同.

总而言之,总元素高度=高度+顶部填充(padding-top)+底部填充(padding-bottom)+顶部边框(border-top)+底部边框(border-bottom)+顶部边距(margin-top)+底部边距(margin-bottom)

三 css边框

css的border属性允许你自定义html元素的边框

为了向元素添加边框,你需要指定边框的大小,样式,颜色

下面的示例显示如何向段落添加纯绿色边框

html代码:

<p class="border">人不可有傲气,但不可无傲骨</p>

css代码:

p.border{ padding:10px; border:5px solid green; }

效果如下:

★border宽度

border的属性可以单独设置.border-width属性指定边框的宽度

html代码:

<p class="first">就算成长的环境再阴暗,也有开花的权利</p>

<p class="second">有一种能力,是持续不断的努力</p>

css代码:

p.first{ padding:10px; border-style:solid; border-width: 2px; }

p.second{ padding:10px; border-style:solid; border-width:5px; }

效果如下:

border颜色

可以使用颜色名称关键字,RGB或十六进制值定义元素的边框颜色

如:border-color:blue; border-color:#0000FF; border-color:rgb(0,0,255); 都将设置边框颜色为蓝色

border-style的默认值是none,它没有定义边界

边框样式属性支持各种样式:虚点(dotted),虚线(dashed),双线(double),groove(凹槽),ridge(屋脊),inset(内凹),outset(外凸),hidden(隐藏)等.下面的例子说明了它们之间的区别

html代码:

<p class="none">人的一生,是很短的,短暂的岁月要求我好好领会生活的进程</p>

<p class="dotted">人生应该如蜡烛一样,从顶燃到底,一直是光明的</p>

<p class="dashed">善于利用零星时间的人,才会做出更大的成绩来</p>

<p class="double">人生并不是因为美丽才可爱,而是因为可爱才美丽</p>

<p class="groove">如果有什么需要明天做的事,最好现在就开始</p>

<p class="ridge">如果是玫瑰,它总会开花的</p>

<p class="inset">青春种下什么,老年时就收获什么</p>

<p class="outset">路漫漫其修远兮,我将上下而求索</p>

<p class="hidden">与有肝胆人共事,从无字句处读书</p>

css代码:

p.none{ border-style:none; }

p.dotted{ border-style:dotted; }

p.dashed{ border-style:dashed; }

p.double{ border-style:double;}

p.groove{ border-style:groove;}

p.ridge{ border-style:ridge;}

p.inset{ border-style:inset;}

p.outset{ border-style:outset;}

p.hidden{ border-style:hidden;}

效果如下:

在css中,可以使用以下属性为不同的边指定不同的边框:border-top-style,border-right-style,border-bottom-style,border-left-style.

四 css宽度与高度

将一个<div>元素的总宽度和高度设置为100px:

html代码:

<div class="first">我的宽和高都是100px哦</div>

css代码:

div.first{ border:5px solid green; width:90px; height:90px; }

效果如下:

div的总宽度和高度将是 90px+5px(border)+5px(border)=100px;

元素的宽度和高度也可以使用百分比来分配

要设置元素的最小和最大高度或宽度,可以使用以下属性:

●min-width:元素的最小宽度

●min-height:元素的最小高度

●max-width:元素的最大宽度

●max-height:元素的最大高度