主要内容：

盒子模型内边距，外边距，边框，外边距合并

主要包括：margin（外边距）padding（内边距） border（边框）centent（内容）

内边距：padding，paddingleft，paddingright，paddingtop，paddingbottom

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First html</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <table border = "1">
        <tr><td>
            内边距
        </td></tr>
    </table>
</body>
</html>
td{
    padding: 100px;
}

效果图

边框：1.可以创建出任何的边框并且应用于任何格式；2.border-style：定义了包括10种样式，包括none3.边框的单边框样式：border-top-style，border-bottom-style：border-style-right：border-left-style

同样还有border-width和border-color等属性 ，同样有top，bottom，和right和right四个属性

css3的行的边框属性：border-radius：边框圆角；box-shsdow：边框阴影；border-image：边框图片

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First html</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <p>css边框样式</p>
</body>
</html>
p{
    border-radius: 10px;
    width:100px;
    background-color: aquamarine;
    border: 2px solid blue;
}

效果图

外边距：接收任何单位，cm，px，百分数

属性值：margin以及top等四个方位的属性

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First html</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div class="mg">边框</div>
</body>
</html>
body{
    margin: 0;
}
.mg{
    margin:100px;
    width: 100px;
    height: 100px;
    background-color: brown;
}

Css3盒子模型-css学习之旅（5）的更多相关文章

  1. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  2. CSS3盒子模型

    web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...

  3. CSS3盒子模型(上)

    CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就 ...

  4. CSS3盒子模型(中)

    在CSS盒子模型(上)讲到了盒子模型的边框,内外边距,外边距合并等知识,接下来要总结的是盒子模型的布局常用到的一些CSS属性,比如:float.position等知识. 盒子模型布局稳定性 开始学习盒 ...

  5. css3盒子模型及其定位

    盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...

  6. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  7. CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

    盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

  8. CSS3 —— 盒子模型

    盒子模型 主要的属性就5个:width.height.padding.border.margin.如下:  width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距 ...

  9. css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

    box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...

随机推荐

  1. [总结] fhq_Treap 学习笔记

    无旋版 $Treap$. 只需要两个操作即可达到 $splay$ 的所有功能 1.$split$ 它的主要思想就是把一个 $Treap$ 分成两个. $split$ 操作有两种类型,一种是按照权值分配 ...

  2. Bootstrap3 排版-列表

    无序列表 排列顺序无关紧要的一列元素. <ul> <li>...</li> </ul> 有序列表 顺序至关重要的一组元素. <ol> < ...

  3. 豌豆夹Redis解决方案Codis源码剖析：Proxy代理

    豌豆夹Redis解决方案Codis源码剖析:Proxy代理 1.预备知识 1.1 Codis Codis就不详细说了,摘抄一下GitHub上的一些项目描述: Codis is a proxy base ...

  4. Python 一个奇特的引用设定

    def f(x): print 'original' if x > 0: return f(x-1) return 0 g = f def f(x): print 'new' return x ...

  5. Hazelcast源码剖析之Eviction

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  6. intent flags标记

    Intent Flag介绍 FLAG_ACTIVITY_BROUGHT_TO_FRONT  这个标志一般不是由程序代码设置的,如在launchMode中设置singleTask模式时系统帮你设定. F ...

  7. 在OC代码中创建Swift编写的视图控制器

    背景 近日在和一群朋友做项目,我和另一位同学负责iOS客户端,我是一直使用OC的,而他只会Swift,因此在我们分工协作之后,就需要把代码合在一起,这就牵扯到如何在TabbarController中添 ...

  8. make、make clean、make install、make uninstall、make dist、make distcheck和make distclean

    Makefile在符合GNU Makefiel惯例的Makefile中,包含了一些基本的预先定义的操作:make根据Makefile编译源代码,连接,生成目标文件,可执行文件.make clean清除 ...

  9. windows平台下 c/c++进行http通信的教训

    由于需要使用c++开发一个桌面应用软件,需要用到http请求进行通讯,也是本人第一次进行网络相关的开发工作,遇到了不少坑. 由于是在windows下开发和使用的应用软件,自然而然想到了调用Window ...

  10. FORM的静态提交

     在form中进行保存时,如果使用commit_form的话会弹出信息提示"没有修改需要保存"或者"几条记录已保存"类似的字样,有时候不想被提示,可以使用A ...