码迷,mamicode.com
首页 > Web开发 > 详细

css基础--盒子模型

时间:2020-07-19 18:06:47      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:margin   html元素   osi   font   class   open   ide   style   fixed   

盒子模型  

1 绝大多数标签都可以看作盒子,可以设置宽高或设置内容;在CSS中,"box model"这一术语是用来设计和布局时使用。

  CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

  盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

  下面的图片说明了盒子模型(Box Model):


技术图片

content  盒子的内容

padding  内边距  内容到边框的距离

border  边框

margin  外边距 元素与元素的间距

 

2 盒子模型的属性

  1) width 宽     height高   均指内容放入宽高,而非盒子的

  2) padding 内边距          内容到边框的距离

    padding:10px; 一个值相当于四个方向值相同(上 右 下 左)

    padding:10px  20px;   上10px  右20px  下10px  左20px

    padding:10px 20px 30px;  上 右  下   左20px

    padding:10px 20px 30px 40px;    上 右 下 左

    

    上  padding-top  

    右padding-right   

    下 padding-bottom 

    左padding-left

  

  2)border 边框

  按三要素:border-width 边框宽度

         border-style  边框样式    solid实线  dashed虚线

        border-color  边框颜色    

  按方向:border:10px solid  blue    四个方向均同样设置

      border-top   

      border-right   

      border-bottom  

      border-left

 

      background-color:#000;黑

      border-width:20px;

      border-style:solid  dashed  dotted doble; 上右下左

      border-color:red green blue pink;  上右下左

      border-bottom:5px  solid blue;  下边框设置3个样式

 

   3)margin 外边距 元素与元素的间距

    margin:20px 30px  上右下左    同padding

    margin-top  

    margin-right

    margin-bottom

    margin-left

  

    水平居中: text-align:center;

         margin: 0  auto;   上下边距为0   auto让有宽度的块级元素水平居中 eg:div  p

3 margin塌陷问题及解决

  父子margin塌陷

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /*margin 父子塌陷问题
          父亲没有设置padding  border 内容时,子元素垂直方向的margin会叠加给父亲
          一旦发生塌陷,叠加规则:父亲最终垂直方向的margin为父子中最大的margin值,并非相加      
        
          解决方法:  1 把儿子的margin转换成父亲的padding 注意盒子总高度变化问题
                    2 给父亲增加一个属性 overflow:hidden;    //触发了BFC
        */

        .box1{
            width: 150px;
            height: 150px;
            background-color: pink;
           /* padding: 20px; */   
           /* overflow: hidden; */
        }
        .p1{
            width: 50px;   /*内容的宽*/
            height: 50px;   /*内容的高*/
            background-color: aqua;

            padding: 10px  20px; /*内边距   内容到边框的距离  上下为10px 左右20px*/
            border: 2px dashed red;
            border-bottom: 2px solid blue;
            margin: 20px;
        }

    </style>
</head>
<body>
 <div class="box1">
     <p class="p1">这是内容1</p>
 </div>

</body>
</html>
margin父子塌陷

4 并列元素(兄弟塌陷)

  垂直方向上相遇的盒子模型,会发生margin塌陷;现象就是元素二者之间的距离并非之和,而是二者之间最大的

  解决方法:只配置一个方向即可

技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .box1,.box2{
            width: 50px;
            height: 50px;
            background-color: red;
        }

        /*
            并列元素(兄弟)塌陷:垂直方向上的盒子模型,会发生margin塌陷
            即两个盒子模型的margin值选二者中最大的
            解决方式:只设置一个方向
        */
        .box1{
            margin-bottom: 50px;          /*只在其中一个设置,即只设置margin-bottom 或margin-top*/
            /* margin-bottom: 30px; */   /*会发生并列元素塌陷*/
        }
        .box2{
            margin-top: 0px;
            /* margin-top: 20; */
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
    
</body>
</htm
并列元素塌陷

 

5 背景属性

  1)背景颜色  background-color

  2) 背景图片 background-img:url(xxx.jpeg);  // 默认平铺

  3)背景重复 background-repeat:repeat-x;   //不写时默认图片平铺   

    控制图片平铺:repeat x,y方向均重复; repeat-x x方向平铺; repeat-y y方向平铺; no-repeat 不平铺;
  
  4)背景图定位
    background-position:50px 50px;
    background-position:center center;
    background-position:50% 50%; //图片中心点参考body100%移动50% 相当于center center
    background-position:left top; //左上
    background-position:right bottom; //右下
 
  简写:background:blue url(xxx.jpg) no-repeat cener cernter fixed; //若不需要,后四个属性值可以不写
  
技术图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 默认图片平铺
            控制图片平铺:repeat  x,y方向均重复; repeat-x x方向平铺;repeat-y y方向平铺;
                        no-repeat  不平铺;
        
        */
        .box1{
            width: 1500px; 
            height: 1500px; 
            /* background-image: url(../ddr.png);
            background-repeat: no-repeat;
            background-position: right bottom;   */

            /*简写 若不需要设置,后面四个属性值可以不写*/
            background: grey url(../ddr.png) no-repeat  center center fixed;
        }
    </style>
</head>
<body>
<div class="box1"></div>
    
</body>
</html>
background

 

5 css元素的显示模式

  元素根据表现的特性分为:块级元素、行内元素、行内块元素

  

  默认特点:

  块级元素 div p li dt dd h1~h6 ul dl

  1)独占一行

  2)设置宽高有效 (padding margin line-height)

  3)不设置宽高,默认是父亲的100%

 

  行内元素 span em i b strong

  1)可以与其他行内元素并排

  2)设置宽高无效 (行高 line-height可设置,不支持垂直方向 padding margin)

  3)元素靠内容撑开

  

  行内块元素 img

  1)可以与其他行内元素 或 行内块元素并排

  2)可以设置宽高

 

  一般通过如下方法去除默认的padding margin

  *{

    padding:0;

    margin:0;

  }

 

6 display 改变元素的显示模式

  display:block; 转化为块级元素

  display:inline; 转化为行内元素

  display:inline-block; 转化为行内块元素

  display:none; 隐藏元素

 

css基础--盒子模型

标签:margin   html元素   osi   font   class   open   ide   style   fixed   

原文地址:https://www.cnblogs.com/nodehzi/p/13299734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!