<!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. JavaScript数据可视化编程学习（二）Flotr2，雷达图

    一.雷达图 使用雷达图显示多维数据. 如果你有多维的数据要展示,那么雷达图就是一种非常有效的可视化方法. 由于雷达图不常用,比较陌生,所以向用户解释的时候有一些难度.注意使用雷达图会增加用户认知负担. ...

  2. _2Python_注释命名等基本操作

    注释:注解,解释 主要用于在代码中给代码标识出相关的文字提示(提高代码的可读性)或调试程序,方便别人阅读和自己日后修改. Python中注释分为两类.单行注释:单行注释以#号开头,在一行内,#号后面的 ...

  3. 延迟执行之 Invoke 函数

    Invoke 函数需要继承 MonoBehaviour 类后才能使用. Invoke(string str,float a):a 秒后执行名为 str 函数(只会调用一次). Invoke(strin ...

  4. Java爬虫框架WebMagic——入门（爬取列表类网站文章）

    初学爬虫,WebMagic作为一个Java开发的爬虫框架很容易上手,下面就通过一个简单的小例子来看一下. WebMagic框架简介 WebMagic框架包含四个组件,PageProcessor.Sch ...

  5. ctrl+z 以后怎么恢复挂起的进程

    (1) CTRL+Z挂起进程并放入后台 (2) jobs 显示当前暂停的进程 (3) bg %N 使第N个任务在后台运行(%前有空格) (4) fg %N 使第N个任务在前台运行 默认bg,fg不带% ...

  6. .bash_profile 加载

    1.Debian默认的shell是Bash, 1.1 命令行 和 ssh 登录 ,首先读入 /etc/profile,这是对所有用户都有效的配置:然后依次寻找下面三个文件,这是针对当前用户的配置. ~ ...

  7. JavaScript：彻底理解同步、异步和事件循环(Event Loop)

    一. 单线程 我们常说"JavaScript是单线程的". 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他 ...

  8. JavaScript OOP（三）：prototype原型对象（即构造函数的prototype属性）

    通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法):造成了一定的资源浪费 function Obj(name,age){ this.name=name; ...

  9. Mac关机时处于黑屏状态

    PS:不知道大家有没有遇到过mac电脑关机就黑屏,只有一个箭头,还可以滑动箭头,但就是黑屏状态,等个好长时间还是关不了机,因此我查了好多资料,原因是在关机时,mac要先关掉其他软件或者保存进程以备下次 ...

  10. Qname

    Qname的全称是qualified name. Qname由三部分组成: 1.Namespace prefix 2.A colon character(":") 3.A loca ...