html中盒子模型的基本知识点 盒子大小的计算

盒子模型
边框的样式有 solid dashed(虚线) dotted(点线) border-style:solid;
边框的宽度:border-style:1px;
边框颜色:border-color:red;
简写属性:线宽 线型 颜色 例如: border:1px solid red;

1.所有带有前缀的样式属性名 都有一个简写属性,前缀就是他们的简写属性名
例如 border-color 简写属性为border
background-color 简写属性为background 在编写时优先使用简写属性,进行样式设置


2.简写属性的值,就是将所有分立属性的值依次列举出来,之间用空格隔开,一般情况下没有先后顺序的限制

3.简写属性在设置样式时,如果有一些分立属性没有设置,会自动设置为默认值,所以在使用简写属性时,必须保证她写在所有分立属性之前,防止他将一些已经设置的分立属性叠加


标准盒模型尺寸的计算
盒子模型的实际宽度:width+左右padding+左右border
盒子模型的实际长度:width+上下padding+上下border

border以内的盒子区域 统称为盒子的可视区域

width height设定的区域,称为内容区域content,我们写在一对标签中的
内容只能出现在width和height设置的区域
padding margin 两个属性主要用来改变内容的位置关系 和 盒子的位置关系






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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值