CSS基础三

发表于 | 分类于

1.CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素的背景应用于由内容和内边距、边框组成的区域。
许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式，如下：

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

  1. 内边距
    元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
    padding 属性接受长度值或百分比值，但不允许使用负值。
    padding-top,padding-right,padding-bottom,padding-right分别设置内边距的上、左、下、右的值。
  2. 边框
    CSS的border-style属性用来为边框定义样式，如下：
    1
    p.aside {border-style: solid dotted dashed double;}

上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
也可以用border-top-style，border-right-style，border-bottom-style，borderleft-style来定义边框样式。
border-style：none；边框将不存在。
border-width定义边框的宽度，border-color定义边框颜色。

  1. 外边距
    设置外边距的最简单的方法就是使用 margin 属性。
    1
    2
    3
    4
    h1 {margin : 10px 0px 15px 5px;} // 分别设置上、右、下、左外边距的值
    h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
    h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
    p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */

也可以使用margin-top,margin-right,margin-bottom,margin-right来定义外边距。

  1. 外边距合并
    外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
  • 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
  • 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
  • 假设有一个空元素，它有外边距，但是没有边框或填充，在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。
    注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

2.CSS定位

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

  1. 相对定位
    如果对一个元素进行相对定位，可以通过设置垂直或水平位置，让这个元素“相对于”它本来要出现的位置的进行移动，原来的位置还存在。
  2. 绝对定位
    设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  3. 浮动
    浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
  4. 浮动元素内幕
    首先需要建立包含块的概念。浮动元素的包含块是其最近的块级祖先元素。一个元素无论之前是行内元素还是块级元素，在浮动了之后都是成为一个块级框，它会像块级元素一样摆放和表现。
    浮动元素的左（或右）外边界不能超出其包含块的左（或右）padding边界，浮动元素的上（或下）外边界不能超出其包含块的左（或右）padding边界。这一点和absolute元素不一样，absolute元素是不能超出其父元素的border边界。（比如说不能超出其包含块的左padding边界，意思是浮动元素不能进入padding范围内，就是不包括padding）
    浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现的浮动元素的顶端在先出现浮动元素的底端下面。

3.选择器的解析方向

从右到左，先拿到目标节点的描述，匹配到可能的节点后，再查找父节点。而从左到右解析，先匹配上层元素，再一层层向下匹配，当匹配不到，需要回溯上一层重新匹配。众所周知，在DOM树中一个元素可能有若干子元素，如果每一个都去判断一下显然性能太差。而一个子元素只有一个父元素，所以找起来非常方便。
所以我们的CSS解析器是从右向左匹配节点的。这样做是为了减少无效匹配次数，从而匹配快、性能更优。

4.盒模型

W3C标准盒模型和IE盒模型
水平方向盒模型是由margin-left、border-left、padding-left、content、padding-right、border-right、margin-right组成。
W3C标准盒模型的宽度和高度分别是content的width和height
IE标准盒模型的宽度和高度分别是content+padding+border的width和height
使用box-sizing来切换盒模型。Box-sizing:border-box就是IE盒模型，box-sizing:content-box就是W3C盒模型。
使用box-sizing: border-box，在设置有padding值和border值的时候将不会把宽度撑开。
也可以回避这个问题，也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

5.包含块

之前在浮动元素中就已经说了包含块的概念。
对于一个非根元素，如果其position值是relative或static，包含块则是由最近的块级框、表单元格或行内祖先框的内容边界构成。
对于一个非根元素，如果其position值是absolute，包含块是最近的position不是static的祖先元素。

如果这个祖先元素是块级元素，包含块则设置为该元素的内边距边界。
如果这个祖先元素是行内元素，包含块则设置为该祖先元素的内容边界。
一个框里横向排列三个块，怎样让这三个块的宽度均为包含块的1/3，尽量说出两种方法
使用flex
使用float，让三个元素都float
使用display: inline-block，并用font-size去除行内块元素的间隔

6.补充

  1. 去除行内块元素的间隙
    在父元素上设置font-size为0。
    在父元素上设置letter-spacing和word-spacing为-6左右。
    取消标签闭合。
    移除标签间的空格。

  2. box-shadow
    box-shadow: h-shadow v-shadow blur spread color inset;
    其中h-shadow（水平阴影位置）， v-shadow（垂直阴影位置）必需，可以为负值。
    blur是模糊距离，spread是阴影尺寸。

  3. 块级元素和行内元素
    块级元素：div\p\form\table\header\footer\section\h1-6
    行内元素：span\i\a\input\button\label\select

  • 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行
  • 块级元素可以设置weith和height，行内元素设置width和height无效
  • 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果
  • display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

注意：

  • 行内元素尽量只包含行内元素
  • p标签和h1标签文字类块级元素，里面不能放块级元素
  • a标签不能嵌套，但a里可以放块级元素

参考网页：W3Cschool CSS教程
参考书籍：《CSS权威指南》，作者：Eric A.Meyer