【CSS3】盒模型
<!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】盒模型的更多相关文章
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- css3 盒模型记
css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...
- css3 盒模型
0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...
- 第94天：CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- 5.css3盒模型--margin/border/padding/content
1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...
- css3盒模型
css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(bord ...
- CSS3盒模型之box-sizing
这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...
- CSS3盒模型——box-sizing
box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...
- CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...
随机推荐
- STM32基础问题分析——PWM配置
STM32基础问题分析--PWM配置 在使用STM32F103产生固定频率.固定占空比的PWM波时,虽然有官方以及众多开发板提供的例程,但是关于有点问题并没有说的很清晰,并且<STM32F10X ...
- 史上最强学生管理系统之ArrayList版
其实不管是网上或者培训班,都会有学生管理系统的最基础版本,本人也不过是照猫画虎,在某些细节方面进行了一些渲染,使这个最基本的小程序更加人性化和便于利于操作一点,个人愚见,大牛勿喷,欢迎转载(请注明出处 ...
- Zuul(SpringCloud学习笔记一)
路由是微服务架构中必须(integral )的一部分,比如,"/" 可能映射到你的WEB程序上,"/api/users "可能映射到你的用户服务上," ...
- 一步一步教你用c# entity framework6 连接 sqlite 实现增删改查
使用entity framework6 连接 SQLite 数据库 前言 很多小型应用程序中,都要使用数据库,而现在比较流行的本地数据库非SQLite莫属. 第一步:前期准备 开发环境:vs2015 ...
- Office2016 KMS激活
Office标准版激活 一新买本子需要安装Office,闲来无事就安装了一款Office Standard 2016,网上许多激活秘钥均已过期,无法激活,无奈下选择KMS激活. KMS下载链接如下: ...
- tpshop使用自带极光推送
推送逻辑在common里面的PushLogic.php;在后台网站->商城设置->推送设置,将极光的ID,密码填一下系统会自动加入数据库里面. 在你所需推送的PHP类里面引用这个文件即可. ...
- 迭代操作-->c:forEach和c:forTokens
jstl--->Core 核心标签库-->c:forEach 在页面上遍历后台传到前台的数据是最基本的最常用的方法 主要包含两种迭代操作:forEach和forTokens 语法1:迭代 ...
- 【java提高】---HashMap解析(一)
HashMap解析(一) 平时一直再用hashmap并没有稍微深入的去了解它,自己花点时间想往里面在深入一点,发现它比arraylist难理解很多,好多东西目前还不太能理解等以后自己知识更加丰富在过来 ...
- HTTPS原理浅析
HTTPS(Hypertext Transfer Protocol Secure)协议用于提供安全的超文本传输服务. 其本质上是SSL/TLS层上的HTTP协议, 即所谓的"HTTP ove ...
- Python搭建Web服务器，与Ajax交互，接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...