HTML7盒子模型

盒子模型属性：
content:width宽,height高
padding:内边距
margin:外边距
border:边框

边框的使用方法：
border:
线型：(solid/dashed/dotted/double) 粗细（数值+单位）颜色；
solid:实线 dashed：虚线 dotted：点状线 double ：双线

overflow:指定内容如果溢出一个元素的框会发生什么
text-overflow：指定当文本溢出包含它的元素会发生什么

padding用法：（用来调整子元素在父元素中的位置关系。padding属性需要添加在父元素上）
1.四个值：上右下左
2.三个值：上左右下
3.两个值：上下左右
4.一个值：四个方向

例：

<head>
    <style type="text/css">
        #div1{
            width=100px;
            height=100px;
            background-color=red;
            padding-left=10px;       盒子1 左内边距设置为10px，  效果：整体显示 盒子宽度多了10px
         }
          #div2{
            width=100px;
            height=100px;
            background-color=blue;
            margin-top=10px;       盒子2上外边距设置为10px，   效果：整体显示 距离盒子1 10px的距离
         }
          #div3{
            width=100px;
            height=100px;
            background-color=pink;
            border: solid red 5px;    盒子3边框设置为5px ,    效果：整体显示 盒子宽度 高度都多了10px
         } 
         #div4{
            width=100px;
            height=100px;
            background-color=red;
            margin:20px;
            border:solid red 5px;   盒子4外边距设置为20px，边框设置5px   效果：距离盒子3 20px,距离左侧20px  整体宽高都
            多10px
         }
    <style>
</head>
<body>
   <div id="div1">
     我是盒子1
   <div>             创建盒子1
   
   <div id="div2">
    我是盒子2
   <div>             创建盒子2
   
   <div id="div3">
   我是盒子3
   <div>             创建盒子3
   
   <div id="div4">
    我是盒子3
   <div>             创建盒子4
</body>

外边距的合并：
当两个盒子纵向排列的时候，他们的距离为两个盒子中最大的那个外边距；
当两个盒子水平排列的时候，他们的距离为两个盒子外边距距离之和。

横向排列例：

<head>
    <style type="css/text">
          #div1{
                   width=100px;
                   height=100px;
                   background-color=red;
                   float:left;
                   margin-right=50px;
                }
          #div2{
                   width=100px;
                   height=100px;
                   background-color=blue;
                   float:left;
                   margin-left=50px;
                }                           效果：盒子1距离盒子2 100px的距离
     </style>
</head>
 <body>
      <div id="div1">
          我是盒子1
      <div>             创建盒子1
      <div id="div2">
          我是盒子2
      <div>             创建盒子2
</body>

猜你喜欢