主要内容：

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

主要包括：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. Bootstrap3 表单-被支持的控件:文本域

    支持多行文本的表单控件.可根据需要改变 rows 属性. <textarea class="form-control" rows="3"></ ...

  2. Angular2的input和output(原先的properties和events)

    angular2学习笔记 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 文章来源:http://blog.ng-book.com/angular-2 ...

  3. 计算机网络之TCP协议与UDP协议

    运输层向它上面应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能中的最底层. 两个主机进行通信实际上就是两个主机中的应用进程互相通信.应用进程之间的通信又称为端到端的通信. 应用层不同进 ...

  4. Android 结合实际项目学会ListView局部刷新和相关知识《一》

    转载本专栏博客,请注明出处:道龙的博客 最近在公司参与的项目中有一个界面需要做局部UI更新处理,把其化烦为简为Demoi形式写在这里.我们还是运行该Demo,知道ListView局部刷新的使用场景:( ...

  5. How To Handle MLOG$_AP_SUPPLIER_SITES_AL, MLOG$_AP_SUPPLIERS Growing So Much? Having Lots of Data

    How To Handle MLOG$_AP_SUPPLIER_SITES_AL, MLOG$_AP_SUPPLIERS Growing So Much? Having Lots of Data (文 ...

  6. 在android系统上写C语言程序--开机启动该程序不进入安卓系统

    今天要写的这篇博文意义重大,也是网上很少有的,这是在我工作中学会的一项技术,当然,它也是由简单的问题组合而来的.如何在安卓中写C语言程序,调试安卓驱动,测试程序的的一项重要技能,下面我就不说废话了,直 ...

  7. 【学习笔记】启动Nginx、查看nginx进程、查看nginx服务主进程的方式、Nginx服务可接受的信号、nginx帮助命令、Nginx平滑重启、Nginx服务器的升级

     1.启动nginx的方式: cd /usr/local/nginx ls ./nginx -c nginx.conf 2.查看nginx的进程方式: [root@localhost nginx] ...

  8. lucene索引库的增删改查操作

    1. 索引库的操作 保持数据库与索引库的同步 说明:在一个系统中,如果索引功能存在,那么数据库和索引库应该是同时存在的.这个时候需要保证索引库的数据和数据库中的数据保持一致性.可以在对数据库进行增.删 ...

  9. Dialog样式的Activity

    效果图: 设置全屏模式: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

  10. Struts 1 之<bean>标签库

    <bean:write>标签 <bean:write>能输出request.session.application.page四个域中能访问到的变量,与EL表达式不同的是,如果变 ...