您的位置：首页 > Web前端 > CSS

CSS盒模型以及CSS选择器

2018-02-14 01:36 351 查看

Part 1 :盒模型(box model)

“every element in web design is a rectangular box.”

在一个文档中，每个元素都被表示为一个矩形的盒子。在CSS中，使用标准盒模型(也可叫做框模型)描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。

每个盒子有四个边：外边距边(margin), 边框边(border), 内填充边(padding) 与内容边(content)。

1-设置外边距边(margin)

外边距区域 margin area用空白区域扩展边框区域，以分开相邻的元素。它的大小为 margin-box 的高宽。外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left及简写属性 margin控制。


属性名称	属性用途
margin-top	设置元素的顶部外边距
margin-right	设置与元素相关联的盒子模型的右外边距
margin-bottom	用于设置元素的底部外边距
margin-left	设置与元素相关联的盒子模型的左外边距

上面属性均允许使用负值

注意:这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

即:margin: top right bottom left

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。也可为外边距设置长度值或百分比(百分数是相对于父元素的 width 计算的).

单边外边距属性

可以使用单边外边距属性为元素单边上的外边距设置值。

假设需要把 p 元素的左外边距设置为 20px。可以采用以下方法：

p {margin-left: 20px;}

值复制

若有值相同的边距值，则不用将四个属性值全部写出

CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

* 如果缺少左外边距的值，则使用右外边距的值。

* 如果缺少下外边距的值，则使用上外边距的值。

* 如果缺少右外边距的值，则使用上外边距的值。

例子要设置上下右左边距值为0.25em 1em 0.5em 0.5em.也就是说右边和下边的值相同。

h1 {margin: 0.25em 1em 0.5em;}

2-设置边框边(border)

边框 (border) 是围绕元素内容和内边距的一条或多条线,CSS border 属性允许你规定元素边框的样式(border-style)、宽度(border-style)和颜色(border-color)。


属性名称	属性用途	使用方法
border-width	为边框指定宽度	指定长度值(px, em)或使用 3 个关键字之一 (thin 、medium（默认值）和 thick)
border-style	设置边框样式	10 个不同的非 inherit 样式
border-color	设置边框颜色	使用border-color属性

同样，border属性的值也采用了 top-right-bottom-left 的顺序

3-设置内填充边(padding)

CSS padding 属性定义元素边框与元素内容之间的空白区域,padding 属性接受长度值或百分比值，但不允许使用负值。

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位(em/ ex / px)或百分比.


属性名称	属性用途
padding-top	设置元素的上内边距
padding-right	设置与元素右内边距 4000
padding-bottom	用于设置元素的下内边距
padding-left	设置元素的左内边距

4-设置内容边(content)

内容区域content area 是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，它的大小为内容宽度或 content-box宽及内容高度或content-box高。

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

关于伪元素:”CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.”

即伪元素用于创建一些不在文档树中的元素，并为其添加样式。更多详情以后会专门整理~

A-content与:before 伪元素配合使用：

该伪元素允许创作人员在元素内容的最前面插入生成内容

B-content与:after伪元素配合使用，在元素之后添加内容

例如:如何使用 :before 在元素内容之前插入图像

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
h1:before {content:url(/logo_white.gif)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
</body>
</html>

Part2:选择器（Selectors）

CSS选择器用于选择你想要的元素的样式的模式。

选择器的类别:

类选择器,id选择器,属性选择器 ,派生选择器，后代(包含)选择器,子元素选择器,相邻兄弟选择器

1-类选择器:允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用.

语法: * 选择器名称{样式}

用法:

* 独立使用

* 多类选择器:通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

* 结合元素选择器来使用。

eg.若希望只有段落显示为红色文本：

p.important {color:red;}

eg.假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important.warning {background:silver;}

2-id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。

语法:# 选择器名称 {样式}

用法:

* 独立使用

* 与派生选择器一起使用:

eg.

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

3-属性选择器 :可以为拥有指定属性的 HTML 元素设置样式

语法 :元素名称[指定属性]{样式}

用法:

* 单个属性值

eg:把包含标题（title）的所有元素变为红色

*[title] {color:red;}

根据具体属性值选择

eg.将指向 Web 服务器上某个指定文档的超链接变成红色

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

子串匹配属性选择器


类型	描述
[abc^=”def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”]	选择 abc 属性值中包含子串 “def” 的所有元素

eg.

* 特定属性选择类型

eg.选择 lang 属性等于 en 或以 en- 开头的所有元素

*[lang|="en"] {color: red;}

* 根据部分属性值选择

eg.选择 class 属性中包含 important 的元素

p[class~="important"] {color: red;}

4-派生选择器：依据元素在其位置的上下文关系来定义样式

语法:元素名{样式}

5-后代(包含)选择器:可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

语法:在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

eg.希望只对 h1 元素中的 em 元素应用样式

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中.

6-子元素选择器:缩小范围，只选择某个元素的子元素

eg.选择只作为 h1 元素子元素的 strong 元素

h1 > strong {color:red;}

语法解释:子选择器使用了大于号（子结合符）。

子结合符两边可以有空白符，这是可选的。

7-相邻兄弟选择器:可选择紧接在另一元素后的元素，且二者有相同父元素

语法:相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。

eg.要增加紧接在 h1 元素后出现的段落的上边距

h1 + p {margin-top:50px;}

选择器分组

可以将任意多个选择器分组在一起，对此没有任何限制。

例如，如果想把很多元素显示为灰色，可以使用类似如下的规则：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

选择器的优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级是如何计算的？

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。

　　2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。

　　3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。

　　4、第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}

　　5、第五级由一个或多个类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航