1.案例一：

效果图如下：

（1）box1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>盒子模型经典案例</title>

<link rel="stylesheet" type="text/css" href="box1.css"/>

</head>

<body>

<div class="div1">

<img src="123.jpg"/>

</div>

</body>

</html>

2.box1.css

@charset "utf-8";

/* CSS Document */

body {

    border: 1px solid red;  /*1px 表示边框的宽度  solid 表示实线  red 表示颜色，顺序可以随意*/

    width: 500px;

    height: 500px;

    /*如果让body自动居中*/

    margin: 0 auto;/*第一个参数：用于上下;第二个参数：用于左右（auto自动居中）*/

}

/*盒子模型:margin, padding,border, content*/

.div1{

    width:310px;

    height:260px;

    border:1px solid blue;

    /*margin-top:5px;

    margin-left:5px;*/

    margin:5px 0px 0px 5px;

    /*padding-top:35px;*/

}

.div1 img {

    width:300px;

    height:250px;

    margin-top:5px;

    margin-left:5px;

}

css笔记16：盒子模型的入门案例的更多相关文章

  1. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  2. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  3. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  4. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  5. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

  6. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

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

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

  8. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  9. HTML学习笔记 w3sCss盒子模型（阴影）（div的一些使用）案例 第十节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Classes and Objects :类和对象(2)

    类内部可以有另一个类,也就是内部类,如果带static则为静态内部类静态内部类当然不能直接访问实例变量内部类修饰符可以有四种,而外部类只有两种 内部类的意义:这个内部类只适用于这个外部类因为外部类的某 ...

  2. homework03

    代码实现真的是大问题……在第二次作业还没有真正实现的情况下只能写这么一篇博客来整理一下从各位大神那里看到的东西. 两个弱菜加起来同样是弱菜,所以我和我的小伙伴的配合就是悲剧的聚合. 首先,大家都说C# ...

  3. 【转】iOS可执行文件瘦身方法

    http://blog.cnbang.net/tech/2544/ 缩减iOS安装包大小是很多中大型APP都要做的事,一般首先会对资源文件下手,压缩图片/音频,去除不必要的资源.这些资源优化做完后,我 ...

  4. uniPanel特效

    function beforeInit(sender){ sender.layout='accordion'; Ext.apply (sender, {title:'供应链',style:'text- ...

  5. HDU 1010 Tempter of the Bone （DFS+剪枝）

    题意:从S走到D,能不能恰好用T时间. 析:这个题时间是恰好,并不是少于T,所以用DFS来做,然后要剪枝,不然会TEL,我们这样剪枝,假设我们在(x,y),终点是(ex,ey), 那么从(x, y)到 ...

  6. CodeForces 589J Cleaner Robot (DFS，或BFS)

    题意:给定n*m的矩阵,一个机器人从一个位置,开始走,如果碰到*或者边界,就顺时针旋转,接着走,问你最后机器人最多能走过多少格子. 析:这个题主要是题意读的不大好,WA了好几次,首先是在*或者边界才能 ...

  7. CoreSeek有符号整型

    数据库status字段的值有:-1,0,1 设置过滤字段,发现sql_attr_uint不支持负数,后改用sql_attr_bigint sql_attr_bigint = status sql_at ...

  8. iOS类别(Category)

    iOS类别(Category)与扩展(Extension) 苹果的官方文档 Category在iOS开发中使用非常频繁.尤其是在为系统类进行拓展的时候,我们可以不用继承系统类,直接给系统类添加方法,最 ...

  9. 转移部分博客到CSDN之中

    之前的文章一直发布在个人博客ivyxjc.xyz中, 现在将一部分博客移到csdn博客中.

  10. CSS3实现翻转菜单效果

    演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1 ...