CSS：盒模型

悠悠 2022-01-13 10:04 315阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

在CSS中有两种盒模型:

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

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

eg:

应用：

*  在父子盒子中，给子元素加padding想要移动子元素的位置，而不改变父元素的大小，可以将标准模型转化为怪异模型（box-sizing:border-box;）;
 *  eg:![65698628786737440914f2dc160ee4ae338.jpg][]
 *  结果：![ad2f2cdeda89e92230aa9a827b43dfbb769.jpg][]
 *  **box-sizing:border-box的应用:原生普通文本框<input >和文本域<textarea>的100%自适应父容器的宽度；**width/border 和 padding 注定要共存，同时还要整体宽度 100%自适应容器。**<input >，<textarea>都有border,而且需要padding的大小，否则输入的光标会顶着边框。**
    
    **解决: textarea\{** 
    
    **width:100%;**
    
    **-ms-box-sizing:border-box**
    
    **box-sizing:border-box;**
    
    **\}**
 *  **eg:**
 *  ![2908ba7a79874fb17251897b059dec06b30.jpg][]
 *  结果
 *  ![19d8a9cf26a3f75138ec55d045d916523c1.jpg][]
 *  **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**

转载于:https://my.oschina.net/u/4045971/blog/3017010

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/8afedfcd9e094dc9b9f993b89bb7a7c6.png
[65698628786737440914f2dc160ee4ae338.jpg]: /images/20220113/a7bec29efd744174991f2681945d38cd.png
[ad2f2cdeda89e92230aa9a827b43dfbb769.jpg]: /images/20220113/76cf4c99f8bd431793cda3e5767c5d38.png
[2908ba7a79874fb17251897b059dec06b30.jpg]: /images/20220113/f1b9d5fc8bea44e692b4df49b189cc45.png
[19d8a9cf26a3f75138ec55d045d916523c1.jpg]: /images/20220113/b333dcfb38f644bf8e01b086dabb0966.png