AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS核心内容之盒子模型

2017-08-07 787
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1.盒子模型具有的属性：内容(content)填充(padding)边框(border)边界(margin)图示如下:2.流概念1.流的概念在现实生活中已经流水，在网页设计中就是指元素(标签）的排列方式，默认情况下，向网页的左上角流动2.

1.盒子模型具有的属性：

内容(content)
填充(padding)
边框(border)
边界(margin)

图示如下:

img_990e114c42176b1a78573f921e9603a5.png

2.流概念

1.流的概念

在现实生活中已经流水，在网页设计中就是指元素(标签）的排列方式，默认情况下，向网页的左上角流动

2.标准流的概念

元素在网页中就像流水，排在前面的元素(标签)内容在前面出现，排在后面的元素(标签）内容在后面出现

3.非标准流的概念

当某个元素(标签)脱离了标准(比如因为相对定位)排列，就称为非标准流．

3.实例代码一：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div-box{
            width:200px;
            height:200px;
            background-color:pink;
            /*指定边框的像素*/
            border:15px solid red;
            /*表示该div与其父元素的上边距的大小*/
            margin-top:40px;
            /*表示该div到浏览器左边界的距离*/
            margin-left:60px;
            /*表示该div中的元素距离边框的距离*/
            padding:5px;
        }
    </style>
</head>
<body>
<div id="div-box">hello world</div>
</body>
</html>

效果：

img_1645342ec67c96b9108f3f59a1152fc4.png

4.实例代码二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            width:300px;
            height:180px;
            border:1px solid blue;
        }
        #div-box{
            width:280px;
            height:160px;
            border:1px solid red;
            margin:  10px 0 0 10px;
        }
        #div-box img{
            width:140px;
            height:100px;
            border:1px solid black;
            margin:10px 0 0 10px;

        }
    </style>
</head>
<body>
<div id="div-box">
    <img src="a.jpg">
</div>
</body>
</html>

效果如下：

img_306b53d374f55b4440bc6587cf169eb7.png

5.实例代码三：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;/*指定主页面距离父标签的距离*/
            padding:0;
        }
        #div-box{
            width:800px;/*指定灰色边框的宽度*/
            height:500px;/*指定灰色边框匠高度*/
            border:1px solid grey;/*定义边框为1px的实线灰色边框*/
            margin:20px 0 0 20px;/*定义灰色边框距离上个标签20px的距离，距离浏览器边界20px*/
        }
        .img_list{
            list-style:none;/*图像列表无样式*/
            background-color:pink;
        }
        .img_list img{
            width:125px;/*定义每个图像的宽度为125px*/
            height:85px;/*定义每个图像的高度训85px*/
            margin:10px 0 0 20px;/*定义每个图像距离红色边框上边10px,左边20px*/
        }
        .img_list li{
            float:left;/*使用左浮动*/
            border:1px solid red;/*定义每个图像的边框为１px的实线红色边框*/
            width:165px;/*定义每个边框的宽度为165px*/
            height:125px;/*定义每个边框的高度为125px*/
            margin:10px 0 0 10px;/*定义红色边框距离上个标签和左边的标签的距离各为10px*/
        }
        .img_list a{
            display:block;/*把字体转换为块元素*/
            margin-left:60px;/*超链接的字体距离红色边框左边距离为80px*/
            margin-top:-3px;/*超链接的字体距离红色边框下边距离为-3px*/
        }
        .img_list a:hover{
            color:red;/*鼠标悬浮上超链接时，字体变成红色*/
            text-decoration:underline;/*鼠标悬浮上超链接时，字体加下划线*/
        }
    </style>
</head>
<body>
<div id="div-box">
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
    </ul>
</div>
</body>
</html>

效果如下：

img_af362adecd48083bfa0ad2c03ddddef0.png

6.实例代码四：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1000px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:960px;
            height:250px;
            border:2px solid white;
            margin:30px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:200px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:250px;
            height:180px;
            margin:15px 0 0 55px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:80px;
            margin-top:4px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">优酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
    </ul>
    </div>
    <div class="div1">
        <span class="l_cont">优酷牛人</span>
        <ul class="img_list">
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下：

img_0c1a4819ffa8cb5ffe6d267d8076fb69.png

7.实例代码五：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1100px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:1060px;
            height:750px;
            border:2px solid white;
            margin:20px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:195px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:200px;
            height:250px;
            margin:15px 0 0 40px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:10px;
            margin-top:4px;
        }
        .con1{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
        .con2{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">优酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
    </ul>
</div>
</body>
</html>

效果如下：

img_b01a8cee5fb7a373af4b58d79065566f.png

文章标签：
前端开发
关键词：
CSS盒子模型
CSS核心内容盒子模型
任平生78
目录
相关文章
html的七十二变
|
2月前
|
前端开发
如何设置 CSS 盒子模型的边框样式？
CSS盒子模型的边框样式可以通过`border`属性设置，包括边框宽度、样式和颜色。例如：`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边，如`border-top`、`border-right`等。
html的七十二变
61 2
html的七十二变
|
2月前
|
前端开发 开发者
css两种盒子模型
在CSS中，有两种盒子模型：标准盒子模型和IE盒子模型（怪异盒子模型）。标准盒子模型中，`width`和`height`仅指内容区的尺寸，总宽度和高度还包括内边距、边框和外边距。IE盒子模型中，`width`和`height`包括内容区、内边距和边框，总宽度和高度仅加外边距。通过`box-sizing`属性可以切换这两种模型，`box-sizing: content-box;`表示标准盒子模型，`box-sizing: border-box;`表示IE盒子模型。
html的七十二变
39 2
html的七十二变
|
2月前
|
前端开发 容器
给 CSS 盒子模型添加边框时，需要注意什么？
在给CSS盒子模型添加边框时，需要注意边框的宽度、样式和颜色，以及它如何影响盒子的总尺寸和布局。边框会增加盒子的总宽度和高度，可能需要调整其他属性以保持布局的完整性。
html的七十二变
35 1
gudanhero2018
|
3月前
|
前端开发
CSS属性：盒子模型
CSS属性：盒子模型
gudanhero2018
33 0
龙腾九州
|
15天前
|
前端开发
CSS 盒子模型
CSS 盒子模型
龙腾九州
22 4
dufadayang
|
2月前
|
前端开发
彻底搞懂css盒子模型
【10月更文挑战第1天】
dufadayang
57 9
土木林森
|
4月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇：一场关于标准与IE模型的精彩对决！
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码，清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸，而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策，提升网页布局的质量与美观性。
土木林森
36 1
热爱技术的小郑
|
4月前
|
前端开发
HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识，包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法，并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
热爱技术的小郑
39 0
HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
秋刀鱼不做梦
|
6月前
|
前端开发 开发者
CSS盒子模型（如果想知道CSS有关盒子模型的知识点，那么只看这一篇就足够了！）
CSS盒子模型（如果想知道CSS有关盒子模型的知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦
56 6
一颗小谷粒
|
5月前
|
前端开发
CSS：盒子模型
CSS：盒子模型
一颗小谷粒
27 0