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. linux基本命令学习02

    =============================================================================a.txtc:\abc\a.txt windo ...

  2. Spark入门学习

    1. Spark Overview(spark概述) Apache spark是一个快速和通用的集群计算系统.它提供了Java,Scala,Python和R的高级APIs,以及支持通用执行图的优化引擎 ...

  3. TI-RTOS 之 PWM

    TI-RTOS 之 PWM CC1310 有4个定时器,8个PWM通道,在TI-RTOS它的驱动是写好的,引用时需要包含 PWM.h头文件即可. 一般是任务主体之前,或者主函数进行初始化. Board ...

  4. 安装Ubuntu16.04失败

    原本安装的是Ubuntu14,但是在使用caffe时总是出错,所以干脆将Ubuntu从14升级到16,结果整出一堆麻烦.在解决这些麻烦的过程也学习了不少系统启动的细节.印证了那句话"如何没有 ...

  5. Spider_Man_5.1 の Mongodb_安装

    先安装: 环境Mac OS X 我是直接用brew来安装的,感觉这个包管理工具,很省心. 安装Homebrew:ruby -e "$(curl -fsSL https://raw.githu ...

  6. .31-浅析webpack源码之doResolve事件流(2)

    放个流程图: 这里也放一下request对象内容,这节完事后如下(把vue-cli的package.json也复制过来了): /* { context: { issuer: '', compiler: ...

  7. github中删除项目

  8. MySQL事务隔离级别的实现原理

    回顾 在MySQL的众多存储引擎中,只有InnoDB支持事务,所有这里说的事务隔离级别指的是InnoDB下的事务隔离级别. 读未提交:一个事务可以读取到另一个事务未提交的修改.这会带来脏读.幻读.不可 ...

  9. 【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

    原文链接:https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时,他同时向世界引入了两种未经测试的革命性的新概念 ...

  10. HTML <select>标签

    1.简单的下拉列表 <html> <body> <form> 名: <select name="firstname"> <op ...