<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

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

 </head>

 <body>

     <p id="p1">中国</p>

     <p id="p2">黄山</p>

     <p id="p3">北京</p>

     <p id="p4">上海</p>

     <p id="p5">外边距合并上</p>

     <p id="p6">外边距合并下</p>

     <div>

         愿上苍保佑你的善良和真诚，愿我们常相聚，相遇是最美好的事。感谢上苍让我们在人生之中相遇，无论是擦肩而过，还是相扶相持，都十分珍贵，永远珍惜这份美好吧。

     </div>

     <div id="div2">

         愿上苍保佑你的善良和真诚，愿我们常相聚，相遇是最美好的事。感谢上苍让我们在人生之中相遇，无论是擦肩而过，还是相扶相持，都十分珍贵，永远珍惜这份美好吧。

     </div>

 </body>

 </body>

 </html>
 #p1{

     border-width: 3px;

     border-style: double;

     /*background: red;*/

     padding-top: 10px;

     padding-left: 10px;

     padding-bottom: 10px;

     padding-right: 10px;/*此上下左右四个属性值也可设百分比，但不可为负值*/

 }

 #p2{

     text-align: right;

     border: 1px solid yellow;/*可以使用border同时设置边框多个属性值*/

     margin-top: 20px;

 }

 #p4{

     text-align: right;

     border-width: 1px;

     border-style: dotted;

     border-color: blue;

 }

 #p3,#p4{

     /*background: green;*/

 /*    padding: 10px;*//*同时设置四个内边距*/

     /*padding: 10px 20px;*//*分别设置上下、左右内边距*/

     /*padding: 10px 20px 30px;*//*分别设置上、左右、下内边距*/

     padding: 10px 30px 50px 70px;/*分别设置上、右、下、左四个内边距*//*外边距margin也有类似内边距padding的设置方式。*/

 }

 #p5{

     background: pink;

 }

 #p6{

     background: orange;

 }

 div{

     background: #654456;

     width: 200px;

     height: 200px;

     /*overflow: auto;*//*visible不裁剪内容，可能会显示在内容框之外；hidden裁剪内容，无滚动；scroll有滚动条；auto超出时才有滚动*/

     overflow-x: scroll;/*overflow-x底部加滚动条，可配合white-space属性的nowrap值一起使用；overflow-y右边加滚动条。*/

 }

 #div2{

     white-space: nowrap;

     overflow: hidden;

     text-overflow: ellipsis;/*clip为默认值可省；ellipsis为溢出时显示省略号*/

 }

【CSS3】盒模型的更多相关文章

  1. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  2. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  3. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  4. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  5. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  6. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

  7. css3盒模型

    css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...

  8. CSS3盒模型之box-sizing

    这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...

  9. CSS3盒模型——box-sizing

    box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...

  10. CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

随机推荐

  1. StackExchange.Redis学习笔记(四) 事务控制和Batch批量操作

    Redis事物 Redis命令实现事务 Redis的事物包含在multi和exec(执行)或者discard(回滚)命令中 和sql事务不同的是,Redis调用Exec只是将所有的命令变成一个单元一起 ...

  2. Android 使用GangSDK创建第三方家族公会系统经验分享

    由于需要对之前的游戏加入一个家族系统,想到这块儿可能会有大量的工作需要自己做,就偷了个懒去网上搜罗了一波,有没有类似现成的系统?结果让我惊奇的发现,目前市面上居然真的有类似的服务,虽然是小公司开发的, ...

  3. 如何优化Cocos2d-X游戏的内存

    在游戏项目优化中都会碰到一个问题,如何既能减少内存又能尽量减少包的大小?在实际项目中有些经验分享一下,事实上2D游戏中最占内存的就是图片资源,一张图片使用不同的纹理格式带来的性能差异巨大,下表是我在I ...

  4. c# Debug的一些技巧

    c# Debug的一些技巧 专业工作也快两年,从最开始的F9,F10的断点调试,慢慢积累一些调试的技巧,令开发工作更加的效率 1.F9   最基础的断点, 点击F10 不跳入方法内部,点击F11逐行逐 ...

  5. （转载） Java子类与父类之间的对象转换

    在使用Java的多态机制时,常常使用的一个特性便是子类和父类之间的对象转换.从子类向父类的转换称为向上转换(upcasting),通过向上转换,我们能够在编写程序时采用通用程序设计的思想,在需要使用子 ...

  6. 神奇的 routing mesh - 每天5分钟玩转 Docker 容器技术（100）

    接上一节案例,当我们访问任何节点的 8080 端口时,swarm 内部的 load balancer 会将请求转发给 web_server 其中的一个副本. 这就是 routing mesh 的作用. ...

  7. Spring Cloud Eureka服务Demo级搭建

    仅用于个人备忘,有错误之处还请文明指出,3Q 开发环境以及工具:Windows.JDK8.STS 1.新建SpringBoot工程作为Eureka Server                    ...

  8. nignx 测试配置文件

    nginx -t nginx: the configuration file /usr/local/nginx-1.2.9/conf/nginx.conf syntax is ok nginx: co ...

  9. 智能合约语言Solidity教程系列2 - 地址类型介绍

    智能合约语言Solidity教程系列第二篇 - Solidity地址类型介绍. 写在前面 Solidity是以太坊智能合约编程语言,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你 ...

  10. ArcGIS jsAPI (4.x)本地部署字体符号乱码

    在下载了新版arcigs 的 JS API 后,每次部署在IIS中都会出现部件字体乱码的问题,需配置响应标头和添加文件映射 一. HTTP响应标头配置 在 IIS 中的 HTTP响应标头 中加入以下配 ...