首页 > 代码库 > css盒子

css盒子

2024-10-01 11:11:39   218人阅读

1.盒子模型的内容包括：content，padding，border，margin

2.盒子模型分类：

　　　　标准盒：正常盒，怪异盒

　　　　伸缩盒：新，旧

　　内边距：padding

　　　　1.内边距在content外，边框内

　　　　padding　　　　设置所有边距

　　　　padding-bottom　　设置底边距

　　　　padding-left　　　　设置左边距

　　　　padding-right　　　设置右边距

　　　　padding-top　　　　设置上边距

　　添加内边距的时候，只需要设置padding，不需要改变content大小，padding会自动撑开。

　　边框：border

　　　　border-width　　　　边框宽度

　　　　border-style　　　　边框样式

　　　　border-color　　　　边框颜色

　　　　border-radius　　　 设置圆角边框

　　　　box-shadow　　　　设置对象阴影

　　　　border-image　　　边框背景图片

　　外边距：margin

　　　　1.围绕在内容边框的区域就是外边距，外边距默认为透明区域

　　　　2.外边距接受任何长度单位，百分数值

　　　　margin　　　　　　设置所有边距

　　　　margin-bottom　　设置底边距

　　　　margin-left　　　　设置左边距

　　　　margin-right　　　设置右边距

　　　　margin-top　　　　设置上边距

　　　　注意：外边距合并

3.标准盒子模型

　　<div class="a">

　　　　<div class="b">

　　　　</div>

　　</div>

4.怪异盒子模型

　　box-sizing：border-box； 固定了盒子的大小，只在盒子内部改变值。

5.css伸缩盒子(旧)

　　-1.css3引入了一种新的布局模式-Flexbox布局，即伸缩布局盒模型(Flexible Box)，用来提供一个更加有效的方式制定，调整和分布一个容器里项目布局，

即使它们的大小是未知或者动态的。

　　-2.Flexbox布局可以轻松的实现屏幕和浏览器窗口大小发生变化时，保持元素的相对位置和大小不变。

　　-3.属性

　　　　box-orient　　　　伸缩盒对象的子元素的排列方式

　　　　box-pack　　　　 水平居中

　　　　box-align　　　　 垂直居中

　　　　box-flex　　　　　伸缩盒对象的子元素如何分配其剩余空间

　　　　box-direction　　  伸缩盒对象的子元素的排列顺序是否反转

例子如下：

html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://www.mamicode.com/styleCss.css" type="text/css">
</head>
<body>
    <div class="container">
        <div class="one">d1</div>
        <div class="two">d2</div>
        <div class="three">d3</div>
    </div>
</body>
</html>



css
.one{
    width: 100px;
    height: 100px;
    background-color: blue;
    -webkit-box-flex: 1;
}
.two{
    width: 100px;
    height: 100px;
    background-color: pink;
    -webkit-box-flex: 1;
}
.three{
    width: 100px;
    height: 100px;
    background-color: green;
    -webkit-box-flex: 1;
}
.container{
    width: 600px;
    height: 600px;
    background-color: dimgrey;
    display: -webkit-box;   /*变成盒子*/
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-direction: reverse;
}


6.css伸缩盒模型（新）

　　属性

　　flex　　　　　　复合属性，设置伸缩盒对象的子元素如何分配空间

　　flex-grow　　　弹性盒的扩展比率，按比例平均分配

　　flex-flow　　　 复合属性，设置伸缩盒对象的子元素排列方式

　　flex-direction　　伸缩盒对象的子元素在父容器中的位置

　　flex-wrap　　  设置伸缩盒对象的子元素超出父容器时是否换行

　　　　3个div 每个宽度200px，父容器为300px，超出了300px，但是三个div每个都会变成100px，这时需要设置flex-flow：wrap；（即超过部分换行，div会变成3行显示）

　　order　　　　　设置伸缩盒对象的子元素出现的顺序

　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one{
            width: 100px;
            height: 100px;
            background-color: blue;
            -webkit-flex-grow: 1;
            /*第一个div 第三个显示*/
            -webkit-order: 3;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: pink;
            -webkit-flex-grow: 1;
            /*第二个div 第一个显示*/
            -webkit-order: 1;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: green;
            -webkit-flex-grow: 1;
            /*第三个div 第二个显示*/
            -webkit-order: 2;
        }
        .container{
            width: 600px;
            height: 600px;
            background-color: dimgrey;
            /*变成盒子*/
            display: -webkit-flex;
            -webkit-flex-direction: column;
            /*超出父容器时换行*/
            -webkit-flex-flow: wrap;

        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">d1</div>
        <div class="two">d2</div>
        <div class="three">d3</div>
    </div>
</body>
</html>

 

css盒子


联系
我们