程序猿学习第八天,关于盒子模型

一、盒子模型
内容不多,麻烦不少。
盒子模型构成:内容+内边距+边框+外边距

盒子模型尺寸:网页元素尺寸+padding尺寸*2+border尺寸**2+margin尺寸*2,即为正常盒子尺寸。

通过css设置一个盒子的width 和 height 实际是设置了盒子模型中网页元素的宽高;
盒子模型的背景只会覆盖边框里边的区域;
许多标签都会有默认的内外边距,并且在不同的浏览器中的边距值是不一样的,就会导致我们布局的网页在不同浏览器中显示效果不一致,所以我们在布局网页的时候往往会手动清除这些边距;margin属性和padding属性。
可以给margin的属性值是 auto; 使整个盒子在父容器中居中显示,前提是该盒子模型不是填充父容器的

二、标准文档流
标准文档流是指  每个标签在浏览器中有各自的默认显示方式,有的标签不管内容多少都会独占一行,比如p div ul li h1 h2...H6 ;
有的标签有多少内容就占多大空间,比如 span strong img a;

独占一行的元素叫做 块级元素,
有多少内容占多大空间的元素叫做内联元素;
但是:我们可以通过修改元素的display属性改变其默认值,如果dispaly属性值是block,那么该元素就是块级元素,如果是inline 就是内联元素;

使用display属性可以设置元素显示方式,值:block/inline/none。

另外的内容会在后期学习更多内容后,结合练习经验统一进行整理。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值