css盒子模型

  1. css 盒子模型

css盒子模型由margin外边距、border边框、pdding内填充、centent内容四个属性组成。
width是内容的宽度,height是内容的高度。
外边距不会影响盒子,但是会影响盒子的位置

标准盒模型
在这里插入图片描述在标准模型中,如果你设置width和height,实际设置的是content box,pdding和border再加上设置的宽高一起决定整个盒子的大小
盒子的可见框大小为:width、height -> content

怪异盒子模型
在这里插入图片描述在怪异模型中,所有宽度都是可见宽度,所有内容宽度是该宽度减去边框和填充部分。
怪异模式下,这个盒子的可见框大小为:width、height -> content + padding + border

  1. css3 box-sizing

如何计算一个元素的总宽度和总高度
box-sizing:content-box;
将采用标准模式的盒子模型标准;
宽度和高度分别应用到元素的内边距,在宽度和高度之外绘制元素的内边框和边框
box-sizing:border-box;
将采用怪异模式的盒子模型标准
从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
box-sizing:inherit;
规定应从父元素继承box-sizing属性的值
- 应用1:量取尺寸时不用再去计算一些值
- 应用2:解决一些需要设置百分比的盒模型值

  1. css盒模型的注意点

****
 - padding不能为负,而margin可以为负值
 - 背景色会平铺到非margin的区域
 - margin-top传递的现象及解决方案
 - margin上下叠加的现象及解决方案
  1. css盒模型的注意点

块级盒子(block box)
div、p、h1、address(联系方式信息)、article、aside、blockquote(块级引用元素)、dd、dl、fieldset(表单元素分组)、figcaption(图文信息组标题)、figure(图文信息组)、footer、form、header、hgroup(标题组)、hr、ol、pre(预格式化文本)、section、table、ul

块级盒子的特性(block box)

  • 独占一行
  • 支持所有样式
  • 不写宽度的时候,跟父容器的宽度相同
  • 所占区域是一个矩形

内联盒子(inline box)
b、big、i、small、tt、abbr、acronym、cite、code、dfn、em、kbd、strong、samp、var、a、bdo、br、img、map、object、q、script、span、sub、sup、button、input、label、select、textarea

内联盒子的特性(inline box)

  • 盒子不会产生换行
  • 有些样式不支持,例如:width、height等
  • 不写宽度的时候,宽度由内容决定
  • 所占区域不一定是矩形
  • 内联标签之间会有空隙

自适应盒模型的特性

自适应盒模型是指当盒子不设置宽度时,盒模型相关组成部分的处理方式是如何的。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值