HTML——13.css盒子模型-padding、border、margin、content

目录

                                                           css-盒子模型

    1.   padding 内边距

    2.border 边框

    3 . margin 外边距

   4. 盒子模型简单示例：

  以下为上面的所有示例代码：

---

 

                                                           css-盒子模型

      说到盒子模型，一定先看一张图

 

 

   1.   padding 内边距

    内边距:   (上下左右各为10px)

.text{
padding: 10px;    /*上下左右均为10px的内边距*/
}

   等同于

.text{
       padding-top: 10px;
       padding-left: 10px;/*可用于制造空格*/
       padding-right: 10px;
       padding-bottom: 10px;
       /*  如果2个 上下，左右
           4个 上 右 下 左，顺时针（！不！重！要！）*/
}

 

 

 2.border 边框

    简写  与  分开  （注意与 outline 的关系）

p{
            border: 1px solid rgb(121, 228, 79); 
            /*粗细size 样式style 颜色color 依次↓ */
            border-width: 1px;
            border-style: solid;
            border-color: rgb(121, 228, 79);
}

•  如果要设置圆角边框则加上：

   border-radius: 10px ;
   /*圆角边框 ：角度*/

•  边框阴影：

   box-shadow: 5px     5px    1px  rgb(195, 236, 205);
  /*边框阴影：左右偏移  上下偏移 清晰度（越小越清晰） color*/     

• 设置边框-图片： 

   HTML:

    
 border-image,需要分开写 

   CSS:

p{
            border: 5px solid transparent;
            width: 300px;
            padding: 5px;
  }
.w2{
            border-image: url(sea.jpg) 100 100 stretch;            
 }

  3 . margin 外边距

  围绕在内容边框的区域就是外边距，就是我们的标签外的透明部分 

  外边距合并问题，见最后的代码

  4. 盒子模型简单示例：

   可以一个一个div 嵌套，也可以在一个标签内写出所有的margin border padding content

  两种方式效果相同，但是，排版等会又很大区别。

  嵌套：

  HTML:

 

        

            
content
        
 

   CSS：

.margin{
            margin: 50px;
 }
.border{
            width: 100px;
            border-radius: 9px;
            border: 2px solid rgb(127, 240, 142);
 }
.padding{
         /* text-align: center; */
            padding: 5px;
            padding-right: 5px;
 }

 集中：

  HTML:

 

content

 CSS:

.content{

            width: 100px;

            margin: 50px;

            border-radius: 9px;
            border: 2px solid rgb(127, 240, 142);
            
            padding: 5px;
            padding-right: 5px;
 }

   

 以下为上面的所有示例代码：

  第二次学习:

    
    
    


    
    
padding没什么好说的
    
内边距->圆角边框展示+阴影
    
border-image,需要分开写

 第一次学习： 

    
    


   

    
盒子模型
    

        
content 内容
        
border 边框 (可以注释掉体会一下）
        
padding 内边距
        
 margin  外边距，页面布局
  
        
均可统一设置距离
    



     测试padding有2个值（实际用处不大）

   外边距合并问题： 

 HTML：

  

        margin 
    
    

        
外边距合并,上下只差50px

 CSS：

.w1{
            width: 100px;
            height: 100px;
            background-color: wheat;
            margin: 50px;
}
.w2{
            background-color: yellow;
            width: 150px;
            height: 150px;
            margin: 50px;
 }