盒子模型

Posted 2020-11-21 sspofa

盒子模型

1. 页面布局的三大核心，盒子模型，浮动和定位

2. 网页布局过程

   • 先准备好相关网页元素，网页元素基本都是盒子Box
   • 利用CSS设置好盒子样式，然后放到相应位置
   • 往盒子里面装内容

3. 盒子模型的组成

   • 所谓盒子模型：就是把html页面中的布局元素看做是一个矩形的盒子，也就是 一个盛装内容的容器，CSS盒子包括：边框、外边距、内边距、和实际内容

     • border：边框

       • 组成：边框宽度、边框样式 、边框颜色

       • border：border-width|border-style|border-color

         • 属性	作用
           border-with	定义边框粗细，单位是px
           border-style	边框样式：solid：实线边框、dashed：虚线边框、dotted：点线边框
           border-color	边框颜色

       • 边框简写

       • border：1px solid red； #没有顺序

     • 表格边框的粗细

       • border-collapse：collapse；

       • collapse：合并

       • border-collapse：collapse；表示相邻边框并在一起

       • 【注意】

         • 边框会额外增加盒子的实际 大小。两种解决方案
           1. 测量盒子大小的时候不量边框
           2. 如果测量的时候包含了边框，则需要widthheight减去边框宽度

     • content：内容

     • padding：内边距

       • 用于设置内边距，即边框与内容之间的距离

         • 属性	作用
           padding-left	左内边距
           padding-right	右内边距
           padding-top	上内边距
           padding-bottom	下内边距

       • 简写

         • 值的个数	表达的意思
           padding：5px；	1个值，代表上下左右都有5像素内边距
           padding：5px 10px；	2个值，代表上下5像素，左右10像素内边距
           padding：5px 10px 20px；	3个值，代表上5像素，左右10像素内边距，下内边距20像素
           padding：5px 10px 20px 30px；	3个值，代表上5像素，左10像素右20像素内边距，下内边距30像素

       • 【注意】

         • 内容和边框有了距离，添加了内边距
         • padding影响了盒子的实际大小

     • margin：外边距

       • 用于设置外边距，即控制盒子与盒子之间的距离

         • 属性	作用
           margin-left	左外边距
           margin-right	右外边距
           margin-bottom	下外边距
           margin-top	上外边距

       • 外边距的典型应用：外边距可以让块级盒子水平居中，但需要满足两个条件

         • 盒子必须指定宽度（width）
         • 盒子左右的外边距都设置为auto

       • 外边距合并

         • 相邻块元素垂直外边距的合并
           • 当上下相邻的两个块元素相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，去两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并
         • 解决方案
           • 尽量只给一个盒子添加外边距
         • 嵌套块元素垂直外边距的塌陷
           • 对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
         • 解决方案
           • 可以为父元素定义上边框
           • 可以为父元素定义上内边距
           • 可以为父元素添加overflow：hidden；

       • 清除内外边距

         • 网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此我们在布局前，首先要清除网页元素的内外边距

         • *{
               padding：0；
               margin：0；
           }

         • 【注意】行内元素为照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为快级和行内块元素就可以了