<!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. 【Java疑难杂症】有return的情况下try catch finally的执行顺序

    有这样一个问题,异常处理大家应该都不陌生,类似如下代码: public class Test { public static void main(String[] args) { int d1 = 0 ...

  2. 一位有着工匠精神的博主写的关于IEnumerable接口的详细解析

    在此,推荐一位有着工匠精神的博主写的一篇关于IEnumerable接口的深入解析的文章:http://www.cnblogs.com/zhaopei/p/5769782.html#autoid-0-0 ...

  3. java中的static和final关键字

    一:static 1)修饰成员变量: static关键字可以修饰成员变量,它所修饰的成员变量不属于对象的数据结构,而是属于类的变量,通常通过类名来引用static成员. 当创建对象后,成员变量是存储在 ...

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

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

  5. Ceph编译安装教程

    Ceph官方版本目前支持的纠删码很有限,实验室这块希望能够整合我们自主开发的纠删码BRS(Binary Reed–Solomon encoding),所以需要编译Ceph环境.Ceph官方目前推荐的安 ...

  6. 爬起点小说 day01

    先介绍下我自己爬起点小说的思路: 1.爬取所有的类型列表 a.链接存redis中 类型表:novel_list 具体每一种类型:bnovel_all_list(把novel_list和bnovel_l ...

  7. git log 中文乱码问题（浪费了一天）

    git log和gitcommit中文出现乱码,花了大半天的时间试了网上的各种方法,还是搞不定. 只好放大招. 卸载软件后重装,还没有进行任何配置,git config --list 发现有大量的配置 ...

  8. HDU-1242-Rescu

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  9. CCF-201403-2-窗口

    问题描述 试题编号: 201403-2 试题名称: 窗口 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平 ...

  10. Google 视频编码格式 VP9 究竟厉害在哪里

    近期 Google 已经开始研究 VP10 了,VP10 是一个由 WebM 和 Motroska 包含的开放.免费视频编解码器.Google 也已利用 VP10 来处理 YouTube 4K 视频. ...