CSS学习篇核心之——盒子模型
概述
关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识。
盒子模型
元素框的最内部分是实际的内容(element),直接包围内容的是内边距(padding),内边距呈现了元素的背景,内边距的边缘是边框(border),外边距(margin)默认是透明的,因此不会遮挡其后的任何元素,对于这个图边框外的部分就是margin,边框内内容外地部分就是padding。
在CSS中我们一般习惯性的将外边距和内边距设置为0,即
* {
margin: 0;
padding: 0;
}
element元素
在CSS中,width和height是element区域的宽度和高度,对padding、border、margin增加尺寸不会影响element的宽度和高度,只会增加整个框的尺寸。
下面我们看个例子:假设框的每个边上有 10个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
这样的话对于element、padding、border、margin的尺寸就更加的一目了然了,这里需要注意下的是,padding、border、margin即可以应用于一个元素的所有边,也可以应用于单独的边,还有一点就是,margin可以是负值。
内边距(Padding)
元素的内边距是再边框和内容区之间,padding属性设置用长度值或者百分比值,但不允许用负值。关于用百分比的话,有一点需要注意是,即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
对于padding的设置,可以设置它的上下左右这四个边距。
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
h1 {padding: 10px0.25em 2ex 20%;}
上述这两种方法实现的效果是一致地,如果我们的四个边距是一样的话可以用下面这句话。
h1 {padding: 10px;}
边框(border)
元素的边框(border)是围绕元素内容和内边距的一条或多条线,可以规定元素边框的样式、宽度和颜色,这样可以创建出效果更佳出色的边框。
样式
样式是边框的最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
border可以先设置样式,设置样式的顺序为op-right-bottom-left,设置样式的属性为border-style;
如果想设置单边样式则为:
border-top-style
border-right-style
border-bottom-style
border-left-style
宽度
边框宽度属性设置用border-width设置;
如果想单独设置各边的宽度则用:
border-top-width
border-right-width
border-bottom-width
border-left-width
对于同一个边框宽度我们可是用三种方式来设置如下,效果是一样的。
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
p {border-style:solid; border-width: 15px 5px 15px 5px;}
p {border-style:solid; border-width: 15px 5px;}
颜色
设置边框颜色的原理与设置设置边框宽度的原理是相同的,设置颜色用border-color;
如果设置个边宽度则用:
border-top-color
border-right-color
border-bottom-color
border-left-color
外边距(margin)
margin围绕在元素边框外地空白区域就是margin,设置margin会在元素外创建额外的“空白”,margin属性接收任何长度单位、百分数值甚至负值。
在这里先讲解一个值复制的规则,就是如果缺少左外边距的值,则使用右外边距的值;如果缺少下外边距的值,则使用上外边距的值;如果缺少右外边距的值,则使用上外边距的值。
换句话说,如果为外边距指定了 3个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。
如果我们想设置单边外边距属性,可以用下面的属性
margin-top
margin-right
margin-bottom
margin-left
下面这两种方式效果是一致地
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
p {margin: 20px 30px30px 20px;}
总之
在这里我也是简单将盒子模型的基础知识进行了基础的总结,这些知识只有我们经常用,慢慢的轻车熟路了,对于盒子模型的知识的讲解我可能有太不全面的地方,也请大家多多指正。
CSS学习篇核心之——盒子模型的更多相关文章
- CSS设计指南之理解盒子模型
原文:CSS设计指南之理解盒子模型 一.理解盒模型 每一个元素都会在页面上生成一个盒子.因此,HTML页面实际上是由一堆盒子组成的.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- CSS基础深入之细说盒子模型
Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词. 基本情况 每一个盒子都有一个内容区域(con ...
- CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型
CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...
- CSS魔法(一) 盒子模型
序言 盒子模型(橘子橘子皮) 一个盒子,包括:外边距(margin).边框(border).内边距(padding)以及最中间的内容(content). margin.padding <styl ...
- css中的f弹性盒子模型的应用案例
案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
- CSS(六):盒子模型
一.什么是盒子模型 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).con ...
- CSS 样式、布局、盒子模型
Css内容: 常用样式: 字体 颜色 背景 布局: 浮动 定位 标签特性 标签盒子模型: 边距 边框 动画: 旋转 渐变 注意:Css引路径从css文件里找 Html和js ...
随机推荐
- Web Api 在线参考文档
参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API
- selinux --chcon命令
chcon命令:修改对象(文件)的安全上下文.比如:用户:角色:类型:安全级别. 命令格式: Chcon [OPTIONS…] CONTEXT FILES….. Chcon [OPTIONS…] –r ...
- devexpress GridControl 行指示列图标绘制
Row Indicator Panel The row indicator panel represents a region displayed at the left edge of the Vi ...
- hdu 4381(背包变形)
题意: 给定n个块,编号从1到n,以及m个操作,初始时n个块是白色. 操作有2种形式: 1 ai xi : 从[1,ai]选xi个块,将这些块涂白. 2 ai xi:从[ai,n]选xi个块,将这些块 ...
- Yii与表单交互的三种模式2
在yii的标签中加入css或js方法:echo $form->textField($model,'starttime',array( 'onclick'=>'alert(&q ...
- 企业高并发的成熟解决方案(一)video(笔记&知识点)
知识点 答案 什么是高可用(HA) 高并发发生在哪两处 app服务器会出现什么问题,有哪些解决方案? 数据库并发有什么要求? hadoop集群的作用 负载均衡的功能有哪些 负载均衡的分类 哪种负载均衡 ...
- lua Date和Time
time和date两个函数在Lua中实现所有的时钟查询功能.函数time在没有参数时返回当前时钟的数值.(在许多系统中该数值是当前距离某个特定时间的秒数.)当为函数调用附加一个特殊的时间表时,该函数就 ...
- Laravel不同数据库的模型之间关联
假设ModelA和ModelB之间是BelongsTo的关系 如果同属于一个数据库连接 那么 public function a(){ return $this->belongsTo(" ...
- 高级正则表达式技术(Python版)
正则表达式是从信息中搜索特定的模式的一把瑞士军刀.它们是一个巨大的工具库,其中的一些功能经常被忽视或未被充分利用.今天我将向你们展示一些正则表达式的高级用法. 举个例子,这是一个我们可能用来检测电话美 ...
- mvc中@RenderSection()研究
一.@RenderSection定义 HelperResult RenderSection(string name) 但是当如果使用了_Layout.cshtml做母版页的页没有实现Section的话 ...