主要内容：

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

主要包括：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. MySQL where 子句

    MySQL where 子句 我们知道从MySQL表中使用SQL SELECT 语句来读取数据. 如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句中. 语法 以下是SQL ...

  2. oo第二阶段总结

    第五次作业--多线程电梯 一.设计策略 本次作业是我们第一次接触多线程,给程序添加多线程功能后最大的挑战是实现共享数据的安全.避免冲突,由于这次作业是第一次尝试多线程方法,因此采用了将所有方法都加上s ...

  3. Linux: Check version info

    一.查看Linux内核版本命令(两种方法): 1.cat /proc/version [root@localhost ~]# cat /proc/version Linux version 2.6.1 ...

  4. xlwt以格式生成xls文件

    参考: http://blog.sina.com.cn/s/blog_5357c0af01019gjo.html http://www.programcreek.com/python/example/ ...

  5. Java中常用缓存Cache机制的实现

    缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例. 这样做可以减少系统开销,提高系统效率. 缓存主要可分为二大类: 一.通过文件缓存,顾名思义文件 ...

  6. Docker学习笔记4: Docker-Compose—简化复杂容器应用的利器

    本文转载自http://www.tuicool.com/articles/AnIVJn. 因Python语言,个人也没学过,不是太熟悉,这篇文章的代码格式排版不准确爆了很多错,让我走了好多坑,不过还是 ...

  7. /proc/stat 详解

    在Linux系统中,可以用/proc/stat文件来计算cpu的利用率.这个文件包含了所有CPU活动的信息,该文件中的所有值都是从系统启动开始累计到当前时刻. cat /proc/stat cpu 6 ...

  8. linux源码编译安装OpenCV

    为了尽可能保证OpenCV的特性,使用OpenCV源码编译安装在linux上.先从安装其依赖项开始,以ubuntu 14.04.X为例讲解在Linux上源码编译安装OpenCV,其他linux版本可以 ...

  9. JQuery 初探

    放暑假了,终于有时间能学点前端的东西了.JQuery就是我第一个选择,锋利的JQuery.这本书真的很好.下面以一个ToggleButton形式的小例子开场吧. 引入JQuery库 在网页上引用JQu ...

  10. win8如何共享文件夹

    最近小编接手了市委组织部考核项目,各种文档.ER图.原型图,组员之间需要拷来拷去,很不方便,通过飞信,QQ传输吧,文件太大,网络太慢,所以还是不行,于是小编就想起来要共享,以前也映射过别人的共享,觉得 ...