CSS盒子模型
2016-10-22
《css入门经典》第6章
1.每个HTML元素对应于一个显示盒子，但不是所有的元素都显示在屏幕上。
2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式”。可视格式化方式告诉浏览器应该如何在屏幕上显示HTML内容。
3.元素类型：
（1）块元素（block）：以新行开始和结束。<div>，<blockqute>,<br>等。
（2）内联元素（inline）：没有独占一行，而是包含于文本流之中。<em>，<input>，<a>,<img>等。
4.display属性
通过设置display属性值可以改变元素的类型
display:none;不显示
display:block;设置为块元素
display:inline;设置为内联元素
5.匿名盒
当标签包含混合内容，比如文本和一些HTML标签时，会产生没有HTML标签的盒子，称为匿名盒。匿名盒的样式设置与其包含盒相同。
eg.<h1>Hello <em>World!</em></h1> 由图可知：文本Hello为匿名盒。
6.在HTML中，<head>标签的定义为display:none;。所以我们在页面中看不到<head>标签的内容。
7.盒子的显示属性
边距：margin
边框：border
填充：padding
（1）边距margin:即两个盒子之间的间距。边距总是透明的。
注意：重叠边距，即两个垂直方向的盒子，它们在垂直方向的间距使用两个元素间的最大值。边距只在块元素上重叠，并且是在垂直方向重叠，不是水平方向。
（2）边框border：
border属性设置：选择符{ border:大小 样式 颜色; }
|
border-width |
规定边框的宽度。 |
|
border-style |
规定边框的样式。 |
|
border-color |
规定边框的颜色。 |
|
inherit |
规定应该从父元素继承 border 属性的设置。 |
Width:
|
thin |
定义细的边框。 |
|
medium |
默认。定义中等的边框。 |
|
thick |
定义粗的边框。 |
|
length |
允许您自定义边框的宽度。 |
|
inherit |
规定应该从父元素继承边框宽度。 |
Style:
|
none |
定义无边框。 |
|
hidden |
与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
|
dotted |
定义点状边框。在大多数浏览器中呈现为实线。 |
|
dashed |
定义虚线。在大多数浏览器中呈现为实线。 |
|
solid |
定义实线。 |
|
double |
定义双线。双线的宽度等于 border-width 的值。 |
|
groove |
定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
|
ridge |
定义 3D 垄状边框。其效果取决于 border-color 的值。 |
|
inset |
定义 3D inset 边框。其效果取决于 border-color 的值。 |
|
outset |
定义 3D outset 边框。其效果取决于 border-color 的值。 |
|
inherit |
规定应该从父元素继承边框样式。 |
描述
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。（W3School）
（3）填充padding:内容周围的空间。填充总是和内容本身的背景颜色相同。
注意：
（1）表格单元<td>即不是内联元素也不是块元素，表格单元的显示值为display:table-cell。table-cell元素不能有边距。
（2）行长em：在CSS中，一行长定义为等于位置大小的量度，是一个正方形，高度和宽度等于字体的高度。
CSS盒子模型的更多相关文章
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
- 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？
CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
随机推荐
- js实现图片加载特效（从左到右，百叶窗，从中间到两边）
/* 网上百度的,感觉”从中间到两边“的效果写的不是很好,改了一下,感觉可以了!*/<html> <head> <title></title> < ...
- 推荐一个算法编程学习中文社区-51NOD【算法分级，支持多语言，可在线编译】
最近偶尔发现一个算法编程学习的论坛,刚开始有点好奇,也只是注册了一下.最近有时间好好研究了一下,的确非常赞,所以推荐给大家.功能和介绍看下面介绍吧.首页的标题很给劲,很纯粹的Coding社区....虽 ...
- Animo.js ：一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- SQL SERVER 内存分配及常见内存问题 DMV查询
内存动态管理视图(DMV): 从sys.dm_os_memory_clerks开始. SELECT [type] , SUM(virtual_memory_reserved_kb) AS [VM R ...
- 简单的jquery拖曵原理js特效实例
<!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...
- Dripicons – 精美的扁平风格的免费矢量图标字体
Dripicons 是一个好看的免费图标集,有超过 90 个扁平风格的图标,适用在 Web 应用程序中使用,如:箭头,媒体,图表等等. 集合多种矢量格式(PSD,AI,EPS,PDF,SVG),也可以 ...
- Elasticsearch——禁止Body中的index覆盖Url中的index参数
本篇继续一下Elasticsearch日常使用的技巧翻译. 在Elasticsearch有很多的api支持在body中指定_index等信息,比如mget或者msearch以及bulk. 默认的情况下 ...
- Laravel学习
Laravel是个很强大的PHP框架,它剔除了开发中Web开发中比较痛苦的过程,提供了验证(authentication),路由(routing),Session和缓存(caching)等开发过程中常 ...
- JS魔法堂：判断节点位置关系
一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...
- .Net语言 APP开发平台——Smobiler学习日志：Poplist控件在APP中的应用场景以及代码
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...