CSS盒子

最新推荐文章于 2024-10-15 20:19:31 发布

代码贩子、

最新推荐文章于 2024-10-15 20:19:31 发布

阅读量339

点赞数

分类专栏： CSS 讲义 HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45650003/article/details/120694361

版权

讲义同时被 3 个专栏收录

6 篇文章 1 订阅

订阅专栏

CSS

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

1.网页布局核心原理<搭建架子，布局盒子，填充内容>

(1)搭建框架

就是创建html文件给的初始值

代码分析：
<!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>Document</title>
</head>
<body>
  
</body>
</html>

(2)布局盒子(不同样式)

定义的盒子：就是嵌套div可以嵌套多个，然后接着设置样式

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: aquamarine;
  }
  #two{
    background-color: green;
  }
  </style>
</head>
<body>
   <div>
     <div id="one">
    
     </div>
     <div id="two">
   
     </div>
   </div>
</body>
</html>

(3)填充内容

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: aquamarine;
  }
  #two{
    background-color: green;
  }
  </style>
</head>
<body>
   <div>
     <div id="one">
       one
     </div>
     <div id="two">
       two 
     </div>
   </div>
</body>
</html>

2.盒子模型组成部分

(1)border（代表边框）<里面的属性值可以任意更换>

边框的属性有上下左右四个：

格式：border-上下左右：大小（npx）solid（颜色）；

border-top

border-bottom

border-left

border-right

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: green;
    height: 100px;
    width: 100px;
    border-top: 20px solid palevioletred;
    border-bottom:20px solid black;
    border-left:20px solid blue;
    border-right:20px solid blanchedalmond;
  }
  </style>
</head>
<body>
  <div id="one">
    one
  </div>
</body>
</html>

一般情况我们用一个border来概括整体

格式：border：大小（npx）solid（颜色）

代码分析：
<!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>Document</title>
  <style type="text/css">
  #one{
    background-color: green;
    height: 100px;
    width: 100px;
    border: 20px solid blue;
  }
  </style>
</head>
<body>
  <div id="one">
    one
  </div>
</body>
</html>

border-collapse: collapse;<复选框合并为一个单选框>

<!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>Document</title>
  <style type="text/css">
  table,th{
    border: 2px solid blue;
    border-collapse: collapse;/*复选框合并为一个单选框*/
  }
  </style>
</head>
<body>
  <table style="width: 600px; height: 150px;" cellspacing="0">
    <tr>
      <th>水果</th>
      <th>进价</th>
      <th>零售</th>
    </tr>
    <tr>
      <td>香蕉</td>
      <th>1.5元</th>
      <th>1.5元</th>
    </tr>
    <tr>
      <td>苹果</td>
      <th>2元</th>
      <th>3元</th>
    </tr>
    <tr>
      <td>橙子</td>
      <th>3.5元</th>
      <th>5元</th>
    </tr>

  </table>
</body>
</html>

border大小问题：

width10px(相当于左右各10px) hight20px（上下个20px，也就是40px）

(2)margin

(3)padding

3.border

3.1案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width:100px;
                height: 100px;
                border: 1px solid red;  /**无顺序  
                border-top: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

3.2案例2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table,td{
                border: 1px solid red;
                border-collapse: collapse;
            }
             
        </style>
    </head>

    <body>
        <table style="width: 600px;height: 150px;"  cellspacing="0">
            <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
                <td>$100</td>
            </tr>
        </table>
    </body>
</html>

3.3案例3(border影响盒子大小)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 100px;
                height: 100px;
                background-color: red;
                border: 10px solid yellowgreen;
             }
        </style>
    </head>

    <body>
         <div></div>
    </body>
</html>

3.3.1解决A

不测量边框宽度

3.3.2解决B

测量的时候width/height出去边框宽度
<style type="text/css">          
             div{
                width: 80px;
                height: 80px;
                background-color: red;
                border: 10px solid yellowgreen;
             }
</style>

4.padding

4.1 定义

设置内边距,即边框与内容之间的距离。

4.2案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 100px;
                height: 100px;
                background-color: red;
                
                /*padding-top: 10px;
                padding-left: 10px;*/
                
                padding: 5px;/**(4种表示方式)
             }
        </style>
    </head>
    <body>
         <div>范德萨发生大师傅的师傅大师傅</div>
    </body>
</html>

4.3案例2(padding影响盒子大小)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 100px;
                height: 100px;
                background-color: red; 
                padding: 20px;
             }
        </style>
    </head>

    <body>
         <div>
             最近，有消费者在使用顺丰速运寄快递时才能签收快递
         </div>
    </body>

</html>

4.3.1解决方案

width/height减去多出来的内边距

4.4案例3(盒子未指定width/height属性，则padding不会撑开盒子大小)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                /** width: 100%;
                height: 100px;
                background-color: red; 
                 padding: 20px;
             }
        </style>
    </head>
    <body>
         <div>
             最近，有消费者在使用顺丰速运寄快递时才能签收快递
         </div>
    </body>
</html>

5.margin

5.1定义

margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

5.2案例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             div{
                width: 200px;
                height: 200px;
                background-color: green;
             }
             .first{
                margin-bottom: 20px;
             }
        </style>
    </head>
    <body>
         <div class="first">aa</div>
         <div>bb</div>
    </body>
</html>

5.3案例2(水平居中)

5.3.1前提：块级元素水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .the{
                width: 200px;
                height: 200px;
                background-color: green;
                margin: 0 auto;
             }
        </style>
    </head>
    <body>
          <div class="the"></div>
    </body>
</html>

5.3.2前提: 行内/行内块元素水平居中

步骤：给其父元素添加text-align:center即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .the{
                width: 200px;
                height: 200px;
                background-color: green;
                margin: 0 auto;
                text-align: center;
             }
             /**無效
             /*span{
                margin: 0 auto;
             }*/
        </style>
    </head>
    <body>
          <div class="the">
            <span>呵呵</span>
          </div>
    </body>
</html>

5.4案例3(父元素塌陷-外边距合并)

出现场景：嵌套块元素

如果margin定义块级元素外边距的时候，可能会出现外边距的合二为一，例如对于父子关系的
块元素，父元素和子元素同事具有外边距，父元素会塌陷较大的外边距。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .father{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-top: 50px;/** 1 **/
                 
             }
             .son{
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin-top: 20px;/** 2**/
             }
             
        </style>
    </head>
    <body>
         <div class="father">
            <div class="son"></div>
         </div>
    </body>
</html>

解决塌陷


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">          
             .father{
                width: 200px;
                height: 200px;
                background-color: red;
                margin-top: 50px;/** 1 **/
                /**3**/
                border: 1px solid green;
                padding: 1px;
                overflow: hidden;
             }
             .son{
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin-top: 20px;/** 2**/
             }
             
        </style>
    </head>
    <body>
         <div class="father">
            <div class="son"></div>
         </div>
    </body>
</html>

5.5案例4（默认内外边距）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     
    </head>
    <body>
         abcdefghijlmn
    </body>
</html>

企业级解决方案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
     </style>
    </head>
    <body>
         abcdefghijlmn
    </body>
</html>

5.6案例6(特殊场景:行内元素建议只设置左右的内外边距)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
     <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        span{
            margin: 20px;
        }
     </style>
    </head>
    <body>
         <span>fdsafddfdaf</span>
    </body>
</html>

解决方案：

行内元素转换为块级和行内块元素