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

内容(content)

填充(padding)

边框(border)

边界(margin)

图示如下:

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>

效果：

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>

效果如下：

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>

效果如下：

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>

效果如下：

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>

效果如下：

CSS核心内容之盒子模型的更多相关文章

  1. CSS核心概念之盒子模型

    盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...

  2. CSS——（2）盒子模型与标准流

    上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...

  3. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  4. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  5. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  6. css那些事儿2 盒子模型

    盒子模型是网页元素所占据页面窗口的矩形范围,是网页布局的核心基础之一,这里的盒子模型与我们平常收到的包裹类似. 一个包裹从内到外,分为真实物品部分,物品与外壳之间的填充区,外壳的厚度,当多个包裹放置在 ...

  7. 【转】CSS（10）盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  8. css笔记17：盒子模型加强版的案例

    1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...

  9. css笔记15：盒子模型

    1.流 流:html元素在网页中显示的顺序 标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示. 非标准流:在html之中,当某个元素脱离了标准流,那么它处于非标准流 ...

随机推荐

  1. CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...

  2. hackerrank Ticket

    传送门 题意:n个人排队买票,要把他们拆成k条队到k个窗口买,可以有队伍为空,每条队的顺序保持拆之前的顺序.如果某人和他前一个人买的票相同,就可以打八折,求最小花费. 题解:拆成k条队意味着只有[n- ...

  3. CF 615D Multipliers

    题目:http://codeforces.com/contest/615/problem/D 求n的约数乘积. 设d(x)为x的约数个数,x=p1^a1+p2^a2+……+pn^an,f(x)为x的约 ...

  4. B. Gerald is into Art

    B. Gerald is into Art time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  5. class 文件反编译器的 java 实现

    最近由于公司项目需要,了解了很多关于类加载方面的知识,给项目带来了一些热部署方面的突破. 由于最近手头工作不太忙,同时驱于对更底层知识的好奇与渴求,因此决定学习了一下 class 文件结构,并通过一周 ...

  6. UEP-级联下拉

    级联查询在UEP中采用动态下拉的形式,cascadeid为关键字,注意jsp页面的id的相互嵌套关系, 数据库字段的数值的设置,和动态下拉SQL语句的书写. <td align="ce ...

  7. hbase性能优化总结

    hbase性能优化总结 1. 表的设计 1.1 Pre-Creating Regions 默认情况下,在创建HBase表的时候会自动创建一个region分区,当导入数据的时候,所有的HBase客户端都 ...

  8. 【蓝桥杯单片机02】LED的基本控制

    [蓝桥杯单片机02]LED的基本控制 广东职业技术学院  欧浩源 在CT107D单片机综合训练平台实现LED的基本控制和其他单片机开发平台不一样,不单单是控制几个LED实现跑马灯这么简单.因为在这个平 ...

  9. webzip怎么用 如何用webzip下载整个网站？

    相信很多站长对webzip这款软件都并不感到陌生,它功能强大,能够完整下载网站的内容,或者你也可以选择自行设置下载的层数.文件类型.网页与媒体文件的定位等等.具体详情你可以在百度上去搜一下.由于web ...

  10. block一点也不神秘————如何利用block进行回调

    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...