后端码农谈前端(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> ...
随机推荐
- flash 定义二维数组
一种二维数组的定义方法 //假设二维数组为 [5][7]var xn:Number = 5;var yn:Number = 7; //定义一数值变量var temp:Number = 0; ...
- ORA-00060:等待资源时检测到死锁的一种处理方法
先执行脚本: SELECT p.sipid, a.serial#, c.object_name, b.session_id, b.oracle_username, b.os_user_name FRO ...
- 用sql取出来的list需要处理成map的两种情况
1. 原生sql: select a.id,a.name from a SQLQuery sqlQuery=this.getSession().createSQLQuery(sb.toString() ...
- Software Testing hw1
I still remember the error which I made in my java project last year. I spent a whole night solving ...
- JAVA学习博客---2015-7
@Updata 2015.7.17 开始熟悉API.WPS首字母自动大写,有的没有加#编号的,其实方法首字母不是大写例如Char charAt 实际上是char charAt.当然骆驼写法charA ...
- centos 后台执行C#控制台程序
1. nohup nohup 无疑是我们首先想到的办法.顾名思义,nohup 的用途就是让提交的命令忽略 hangup 信号.让我们先来看一下 nohup 的帮助信息: NOHUP() User Co ...
- 计划参照mysql-proxy编写mssql-proxy
目前使用haproxy做了mssql多个读库的负载均衡,在生产环境中运行得不错. 不过,这个方案有缺点:客户端需要选择是使用读库,还是写库.这样还是不够方便,如果能够实现自动路由就更好了,即让hapr ...
- 【读书笔记】javascript 继承
在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...
- Nim教程【九】
向关注这个系列的朋友们,道一声:久违了! 它并没有被我阉掉,他一定会得善终的,请各位不要灰心 Set集合类型 为了在特殊场景下提高程序的性能设置了Set类型,同时也是为了保证性能,所以Set只能容纳有 ...
- Hello Mybatis 04 使用spring-mybatis
顺着上一篇,这里介绍下spring-mybatis的配置. 我们使用mybatis去操作数据库的时候,每次都要不停地openSession,closeSession好烦躁哇--这样工作哪里有效率可言! ...