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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- JS学习：第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
- html学习第三天—— 第11章 盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- 盒子模型(W3C盒子模型、IE盒子模型)
盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...
随机推荐
- [转] webpack之plugin内部运行机制
简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...
- Chino的数列
题解: 一道练代码能力的题目.. 首先很显然他是一道平衡树裸题 第5个操作是势能分析维护最大值最小值就可以了 另外设置虚点和noip2017队列那题一样(不过我只写过线段树) 具体细节: 1.内存池, ...
- ELK+Redis+Nginx服务数据存储以及Nginx日志的收集
PS:此片文章是承接上篇ELK部署文档,再次便不详细说明了 [安装Redis] [root@Redis ~]# wget http://download.redis.io/releases/redi ...
- python各个包的用途
python中的多个包的用途 1.Numpy Numpy提供了两种基本的对象:ndarray和ufunc.ndarray是存储单一数据类型的多维数组,而ufunc是能够对数组进行处理的函数. N维数组 ...
- Codeforces 1144G Two Merged Sequences dp
Two Merged Sequences 感觉是个垃圾题啊, 为什么过的人这么少.. dp[ i ][ 0 ]表示处理完前 i 个, 第 i 个是递增序列序列里的元素,递减序列的最大值. dp[ i ...
- python 将列表（也可以是file.readlines()）输出多个文件
open_diff = open('yanggao.txt', 'r',encoding='utf-8')diff_line = open_diff.readlines() diff_match_sp ...
- BZOJ1001 [BeiJing2006]狼抓兔子 最小割 对偶图 最短路
原文链接http://www.cnblogs.com/zhouzhendong/p/8686871.html 题目传送门 - BZOJ1001 题意 长成上面那样的网格图求最小割. $n,m\leq ...
- Mysql乐观锁与悲观锁
乐观锁和悲观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常重要的基础理念. Mysql的悲观锁 什么是悲观锁(Pessimistic Lock): 悲观锁的特点是先获取锁,再进行业务操作,即 ...
- httpmodule MVCapplication
转自:http://www.cnblogs.com/fish-li/archive/2011/09/05/2168073.html http://www.cnblogs.com/yplong/p/55 ...
- Python Enum 枚举 用法汇总
Python Enum 枚举 用法汇总 import os import sys if sys.version_info.major + sys.version_info.minor * 0.1 &l ...