CSS05-css的属性(盒模型与弹性盒与IE盒模型)

最新推荐文章于 2022-10-20 22:45:13 发布

sdsjx01

最新推荐文章于 2022-10-20 22:45:13 发布

阅读量383

点赞数

分类专栏： CSS 文章标签： css 盒模型属性

本文链接：https://blog.csdn.net/sdsjx01/article/details/89225530

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

什么是盒模型?

可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

盒模型的属性

padding:内边距
    用法:padding是添加在父元素(盒子)上的
         padding调整子元素在父元素中的位置关系
    特点:会把盒子撑大
         想让盒子保持原有的大小,在宽高的基础上减掉padding值
    主要设置方法:
        padding:10px  四周
        padding:10px 30px 上下 左右
        padding:10px 20px 30px 上 左右  下
        padding:10px 20px 30px 40px 上右下左

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .hz{
            width: 300px;
            height: 260px;
            background: chocolate;
            padding: 20px 50px;
        }
    </style>
<body>
<div class="hz">
    鸡蛋鸡蛋鸡蛋

</div>
</body>

padding-top/left/right/bottom:给单一方向增加内边距
注:padding不会对背景图产生影响,padding的值不能为负值

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .hz{
            width: 300px;
            height: 260px;
            background: chocolate;
            padding-left: 30px;
        }
    </style>

<body>
<div class="hz">
    鸡蛋鸡蛋鸡蛋

</div>
</body>

margin:外边距
    用法:1:控制的是盒子之间的位置关系
         2:margin是长在盒子外围的,不会对盒子本身的大小造成影响.
         3:margin支持负值
         6:让子元素在父元素中左右居中
    主要设置方法(钟面方法):
        margin:10px  四周
        margin:10px 30px 上下 左右
        margin:10px 20px 30px 上 左右  下
        margin:10px 20px 30px 40px 上右下左

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .hz{
            width: 300px;
            height: 260px;
            background: chocolate;
            padding-left: 30px;
        }
        .aray{
            width: 300px;
            height: 200px;
            background: darkmagenta;
             margin: 50px 30px;
        }
    </style>
<body>
    <div class="hz">
    鸡蛋鸡蛋鸡蛋

    </div>
    <div class="aray">

    </div>
</body>

    margin-top/left/right/bottom:给单一方向添加外边距
    margin:0 auto:让子元素在父元素中左右居中

     .aray{
            width: 300px;
            height: 200px;
            background: darkmagenta;
            margin: 0 auto;
        }
<div class="aray">

</div>

margin常见的Bug:
    1:当父元素和子元素都没有浮动的情况下:给第一个子元素添加margin-top:会错误的把margin值加在父元素上.
    2:相邻两个元素上下margin值会重叠,按照较大值去设置
盒子模型:
    注意事项:在没有浮动的情况下想控制一个子元素在父元素中的位置首选padding

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .con{
            width: 300px;
            height: 200px;
            background: #7385CC;
            padding-top: 50px;
        }
        p{
            width: 50px;
            height: 20px;
            background: #50cc93;

        }
        h1{
            width: 50px;
            height: 20px;
            background: #883B84;
        }
        .erey{
            width: 200px;
            height: 100px;
            background: #cccccc;
            margin-top: 30px;
        }
    </style>
<body>
    <div class="con">
        <p></p>
        <h1></h1>
    </div>
    <div class="erey">

    </div>
</body>

IE盒模型:

  C3盒模型新增属性:
      Box-sizing:允许以"W3C的盒模型(标准盒模型)"或"IE盒模型"来定义元素,以适应区域
          属性值:content-box(标准):padding和border不被包含在宽和高内,元素的实际大小为:宽+高+border+padding.
                 border-box(IE盒模型):padding和border被包含在定义的宽和高中,元素实际的大小为你定义了多宽就是多宽.

弹性盒:

1:父元素的属性:
    display:flex;
        使用:父元素设置为弹性盒模型,子元素默认水平排列
    默认子元素水平排列,默认水平方向为主轴,垂直方向为侧轴
    justify-content:主轴
        属性值:
            center/flex-start(默认值)/fles-end(居右)/space-between(居中平均分配)/space-aroud(2个两边中间几个默认平均分配);
    align-items:侧轴属性
        属性值:
            center/flex-start(默认值)/fles-end(居下)
2:子元素的属性:
     flex-grow:比例
        使用:只有父元素为弹性盒的情况下生效

特性:
    弹性盒模型中float盒clear不生效

 <style>

        *{
            margin: 0;
            padding: 0;
        }
        #con{
            width: 800px;
            height: 600px;
            background: #9ea2a3;
            display:flex;
            justify-content:space-between;
            align-items:center;
        }
        #one{

            height: 200px;
            background: #67a385;
            flex-grow: 1;
        }
        #two{

            height: 200px;
            background: #9157a3;
            /*两个子元素按1:1排列*/
            flex-grow: 1;
        }
    </style>
<body>
    <div id="con">
        <div id="one"></div>
        <div id="two"></div>
    </div>
</body>