后端码农谈前端(CSS篇)第六课:盒子模型
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。
一、CSS 内边距属性
属性 | 描述 |
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
属性值:
二、CSS 边框属性
1、border
属性 | 描述 |
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
2、border-style
属性 | 描述 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-left-style | 设置元素的左边框的样式。 |
border-right-style | 设置元素的右边框的样式。 |
border-top-style | 设置元素的上边框的样式。 |
属性值:
3、border-width
属性 | 描述 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top-width | 设置元素的上边框的宽度。 |
属性值:
4、border-color
属性 | 描述 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-left-color | 设置元素的左边框的颜色。 |
border-right-color | 设置元素的右边框的颜色。 |
border-top-color | 设置元素的上边框的颜色。 |
三、CSS 外边距属性
属性 | 描述 |
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
属性值:
四、外边距合并:
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
后端码农谈前端(CSS篇)第六课:盒子模型的更多相关文章
- 后端码农谈前端(CSS篇)第二课:CSS的5个来源
0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...
- 后端码农谈前端(CSS篇)第八课:继承与层叠
一.继承 继承:所谓CSS样式继承,就是子元素应用父元素的规则声明.(由这一特性,可将CSS属性分为可继承属性和非可继承属性.)可继承属性:属性值可由父元素继承给子元素的属性称之为可继承属性. 哪些属 ...
- 后端码农谈前端(CSS篇)第七课:定位与浮动
一.定位: 1.定位的理解 (1)相对定位 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素"相对于&qu ...
- 后端码农谈前端(CSS篇)第五课:CSS样式
一.背景: CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果. 1.背景色 可以使用 background-color 属性为元素设置背景色.这个属性接受任何合法的颜色值. 例如: ...
- 后端码农谈前端(CSS篇)第四课:选择器补充(伪类与伪元素)
一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...
- 后端码农谈前端(CSS篇)第三课:选择器
一.选择器 1.ID选择器: 语法:首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号.请看下面的规则: *#intro {font-weight:bold;} 与类选择器一样,ID 选择器 ...
- 后端码农谈前端(CSS篇)第一课:CSS概述
一.从扮演浏览器开始 扮演浏览器是Head First图书中很有意义的一个环节.可作者忘记了告诉我们扮演浏览器的台本.我们从这里开始. 上图是webkit内核渲染html和css的流程图.从该图我们可 ...
- 后端码农谈前端(HTML篇)第三课:常见属性
一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...
- 后端码农谈前端(HTML篇)第二课:常见元素
一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...
随机推荐
- 安装EPEL源
安装EPEL源 官方源直接安装 rpm -Uvh http://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-5.noarch.rpm ...
- 读《我是IT小小鸟》后有感
我是一名大一新生,在下半学期开学时,我迎来新课程——<大学生职业生涯规划与就业指导 >.这是一门既新颖,又有许多就业知识和理论的学科.在课上,老师向我们推荐了一本书,名叫<我是IT小 ...
- 反射实现 AOP 动态代理模式(Spring AOP 的实现 原理)
好长时间没有用过Spring了. 突然拿起书.我都发现自己对AOP都不熟悉了. 其实AOP的意思就是面向切面编程. OO注重的是我们解决问题的方法(封装成Method),而AOP注重的是许多解决解决问 ...
- 更高效地提高redis client多线程操作的并发吞吐设计
Redis是一个非常高效的基于内存的NOSQL数据库,它提供非常高效的数据读写效能.在实际应用中往往是带宽和CLIENT库读写损耗过高导致无法更好地发挥出Redis更出色的能力.下面结合一些redis ...
- Vmware配置
1.网络 四种连接模式的区别:http://www.cnblogs.com/awpatp/archive/2009/07/24/1530471.html 如果网卡使用Nat模式,则需要启动服务: VM ...
- Android下集成Paypal支付
近期项目需要研究paypal支付,官网上的指导写的过于复杂,可能是老外的思维和中国人不一样吧.难得是发现下面这篇文章: http://www.androidhive.info/2015/02/andr ...
- Mockito自定义verify参数Matcher
在TDD开发中,也许我们会遇见对一些重要的无返回值的行为测试,比如在用户的积分DB中增加用户的积分,这个行为对于我们的业务具有重要的价值,所以我们也希望能测试覆盖这部分业务价值.这个时候我们就得使用m ...
- [Unity3D入门]入门级游戏项目"坦克狙击手"更新
[Unity3D入门]入门级游戏项目"坦克狙击手"更新 在上一篇中我分享了一个尚未完全写好的入门级unity3d项目"坦克狙击手". 本文介绍最新版的" ...
- 用CSS实现居中的方式
直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中
- ios 设置亮度、声音;调用发短信、邮件、打电话
一,设置亮度 [[UIScreen mainScreen] setBrightness:0.5];//0.0~1.0 二,设置声音 1,添加 MediaPlayer.framework 框架 2,在需 ...