14、盒子模型

最新推荐文章于 2024-06-22 17:15:40 发布

五仁卤鸡翅

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量161

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106895558

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
盒子模型
盒子模型border
盒子模型padding
盒子模型margin

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

盒子模型

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    内容区（content）,元素中所有的子元素和文本内容都在内容区排列
    内容区大小，由width 和height 两个属性设置
    width:200px;
    height:200px;
    background-color:red
 
   边框属于盒子边缘，边框里属于盒子内部，出了边框是盒子外部
       设置边框需要设置三个样式：
          边框的宽度 border-width
          边框的颜色 border-color
          边框的样式 border-style
         
   
    border-width:10px;
    border-color:red;
    border-style:solid;
}
                
</style>
<body>
1、盒子模型
   - css将页面中所有元素都设置了一个矩形盒子
   - 将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到
   不同的位置
   - 每一个盒子都有以下几个部分组成
      - 内容区（content）
      - 边框 border
      - 内边距 padding
      - 外边距 margin
    
 <div class="box1">div1</div>

 
</body>
</html>

盒子模型border

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:red
    
  
   1、 border-width
        可以省略不写，有默认值，一般三个像素
        border-width 可以用来指定四个方向的边框的宽度 
            值得情况：
              四个值：上、右、下、左
              三个值：上、（左右）、下
              二个值：（上下）、（左右）   
        除了border-width 还有一组 border-xxx-width
           xxx可以时top、right、bottom、left 
           用来单独指定某一个边样式      
   
    border-width:10px;
    
  2、 border-color 用来指定边框颜色，同样可以指定四个边颜色
         同border-width 类似
       border-color 可以省略不写，自动使用color值  
  
    border-color:red;
    
 3、border-style 指定样式
           solid 实线
           dotted 点状虚线
           dashed 虚线
           double 双线
       
           也可以给四个方向指定样式
           该属性必须写，如果不写就没有边框 none   
  
    border-style:solid;
    
 4、border 简写，通过该属性可以设置边框相关属性，没有顺序要求
         如：border:solid 10px red
         
         除了border以外还有四个 border-xxx
            border-top 上边框
            border-right 右边框
            border-bottom 下边框
            border-left 左边框
           
           如：border-top:10px solid red

    
}
                
</style>
<body>

    
 <div class="box1">div1</div>

 
</body>
</html>

盒子模型padding

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:red
    border:10px orange solid

  1、内边距（padding）
       内容区和边框之间的距离时内边距
      - 一共有四个方向的内边距：
            padding-top
            padding-right
            padding-bottom
            padding-left
            
      - 内边距的设置会影响盒子大小
      - 背景颜色会延伸到内边距 
      - 一个盒子的可见框的大小，是由内容区（content）、内边距（padding）、边框（border）共同决定
      - padding 简写属性 可以同时指定四个方向的内边距
                规则和 border-width 一样
   */  
   padding-top:100px; 
   padding:10px 20px 30px 40px
    
}
.inner{
    width:100%;
    height:100%;
    background-color:yellow
}
                
</style>
<body>

    
 <div class="box1">
    <div class="inner"></div>
</div>

 
</body>
</html>

盒子模型margin

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:200px;
    height:200px;
    background-color:red
    border:10px orange solid

 1、外边距 margin
     - 不会影响盒子可见框的大小，影响盒子位置
     
     - 一共有四个方向的外边距 
         margin-top
           - 上外边距，设置一个正值，元素向下移动
         margin-right
           - 默认情况下，margin-right 不会产生任何效果
         margin-botton
            - 下边距，设置一个正值，其下边的元素向下移动
         margin-left
            - 左外边距，设置一个正值，元素向右移动
         
      - margin 可以设置负值，设置负值，元素向相反方向移动  
             
     - 元素在页面中，自左向右排列
         默认情况下，如果设置左和上外边距，将会移动元素自身 
         而设置下和右外边距，会移动其它元素 
     - margin 的简写属性
       marign 可以设置四个方向的外边距，用法和padding一样 
       
     - margin 可以设置元素实际占用空间大小              
 */
 margin-top:100px
    
}
              
</style>
<body>   
 <div class="box1"></div>
 <div class="box2"></div>
 
</body>
</html>