第六讲:css盒模型

CSS盒模型

一个盒子中主要有5个属性:width、height、padding、border、margin。所有的标签无论是div、span、a都是盒子。图片、表单元素一律看做文本。

【案例】

CSS

div{

width: 200px;

height: 200px;

padding: 50px;

border:1px solid #ccc;

margin:10px;

}

HTML

box

div的盒模型如下图所示:

padding

padding就是内边距。css2.1前提下,padding区域有背景颜色和内容区域的背景颜色相同,即background-color填充所有boder以内的区域。

padding小属性

【案例】

CSS

div{

width: 100px;

height: 100px;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 30px;

padding-left: 40px;

border:1px solid #ccc;

}

HTML

div

【浏览器显示效果】

padding综合属性

【案例】

CSS

div{

width: 100px;

height: 100px;

padding:10px 20px;

border:1px solid #ccc;

}

HTML

div

【浏览器显示效果】

padding注意事项

一些元素,默认带有padding,比如ul标签等。我们做站的时候为了便于控制,所以要清除默认的padding。但*的效率不高,所以我们使用并集选择器,罗列所有的标签如:

【专业的清除默认样式的样式表】

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{

margin:0;

padding:0;

}

打赏规则

为了避免对于打赏模式产生误解,说明一下几点内容:

1.打赏纯粹自愿,金额不限;

2.打赏不能作为解答前端技术疑问的理由;

3.打赏不能作为催促更新文章的理由;

4.打赏不能帮你做毕业设计或论文;

5.打赏不能帮你做工作中的项目;

6.总之:打赏就是这不能那不能,只是单纯打赏而已。

声明

* 公众号(QD前端基地)内转载文章全部用于学习交流,如有涉及版权问题请与我联系,我会删除相关文章。给您带来不便敬请谅解,谢谢!

* 公众号(QD前端基地)内原创文章如内容不符合事实或涉及其他方面的问题,请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载,如有雷同纯属巧合。

* 转载公众号(QD前端基地)内的文章,请先与本文作者联系经过同意后方可转载,并注明相关出处和作者信息且留下原文链接地址,这是对文章作者的尊重,也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】:xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号,提供Web前端开发教程,是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下,也许你就成为牛逼的前端高手呢~

微信公众号:qdbase

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190109G091ZV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券