CSS：盒模型

时间 2019-11-13

标签 css 模型栏目 CSS 繁體版

原文原文链接

在CSS中有两种盒模型:html

(1)W3C标准盒模型：包括content(内容)，padding(内边距：内容与边框的距离)，border(边框)；margin(与其余元素的距离)，在此模型中，width/height(宽度和高度就是内容的宽和高)；htm

（2）IE下怪异模型：当html没有写<!doctype html>时，在IE6下就会开启怪异模式，此时的宽度和高度（width/height）=content+padding+border;blog

eg:input

应用：容器

在父子盒子中，给子元素加padding想要移动子元素的位置，而不改变父元素的大小，能够将标准模型转化为怪异模型（box-sizing:border-box;）;
eg:
结果：
box-sizing:border-box的应用:原生普通文本框<input >和文本域<textarea>的100%自适应父容器的宽度；width/border 和 padding 注定要共存，同时还要总体宽度 100%自适应容器。<input >，<textarea>都有border,并且须要padding的大小，不然输入的光标会顶着边框。自适应

解决: textarea{im

width:100%;d3

-ms-box-sizing:border-boxtextarea

box-sizing:border-box;margin

}
eg:
结果
box-sizing:改变width/height的做用细节；

内在盒子：content-box,padding-box,border-box,margin-box;默认状况下width是做用在content-box上的，box-sizing的做用是把width做用的盒子变成其余几个；

{

box-sizing:content-box;//默认值

box-sizing:padding-box;//

box-sizing:border-box;//支持，此时，border和padding/content平分width

box-sizing:margin-box;//不支持
注意事项：绝对定位的元素，使用百分比设置其宽和高时，它参考的是其第一个定位非static祖先节点的padding-box;即width:padding+content