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盒子模型的更多相关文章

  1. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  2. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  3. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  4. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  5. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  6. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  7. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  8. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  9. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  10. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

随机推荐

  1. structs2之多文件上传

    //首先是Action部分import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; i ...

  2. asp.net mvc笔记一，最小的MVC工程

    Asp.net MVC项目默认会引用很多第三方插件,特别是现在的5.0,默认示例项目就几十M,搞得都不知道那些才是MVC必须的,是重点,那些是可有可无的. 今天我们就来试验一下,看看一个最小的MVC工 ...

  3. .net, java, c/c++ 和钱

    .net, java, c/c++ 和钱 最近有一段时间没有写博客了,原因是没时间,项目需要在短时间内增加一些安全性的支持,为此我花了近两个月的时间做基础研究,现在路已经跑通了,稍闲下来,看到园子里面 ...

  4. JDK8 的 Lambda 表达式原理

    JDK8 使用一行 Lambda 表达式可以代替先前用匿名类五六行代码所做的事情,那么它是怎么实现的呢?从所周知,匿名类会在编译的时候生成与宿主类带上 $1, $2 的类文件,如写在 TestLamb ...

  5. Azure ARM (12) ARM模式下，在负载均衡器上设置多个公网IP地址

    <Windows Azure Platform 系列文章目录> 最近在帮助一个客户设置WAF (Web Application Firewall),WAF厂商要求在负载均衡器上,设置多个公 ...

  6. lucene 的评分机制

    lucene 的评分机制 elasticsearch是基于lucene的,所以他的评分机制也是基于lucene的.评分就是我们搜索的短语和索引中每篇文档的相关度打分. 如果没有干预评分算法的时候,每次 ...

  7. ASP.NET MVC必知必会知识点总结（二）

    一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectCon ...

  8. 【转载】Memcached在.Net中的基本操作

    一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...

  9. ASP.NET MVC在线预览Excel、Word、TXT、PDF文件

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  10. iOS 学习笔记二【cocopods安装使用和安装过程中遇到的问题及解决办法】【20160725更新】

    在osx 10.11之前cocopods问题不多,但是升级到11之后的版本,之前的cocopods大多用不了,需要重新安装,对于我这种使用测试版系统的技术狂来说,每次都需要重新安装很多东西, 当然,c ...