快捷导航
 
掌握这三点,就能弄懂css盒子模型,HTML+CSS 新手建议收藏! ...
VIEW CONTENTS
-推马SEO 门户 SEO知识 查看内容

掌握这三点,就能弄懂css盒子模型,HTML+CSS 新手建议收藏! ...

2018-10-22 22:21| 发布者: relaxing| 查看: 1388| 评论: 0
摘要: 怎么理解盒子模型?盒子模型是样式表(css)控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法,才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子,占据一定的页面空间。占据 ...

怎么理解盒子模型?

盒子模型是样式表(css)控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法,才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子,占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置。盒子模型是由内容、边框、间隙(padding)、间隔(margin)组成,他们的关系如下图所示:

掌握这三点,就能弄懂css盒子模型,HTML+CSS 新手建议收藏!

盒子实际宽度(高度)=内容(content)+边框(border)+间隙(padding)+间隔(margin)。对于任何一个元素设置width和height控制内容大小,也可以分别设置各自的边框(border)、间隙(padding)、间隔(margin)。灵活设置这些盒子的这些属性,可以实现各自排班效果。

掌握这三点,就能弄懂css盒子模型,HTML+CSS 新手建议收藏!

border

border是元素的外围,计算元素的宽和高要把border加上特别是特殊网站页面(比如说活动专题页面等)上,这一点是很多新手忽略的地方。border有三个主要属性,color(颜色)、width(粗细)和style(样式)。

1、color主要是指定border的颜色,一共有256的3次方种颜色供我们选择。通常是16进制的值,比如红色是“#FF0000”。

2、width是border粗细程度,可以设置为thin、thick和length,length为具体数值,比如说border:1px #CCC solid;其中1px指的是border的width,默认值是medium,一般浏览器解析为2像素。

3、style属性可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等,其中none和hodden是不显示border,hidden可以用来解决边框的冲突问题。对于groove、inset、outset、rigde、border-style,IE会出现兼容问题,使用时一定要注意。

掌握这三点,就能弄懂css盒子模型,HTML+CSS 新手建议收藏!

padding

padding用于控制content与border之间的距离,同时设置上下左右的padding时,可以这样写padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向的padding,逆时针排序,margin属性也可以这样书写。

掌握这三点,就能弄懂css盒子模型,HTML+CSS 新手建议收藏!

margin

margin用于控制块与块(可以理解成块级元素)之间的距离。为了便于理解可以把盒子模型想象成一幅画,content是画本身,padding是画与画框的留白,border是画框,margin是画与画之间距离。需要注意的是IE和firefox在处理margin时有一些差别,倘若设定了父元素的高度height值,如果此时子元素的高度超过了父元素的height值,二则显示结果完全不同,IE浏览器会自动扩大,而firefox(火狐浏览器)就不会,这一点是需要注意的。

关于盒子模型先聊到这,上面总结都是最简单的,一定要熟练掌握。每天学习一个知识点,每日寄语-“不妄求,则心安,不妄做,则身安.”


鲜花

握手

雷人

路过

鸡蛋

最新评论

VR视频更多
周排行

让创业更简单

  • 反馈建议:service_media@36kr.com
  • 客服电话:
  • 工作时间:周一到周五

云服务支持

精彩文章,快速检索

关注我们

Copyright 推马SEO-SEO网络推广|优化排名|SEO教程-seo站长论坛  Powered by©  技术支持: