<!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. Cordic算法——圆周系统之旋转模式

    三角函数的计算是个复杂的主题,有计算机之前,人们通常通过查找三角函数表来计算任意角度的三角函数的值.这种表格在人们刚刚产生三角函数的概念的时候就已经有了,它们通常是通过从已知值(比如sin(π/2)= ...

  2. SICK激光雷达LMS511测量数据说明

    帧结构说明 LMS511的官方手册存在几个版本,在<Laser Measurement Systems of the LMS500 Product Family>的英文手册中,对单次(连续 ...

  3. HTML5开发在2017年发展趋势如何?

    随着移动互联网行业的飞速发展,人们借助于网络相互传达获取的信息越来越广泛,互联网前端开发中HTML5是最受关注的热点,HTML5让开发者和用户重新的对网页有了新的认识,从浏览器到APP都在受h5带来的 ...

  4. MapReduce 入门之一步步自实现词频统计功能

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7687120.html ------------------------------------ ...

  5. AndroidStudio cannot resolve symbol 解决办法 清楚缓存

    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu ...

  6. 【转】Visual Studio Code 使用Git进行版本控制

    原文链接:https://www.cnblogs.com/xuanhun/p/6019038.html?utm_source=tuicool&utm_medium=referral 本来认为此 ...

  7. Linux 链接详解(2)

    可执行文件加载执行过程: 上一节我们说到ELF文件格式,静态库的符号解析和重定位的内容.这一节我们来分析一下可执行文件. 由上一节我们知道可执行文件也是ELF文件,当程序被加载器加载到内存时是按照EL ...

  8. 排列oj

    835:排列 总时间限制: 5000ms 内存限制: 65536kB 描述 题目描述: 大家知道,给出正整数n,则1到n这n个数可以构成n!种排列,把这些排列按照从小到大的顺序(字典顺序)列出,如n= ...

  9. 51nod 1020 逆序排列 DP

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...

  10. 通过YUM升级centOS内核，以便安装docker

    安装Docker要满足一定的条件,对于cents系统,要求必须是64位,并且内核版本是3.10以上. 如果你的centos操作系统内核低于3.10,需要升级到这个版本以上,才能安装docker. 第一 ...