首页 > 技术文章 > (九)盒模型

giscode 2017-03-22 15:20 原文

盒模型(box model),就是CSS看待元素的一种方式,将每个元素看作一个盒子表示。利用CSS,可以对盒子的所有方面加以控制:内容周围内边距的大小、元素是否有边框(什么类型的边框,以及边框的大小),另外元素之间有多大的外边距。

  • CSS使用一个盒模型来控制元素如何显示。
  • 盒子由内容区和可选的内边距、边框和外边距组成。
  • 内容区包含元素的内容。
  • 内边距用来在内容区周围创建可见的空间。
  • 边框包围内边距和内容,它提供了从视觉上分离内容的一种手段。
  • 外边框包围边框、内边距和内容,允许在元素和其他元素之间增加空间。
  • 内边距、边框和外边距都是可选的。
  • 元素的背景会在内容和内边距下显示,但不会延伸到外边距下面。
  • 内边距和外边距大小可以用像素或百分数设置。
  • 边框宽度可以用像素设置,也就可以使用关键字thin、medium和thick来指定。
  • 有8种不同的边框样式,包括实线、破折线、虚线和脊线。
  • 对于外边距、内边距或边框,CSS提供了相应的属性,可以一次对所有四个边(上、右、下、左)完成设置,也可以单独设置任意一边。
  • 使用border-radius属性可以对有边框的元素创建圆角。
  • 使用line-height属性可以增加文本行之间的间距。
  • 可以用background-image属性在元素的背景上放置图像。
  • 使用background-position和background-repeat属性可以设置背景图像的位置和平铺行为。
  • 对于希望成组指定样式的元素要使用class属性。
  • 使用id属性为元素指定一个唯一的名字。还可以使用id属性为元素提供唯一的样式。
  • 一个页面上有给定id的元素只能有一个。
  • 可以使用id选择器按id选择元素,例如#myfavoriteid。
  • 一个元素只能有一个id,不过它可以属于多个类。
  • 在HTML中可以使用多个样式表。
  • 如果两个样式表包含冲突的属性定义,HTML文件中最后链接的样式表最为优先。
  • 可以在<link>元素中使用媒体查询或者使用CSS中的@media规则来指定设备。

 

推荐阅读