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. sqlmap完成简单的sql注入

    扫描目标站点,是否存在注入 --users获取用户名 --dump --tables探测表和数据库信息 跑出来的字段 admin --dump -T admin -C admin,password暴库 ...

  2. hdu_1042(模拟大数乘法)

    计算n! #include<cstring> #include<cstdio> using namespace std; ]; int main() { int n; whil ...

  3. BOX

    题目连接:http://acm.tju.edu.cn/toj/showp2392.html2392.   Box Time Limit: 1.0 Seconds   Memory Limit: 655 ...

  4. c语言变量类型联想

    int float char *(指针) 已经定义:单个变量 单个相同类型在内存中顺序存放:数组 不同单个类型在内存中顺序存放:结构体 不同类型在内存中自由存放:链表 其中结构体与链表类型需运用时提前 ...

  5. UEP-时间

    时间戳转化为Date(or String) SimpleDateFormat format = new SimpleDateFormat( "yyyy-MM-dd HH:mm:ss" ...

  6. windows平台下python 打包成exe可执行文件

    第一步 安装 pyinstaller 命令行下运行:pip install pyinstaller 第二步 打包安装 pyinstaller Test.py 第三步 完成 找到打包目录下dist目录  ...

  7. Java高并发秒杀系统API之SSM框架集成swagger与AdminLTE

    初衷与整理描述 Java高并发秒杀系统API是来源于网上教程的一个Java项目,也是我接触Java的第一个项目.本来是一枚c#码农,公司计划部分业务转java,于是我利用业务时间自学Java才有了本文 ...

  8. ios 积累

    1.加号 是可以通过类名直接调用这个方法,而减号则要实例化逸个对象,然后通过实例化的对象来调用该方法!! 2.(返回类型) 方法名 :(参数类型)变量名 空格 参数二名 :(参数类型) 变量名 空格 ...

  9. c语言一个处理文本文件的例子

    功能 读取一个文本文件,将其中的文本按规则转换为int数据,然后对数据进行处理.文本的格式类似36 565 233... 代码 #include <stdio.h> #include &l ...

  10. hash类型

    redis的hash是一个string的key与value的映射表.适合存储对象,与string的类型相比,可以节省内存,并且方便获取整个对象 hset  设置hash field的指定值.不存在则先 ...