网页布局三大核心之——CSS盒子模型

约定不等于承诺〃 2022-11-08 15:28 7阅读 0赞

### CSS盒子模型 ###

*  1 盒子模型
 *   *  1.1 网页布局本质
     *  1.2 盒子模型（Box Model）组成
     *  1.3 边框（border）
     *  1.4 表格的细线边框
     *  1.5 边框会影响盒子实际大小
     *  1.6 内边距（padding）
     *  1.7 外边距( margin )
     *   *  1.7.1 外边距的典型应用
     *  1.8 外边距的合并
     *  1.9 清除内外边框
 *  2 PS基本操作
 *  3 综合案例
 *   *  3.1 案例1：产品模块
     *  3.2 案例2：快报模块
 *  4 圆角边框
 *  5 盒子阴影
 *  6 文字阴影

# 1 盒子模型 #

## 1.1 网页布局本质 ##

**1、准备好网页相关元素，网页元素基本都是盒子box。  
2、利用CSS设置好盒子样式，然后摆放到相应位置。  
3、往盒子里面装内容。**

## 1.2 盒子模型（Box Model）组成 ##

**CSS盒子包括边框、外边框、内边框和实际内容。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70]

## 1.3 边框（border） ##

**border可以设置元素的边框，边框有三部分组成：边框宽度、边框样式、边框颜色**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 1]

**实际开发过程为了效率边框可以简写，也就是边框的复合写法：简写没有顺序要求**

**效果图：**  
![在这里插入图片描述][20210314095630943.png]

**边框也可以分开写，即各条边框都不一样的写法：**

![在这里插入图片描述][20210314100402911.png]  
*例1.3 给一个200*200的盒子设置边框，上边框为红色，其余边框为蓝色。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 2]

## 1.4 表格的细线边框 ##

**前面讲的是表格的边框属性使用html实现的，现在可以单独使用css来完成相应的边框样式。如：（这里只展示CSS部分）**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 3]  
**上面的样式出现一个问题就是相邻的边框线比较粗，这里因为两个单元格的边框相互重叠，此时应该增加下面的属性：**  
**border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 4]

## 1.5 边框会影响盒子实际大小 ##

**边框会额外增加盒子的实际大小，因此我们有两种解决方法：  
（1）测量盒子大小时不量边框  
（2）如果测量的时候包含了边框，则需要width/height减去边框宽度**

## 1.6 内边距（padding） ##

**padding属性用于设置内边距，即边框与内容之间的距离。**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding-left</td> 
   <td>左内边距</td> 
  </tr> 
  <tr> 
   <td>padding-right</td> 
   <td>右内边距</td> 
  </tr> 
  <tr> 
   <td>padding-top</td> 
   <td>上内边距</td> 
  </tr> 
  <tr> 
   <td>padding-bottom</td> 
   <td>下内边距</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 5]  
**padding属性可以有1-4个值**

<table> 
 <thead> 
  <tr> 
   <th>值的个数</th> 
   <th>表达意思</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>padding:5px;</td> 
   <td>1个值，代表上下左右都有5像素</td> 
  </tr> 
  <tr> 
   <td>padding:5px 10px;</td> 
   <td>2个值，代表上下内边距是5像素，左右内边距是10像素</td> 
  </tr> 
  <tr> 
   <td>padding:5px 10px 20px;</td> 
   <td>3个值，代表上为5，左右为10，下为20</td> 
  </tr> 
  <tr> 
   <td>padding:5px 10px 20px 30px;</td> 
   <td>4个值，上是5，右是10，下是20，左是30 顺时针</td> 
  </tr> 
 </tbody> 
</table>

**当我们给盒子指定padding值之后,发生了2件事情:  
（1）padding影响了盒子实际大小。  
（2）内容和边框有了距离,添加了内边距。**  
**也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。**  
**解决方案：如果保证盒子跟效果图大小保持一致， 则让width/height减去多出来的内边距大小即可。**

*例1.6 新浪微博导航栏布局*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 6]  
*这里我们遇到的是盒子里面的文字不一样多，就不指定宽度，采用方式二，通过padding值将盒子撑开，效果是每个盒子里面的内容间的间距都相等。*

**效果图：**  
![在这里插入图片描述][20210314151059381.png]  
**如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小**

## 1.7 外边距( margin ) ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>margin-left</td> 
   <td>左外边距</td> 
  </tr> 
  <tr> 
   <td>margin-right</td> 
   <td>右外边距</td> 
  </tr> 
  <tr> 
   <td>margin-top</td> 
   <td>上外边距</td> 
  </tr> 
  <tr> 
   <td>margin-bottom</td> 
   <td>下外边距</td> 
  </tr> 
 </tbody> 
</table>

**margin属性用于设置外边距,即控制盒子和盒子之间的距离。**

![在这里插入图片描述][20210314153817984.png]  
**margin简写方式代表的意义跟padding完全一致。**

### 1.7.1 外边距的典型应用 ###

**外边距可以让块级元素水平居中，但必须满足下面两个要求：  
（1）盒子必须指定了宽度( width)。  
（2）盒子左右的外边距都设置为 auto。**

**常见的写法,以下三种都可以:**  
**●margin-left: auto; margin-right auto;  
●margin: auto;  
●margin: 0 auto;**

**注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text- align:center即可。**

![在这里插入图片描述][20210314155444661.png]

## 1.8 外边距的合并 ##

**使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。**

**嵌套块元素垂直外边距的塌陷**  
**对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 7]  
***解决方案：***  
**①可以为父元素定义上边框。  
②可以为父元素定义上内边距。  
③可以为父元素添加overflow:hidden。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 8]

## 1.9 清除内外边框 ##

**每个网页元素都带有自己的内外边框，不同的网页元素的内外边框可能不同。如下图所示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 9]  
**所以我们在布局时，要清理一下网页元素的内外边框。**

<style>
            * {
         
                /* CSS中的第一行代码 */
                padding: 0;
                margin: 0;
            }
        </style>

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

# 2 PS基本操作 #

**●文件->打开:可以打开我们要测量的图片**  
**●CtrI+R :可以打开标尺,或者视图→标尺**  
**●右击标尺,把里面的单位改为像素**  
**●Ctrl+ 加号(+)可以放大视图，Ctrl+ 减号(-)可以缩小视图**  
**●按住空格键,鼠标可以变成小手,拖动PS视图**  
**●用选区拖动可以测量大小**  
**●Ctrl+ D可以取消选区,或者在旁边空白处点击一下也可以取消选区**

# 3 综合案例 #

## 3.1 案例1：产品模块 ##

**完成以下图片模块样式的布局。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 10]

**分析布局细节：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 11]  
**案例布局完整源码：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>产品模块</title>
        <style>
            * {
         
                /* 清理内外边距 */
                margin: 0;
                padding: 0;
            }
            
            body {
         
                /* 页面的背景颜色 */
                background-color: #f5f5f5;
            }
            
            a {
         
                /* 设置所有的超链接标签颜色和去除下划线 */
                color: #333;
                text-decoration: none;
            }
            
            .box {
         
                /* 盒子的宽度和高度 */
                width: 298px;
                height: 415px;
                background-color: #fff;
                /* 让块级元素水平居中对齐 */
                margin: 100px auto;
            }
            
            .box img {
         
                /* 图片最大尺寸为父元素的尺寸 */
                width: 100%;
            }
            
            .review {
         
                height: 70px;
                font-size: 14px;
                /* 此段落没有盒子的宽度，所以padding不会撑开盒子的大小 */
                padding: 0 28px;
                margin-top: 30px;
            }
            
            .appraise {
         
                color: #b0b0b0;
                font-size: 12px;
                margin-top: 20px;
                padding: 0 28px;
            }
            
            .info {
         
                font-size: 14px;
                margin-top: 15px;
                padding: 0 28px;
            }
            
            .info h4 {
         
                display: inline-block;
                font-weight: normal;
            }
            
            .info span {
         
                color: #ff6700;
                font-weight: 700;
            }
            
            .info em {
         
                font-style: normal;
                color: #ebe4e0;
                margin: 0 6px 0 15px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <a href="#"><img src="images/img.jpg" alt=""></a>
            <p class="review"><a href="#">客服小姐姐很和蔼，快递很快，耳机的音效等方面都很不错。</a></p>
            <div class="appraise">来自于 小米的忠实粉丝 的评价</div>
            <div class="info">
                <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
                <em>|</em>
                <span>99.9元</span></div>
        </div>
    </body>
    
    </html>

## 3.2 案例2：快报模块 ##

**布局效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 12]  
**完整源码：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>快报模块</title>
        <style>
            * {
         
                margin: 0;
                padding: 0;
            }
            
            li {
         
                /* 去掉li前面的项目符号（小圆点） */
                list-style: none;
            }
            
            .box {
         
                width: 248px;
                height: 163px;
                border: 1px solid #ccc;
                /* 外边距水平居中的应用 */
                margin: 100px auto;
            }
            
            .box h3 {
         
                height: 32px;
                border-bottom: 1px dotted #ccc;
                font-size: 14px;
                font-weight: normal;
                line-height: 32px;
                padding-left: 15px;
            }
            
            .box ul li a {
         
                font-size: 12px;
                color: #666;
                text-decoration: none;
            }
            
            .box ul li a:hover {
         
                text-decoration: underline;
            }
            
            .box ul li {
         
                height: 23px;
                padding-left: 20px;
            }
            
            .box ul {
         
                margin-top: 7px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <h3>品优购快报</h3>
            <ul>
                <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
                <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
                <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
                <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
            </ul>
        </div>
    </body>
    
    </html>

# 4 圆角边框 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 13]  
**使用语法：**

border radius:length;

**●参数可以为数值或百分比来表示。  
●如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%  
●如果是个矩形,设置为高度的一半就可以做  
●该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角  
●分开写: border-top-left-radius、border-top-right-radius、 border-bottom-right- radius和border- bottom-left- radius**

**设置样式：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 14]

# 5 盒子阴影 #

**CSS3中新增了盒子阴影,我们可以使用box- shadow属性为盒子添加阴影。**  
**语法:**  
**box-shadow: h-shadow v- shadow blur spread color inset;**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h-shadow</td> 
   <td>必需。水平阴影的位置。允许负值</td> 
  </tr> 
  <tr> 
   <td>v-shadow</td> 
   <td>必需。垂直阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>可选。模糊距离。</td> 
  </tr> 
  <tr> 
   <td>spread</td> 
   <td>可选。阴影的尺寸。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>可选。阴影的颜色，请参阅CSS颜色值。</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td>可选。将外部阴影(outset) 改为内部阴影。</td> 
  </tr> 
 </tbody> 
</table>

> 注意:  
> 1.默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效  
> 2.盒子阴影不占用空间,不会影响其他盒子排列。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 15]

# 6 文字阴影 #

**在CSS3中，我们可以使用text-shadow属性将阴影应用于文本  
语法：  
text-shadow: h-shadow v-shadow blur color;**

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>h-shadow</td> 
   <td>必需。水平阴影的位置。允许负值</td> 
  </tr> 
  <tr> 
   <td>v-shadow</td> 
   <td>必需。垂直阴影的位置。允许负值。</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>可选。模糊距离。</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>可选。阴影的颜色，请参阅CSS颜色值。</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20210315195123236.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70]: /images/20221023/19db0f43fc47466cbd585918fb94ab77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 1]: /images/20221023/082344f8b7fa437a8d90543876788dd2.png
[20210314095630943.png]: /images/20221023/96fa62f60e7d46a9aa8c98e6d731f8e2.png
[20210314100402911.png]: /images/20221023/8a6323420cf14d84989eef908cbf43f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 2]: /images/20221023/8a978e94809e42cd90a30f3122bcf513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 3]: /images/20221023/47ac08f95f4d44869c9d2c1440e38d70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 4]: /images/20221023/eb3a42be341249ca92d686cb73836e17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 5]: /images/20221023/794131b5d9bc4f9a8c46c92ad6c58959.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 6]: /images/20221023/d0789e0dd1d74f859fa9fff862fae182.png
[20210314151059381.png]: /images/20221023/bdbfabe9d5e74203befbce33d01b0356.png
[20210314153817984.png]: /images/20221023/07141aacbea44b97b9f2bcc861d953d4.png
[20210314155444661.png]: /images/20221023/69105f9a7f5641ba93a4e329ef7a971f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 7]: /images/20221023/f2dbd1ebf07f4c8281a3b47d48c02870.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 8]: /images/20221023/f1ea5f62632e467896dc0edffe38bb82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 9]: /images/20221023/40ec698349bb47929909e6c74fa2cf5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 10]: /images/20221023/68c429b06e87455a8d5b96a7151f149e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 11]: /images/20221023/9a50d6ca00994b93b49148e123cf35ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 12]: /images/20221023/fdf1dc1a60a144e897b4adef894bfc4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 13]: /images/20221023/f0dee3f06aba4b368144ced37653ef13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 14]: /images/20221023/66d6e37dbca44b7d8675fef472ba50f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70 15]: /images/20221023/f9ef14f00e9b49d98a51a99ea78321c6.png
[20210315195123236.png]: /images/20221023/3304b96785934110b0480b9a7d894d49.png