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. CTF---安全杂项入门第三题 这是捕获的黑客攻击数据包，Administrator用户的密码在此次攻击中泄露了，你能找到吗？

    这是捕获的黑客攻击数据包,Administrator用户的密码在此次攻击中泄露了,你能找到吗?分值:30 来源: 2014sctf 难度:难 参与人数:3918人 Get Flag:384人 答题人数 ...

  2. (亲测)躺着破解IDM下载权限，治疗不用破解补丁的强迫症们

    首先.如果触犯了某些规则权限,请原谅. 很早以前就做过这个的破解,挺实用的,我今天就把之前写的经验贴出来大家一起学习学习~~~ 今天利用这个方法破解了最新版,最终的效果如下所示:我不是来刷存在感的.只 ...

  3. bzoj:1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名

    Description     农夫约翰有N(1≤N≤1000)头奶牛,每一头奶牛都有一个确定的独一无二的正整数产奶率．约翰想要让这些奶牛按产奶率从高到低排序．    约翰已经比较了M(1≤M≤100 ...

  4. cdn和反向代理

    都是用来加速网站访问速度 cdn和反向代理的基本原理都是使用缓存,区别在于cdn部署在网络提供商的机房,使用户在请求网络服务时,可以从距离自己最近的网络提供商机房获取数据:而反向代理则部署在网站的中心 ...

  5. vmstat & mpstat & w

    vmstat # vmstat 3 2procs -----------memory---------- ---swap-- -----io---- --system-- -----cpu----- ...

  6. 【django基础补充之URL，视图，模版】

    一.url路由配置 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调用这段代 ...

  7. Map，List，POJO深拷贝(序列化实现)方法与注意事项

    转载请注明出处,谢谢! 方法1: /*jdk >= 1.5*/ @SuppressWarnings("unchecked") public static <T> ...

  8. goDaddy SSL证书 Nginx配置全流程 （转）

    好长时间没动过这玩意了,今天突然用到,忘的一干二净.在此做个笔记吧! 一.购买Godaddy SSL证书 1.打开Godaddy官网 http://www.godaddy.com/: 2.点击网站导航 ...

  9. Android带有粘性头部的ScrollView

    前言,一天在点外卖的时候,注意到饿了么列表页的滑动效果不错,但是觉得其中的手势滑动还是挺复杂的,正好又碰到了在熟悉Touch事件的理解当中,所以就抽空对着饿了么的列表页面尝试写写这个效果 1.先贴一个 ...

  10. CCF系列之窗口(201403-2)

    试题编号: 201403-2时间限制: 1.0s 内存限制: 256.0MB 问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口 ...