【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: ...
随机推荐
- PowerShell 操作 Azure Blob Storage
本文假设已经存在了一个 Azure Storage Account,需要进行文件的上传,下载,复制,删除等操作.为了方便查看 PowerShell 代码执行的结果,本文使用了 MS 发布的一个 Azu ...
- Qt----拖拽
最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- Webstorm下安装ESLint检测JS代码
今天配置下Webstorm下面的Eslint, 先看下本地安装的Node,NPM版本,2017-11-23日这个节点最新版本. >node -v v8.9.1 >npm -v 使用Webs ...
- canvas图表(4) - 散点图
原文地址:canvas图表(4) - 散点图 今天开始完成散点图,做完这一节,我的canvas图表系列就算是完成了,毕竟平时最频繁用到的就是这几类图表了:柱状,折线,饼图,散点.经过编写canvas图 ...
- vue 组件中数组的更新
今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...
- C#常见错误解决方法
1.能提供Visual Studio开发工具包吗? 解决方法: Visual Studio 2017开发环境下载地址: https://www.visualstudio.com/zh-hans/dow ...
- Windows Intellij环境下Gradle的 “Could not determine Java version from ‘9.0.1’”的解决方式
当我导入Gradle项目初试Java spring的时候,遇到下面报错: Gradle complete project refresh failed Error:Could not determin ...
- 03.redis与ssm整合(mybatis二级缓存)
SSM+redis整合 ssm框架之前已经搭建过了,这里不再做代码复制工作. 这里主要是利用redis去做mybatis的二级缓存,mybaits映射文件中所有的select都会刷新已有缓存,如果不存 ...
- Django学习(2)数据宝库
数据库是一所大宝库,藏着各种宝贝.一个没有数据库的网站,功能有限.在Django中,支持的数据库有以下四种: SQLite3 MySQL PostgreSQL Oracle 其中SQLite3为Dja ...