澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:CSS基本功课程,CSS家常

如何更愉快地使用em —— 别说你懂CSS相对单位

2018/09/03 · CSS · em

原文出处: Keith J.Grant   译文出处:Yuying Wu   

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对单位,也希望分享给大家,所以有了这个译文系列。(若有勘误或翻译建议,欢迎 Github PR ^_^)

《别说你懂CSS相对单位》系列译文:

  • 如何更愉快地使用em [本文]
  • 如何更愉快地使用rem
  • 视口相关单位的应用
  • 无单位数字和行高
  • CSS自定义属性

本文对应的章节目录:

  • 2.1 相对单位值的魔力
    • 2.1.1 完美像素设计(pixel-perfect design)的挣扎
    • 2.1.2 完美像素网页的终结
    • 像素(pixel)、点(point)和pc(pica)
  • 2.2 em和rem
    • 2.2.1 对font-size使用em
      • 当我们在一个元素内用em同时声明font-size和其他属性
      • 字号收缩问题

CSS提供了很多种方式去定义一个值。大家最熟悉的可能也是最容易使用的就是像素(pixel),这被称做“绝对单位”。也就是说,5px在不同的场景下是一样的值。而其他的单位,如em和rem,不是绝对的而是相对的。相对单位的值会根据外部影响因素的变化而变化。例如,2em的值取决于你在哪个元素使用它(有时甚至是哪个属性)。很自然,相对单位使用起来会比较困难。

开发人员,甚至有经验的CSS开发人员,往往不喜欢跟相对单位打交道,其中包括臭名昭著的em。em的值可以被改变的方式似乎难以预测,没有px那么清晰。在本章中,我将揭开相对单位的神秘面纱。首先,我会解释它们为CSS带来的独特价值,然后我会帮助你更好地理解它们。我会解释它们的工作原理,也会告诉你怎么征服它们那看似不可预测的特性。你可以让相对单位为你所用,正确地运行,它们将让你的代码变得更加简单、灵活和容易使用。

 

首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。

CSS基础


本文包括

  1. CSS基础知识
  2. 选择器(重要!!!)
  3. 继承、特殊性、层叠、重要性
  4. CSS格式化排版
  5. 单位和值
  6. 盒模型
  7. 浮动
  8. 相对定位与绝对定位
  9. 布局初探

2.1 相对单位值的魔力

CSS是通过迟绑定(late-binding)的方式把样式渲染到web页面上的:内容和它的样式会在各自的渲染完成之后再合并到一起。比起其他类型的图形设计,这给设计过程添加了它们没有的复杂程度,同时也赋予CSS更强大的能力 —— 一个样式表可供成百上千个页面使用。此外,用户可以直接改变页面的最终呈现方式。举个例子,用户可以更改默认字号大小或者调整浏览器窗口的大小。

在早期的计算机应用程序开发以及传统出版行业中,开发人员或出版商清楚知道所在的媒介存在哪些限制。对于一个特定的应用程序,窗口可能是400px宽,300px高,或者一个版面可能是4英寸宽,6½英寸高。因此,当开发人员布局应用程序的按钮和文本时,他们很清楚这些元素可以做成什么尺寸,以及在屏幕上还有多少空间可以留给他们用来处理其他元素。然而在网页上,情况却不是这样的。

第十一章 CSS代码缩写,占用更少的带宽

  • #### 块级元素:

CSS基础知识

2.1.1 完美像素设计(pixel-perfect design)的挣扎

在web环境下,用户可以将浏览器窗口设置为任意大小,且CSS需要去适应它。另外,用户可以在一个页面打开后,再调整它的大小,CSS也需要去适应这些新的约束条件。这说明了在你创建页面时样式还没有被调用,而是当页面在屏幕上渲染时,浏览器才会去计算样式的规则。

这给CSS增加了一层抽象的概念。我们不应该根据理想的情境来设计元素,而是应该声明一些样式规则,可以让该元素在任何场景下都能跑通。对于现在的互联网,你的页面可能要在一个4英寸的手机屏幕上展示,也可能在一个30英寸的大屏幕上。

长久以来,设计师大量使用“完美像素”设计,缓解了这个问题带来的复杂性。他们会创建一个有着严格定义的容器,通常是一个大约800px宽的居中的纵向列。然后在这些限制下他们再进行设计,这跟他们的前辈在原生应用程序或印刷出版物中做的设计或多或少有点类似。

  盒模型代码简写
:还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:
    margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
通常有下面三种缩写方法:
    1、如果top、right、bottom、left的值相同,如下面代码:margin:10px 10px 10px 10px;
可缩写为:margin:10px;


<div>定义文档中的分区或节
< h1>定义最大的标题
< h2>定义副标题
< h3>定义标题
< h4>定义标题
< h5>定义标题
< h6>定义最小的标题
< ul>定义无序列表
< ol>定义有序列表
< li>定义有序列表或无序列表的列表项目
< dl>定义自定义列表
< dd>定义自定义列表中的条目
< dt>定义自定义列表中的项目
< hr>创建一条水平线
< p>定义段落
< table>定义表格
< td>表格中的标准单元格
< th>定义表头单元格
< thead>标签定义表格的表头
< tr>定义表格中的行

认识CSS样式

  1. CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
    如下列代码:
    <head>
    <style type="text/css">
    p{
    font-size:20px;/设置文字字号/
    color:red;/设置文字颜色/
    font-weight:bold;/设置字体加粗/
    }
    </style>
    ...
    </head>
  2. 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
  3. 如果你这个css样式是定义在某个html网页中的话,那其他网页是无法使用的,但可以把
    把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内。在head标签下添加如下代码
    <head>
    <link href="base.css" rel="stylesheet" type="text/css" />
    ...
    </head>

2.1.2 完美像素网页的终结

随着技术的进步和制造商推出更高分辨率的显示器,像素完美的设计方式慢慢开始崩溃。在21世纪初期,把页面设计成1024px宽还是800px宽,哪个是更保险的展示策略?开发者针对这个问题讨论得很多。然后,我们又针对能否改成1280px宽有类似的讨论。是时候做个决定了。把我们网站的内容宽度做得宽一点(相对于落伍的小电脑屏幕),还是做得窄一点(相对于新出的大屏幕),哪个选择更好呢?

当智能手机出现的时候,开发人员终于要(被迫)要停止假装每个人都可以在他们的网站上获得相同的体验了。不管我们喜不喜欢,我们都得放弃已知的多栏定宽(px)布局,并开始考虑响应式设计。我们再也不能逃避CSS所带来的抽象概念(abstraction),相反,我们要去拥抱这项特性。

响应式 —— 在CSS中,这指的针对不同大小的浏览器窗口,用不同的方式响应更新页面的样式。我们要对不同尺寸的手机、平板电脑或桌面显示器多花心思了。我们将在第8章中详细介绍响应式设计,但在本章中,我会先给大家介绍一些重要的基础概念。

增加的抽象概念意味着额外的复杂性。如果我设定一个宽度为800px的元素,那么它在一个更小的窗口中会怎么显示呢?如果一个横向菜单不能全部在一行展示完,它又会怎么展示?在编写CSS时,你需要能够同时考虑具体情况以及普适性的问题。如果针对一个特定的问题,你有多种方式可以解决,那么你应该选那个在多种不同场景下更通用的解决方案。

在抽象概念这个问题上,相对单位是CSS提供的工具之一。与其把字号大小设置为14px,你可以把它设置为与窗口大小成比例缩放。或者,你可以设置页面上所有元素是依赖基础字号大小的变化而变化的,然后用一行代码就可以达到调整整个页面的目的。接下来,我们来看看CSS提供了哪些方式来实现以上的效果。

像素(pixel)、点(point)和pc(pica)

CSS支持一些绝对长度单位,其中最常见也最基本的是像素(px)。较不常见的绝对单位有毫米(mm,millimeter)、厘米(cm,centimeter)、英寸(in.,inch)、点(pt,point,印刷术语,长度为1/72 inch)以及pc(pica,印刷术语,长度为12 points)。如果你想了解其中的计算方式,以上的长度单位都可以直接转换成另一个单位:1 inch = 25.4 mm = 2.54 cm = 6 pc = 72 pt = 96 px。因此,16px与12pt(16/96×72)是等价的。设计师通常更熟悉点(point)的使用,而开发人员更习惯于像素,因此在和设计师沟通时,你可能需要在两者之间做一些计算工作。

像素这个名字有点误导性 —— 1 CSS像素并不严格等同于显示器的1像素,在高分辨率显示器(如“Retina显示屏”)上尤其明显。尽管根据浏览器、操作系统和硬件的不同,CSS的测量值可能会有细微的差别,但96px总是会大致等于屏幕上的物理1英寸。(尽管有可能会因某些设备或用户设置而异。)

    2、如果top和bottom值相同、left和 right的值相同,如下面代码:margin:10px 20px 10px 20px;
可缩写为:margin:10px 20px;


  • #### 行内元素:

CSS代码语法

  1. css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
  1. 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
  2. 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
    p{font-size:12px;color:red;}
    注意:
    1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
    2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
    p{
    font-size:12px;
    color:red;
    }

2.2 em和rem

em是最常见的相对长度单位,这是排版中使用的一种度量方式,基准值是当前元素的字号大小。 在CSS中,1em表示当前元素的字号大小,实际值取决于在哪个元素上应用。图2.1展示了一个padding为1em的div

[ 图 2.1:padding为1em的元素(添加虚线是为了让padding更明显)]

澳门新浦京娱乐场网站 1

模板代码片段如下。这套样式规则定义字号为16px,也就是元素本身1em代表的值,然后再使用em来声明元素的padding。 把这段代码添加到一个新的样式表里,在<div class ="padded">下随手写些文字,然后到浏览器看看效果吧。

CSS

.padded { font-size: 16px; padding: 1em; 1 }

1
2
3
4
.padded {
  font-size: 16px;
  padding: 1em;          1
}

 

  • 1 把各个方向的padding的值设置为字号大小

padding赋值为1em,乘以字号,得到一个值为16px的padding渲染值。重点来了,使用相对单位声明的值会由浏览器转化为一个绝对值,我们称之为计算值。

在这个例子里,将padding改为2em会生成一个32px的计算值。如果同一个元素的另一个选择器,用一个不一样的字号值去覆盖它,这会改变em在这个域下的基准值,那么padding的计算值也会相应变化。

在设置padding、height、width或border-radius等属性时,使用em可能会很方便,因为如果它们继承了不同的字号大小,或者用户更改了字体设置,这些属性会均匀地缩放。

图2.2展示了两个不同大小的盒子。盒子内的font-sizepaddingborder-radius各不相同。

[ 图 2.2:有相对大小的padding和border-radius的元素 ]

澳门新浦京娱乐场网站 2

你可以通过用em声明paddingborder-radius来给这些盒子声明样式规则。首先给每个元素设定paddingborder-radius为1em,然后给每个盒子指定不同的字号,那么其他属性会跟着字号缩放。

在你的HTML代码里,创建如下的两个盒子,类名分别是box-smallbox-large,代表两个字号修饰符。

[ 代码片段 2.2:在不同元素上使用em(HTML)]

<span class="box box-small">Small</span> <span class="box box-large">Large</span>

1
2
<span class="box box-small">Small</span>
<span class="box box-large">Large</span>

现在,添加下面的样式到你的样式表。这里使用了em声明了一个盒子。还定义了小字号和大字号的修饰符,指定不同的字号大小。

[ 代码片段 2.3:在不同元素上使用em(CSS)]

CSS

.box { padding: 1em; border-radius: 1em; background-color: lightgray; } .box-small { font-size: 12px; 1 } .box-large { font-size: 18px; 1 }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
  padding: 1em;
  border-radius: 1em;
  background-color: lightgray;
}
 
.box-small {
  font-size: 12px;              1
}
 
.box-large {
  font-size: 18px;              1
}
  • 1 不同的字号大小,这会改变元素的em实际值的大小。

这是em一个强大的功能。你可以定义一个元素的字号大小,然后使用一句简单的声明,就可以通过改变字号大小从而控制整个元素大小缩放。你后面将会创建另外一个这样的例子,不过首先,我们来讨论一下em和字号大小。

    3、如果left和right的值相同,如下面代码:margin:10px 20px 30px 20px;
可缩写为:margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。

< a>定义超链接
< b>字体加粗
< span>定义在文档中的行内元素
< img>向网页中插入题图像
< input>输入框
< small>小号字体效果
< br>换行
< big>字体加大加粗
< strong>强调的语气
< select>创建单选或多选菜单
< textarea>定义文本域,多行的文本输入控件

CSS注释代码

  1. Html中使用``。
  2. 就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明。
  3. 快捷键:Ctrl /
  4. 例子:
    <style type="text/css">
    p{
    font-size:12px;/设置文字字号为12px/
    color:red;/设置文字颜色为红色/
    }
    </style>

2.2.1 对font-size使用em

font-size使用em作为单位时,它的表现会有点不一样。我之前说过,em是以当前元素的字号大小作为基准值的。但是,如果你把一个元素的字号设为1.2em的时候,这是什么意思呢?一个元素的字号大小是不能等于它自己的1.2倍的。相反,在font-size上的em会先从继承到的字号大小衍生出来。

举个简单的例子,见图2.3。以下展示了一些不同字号大小的文字。在代码片段2.4,你会用到em来实现。

[ 图 2.3 以em为单位的两种不同的字号大小 ]

澳门新浦京娱乐场网站 3

在你的页面添加以下代码片段。第一行文字,在<body>标签里面,它会按body的字号大小渲染。第二部分,口号(slogan),继承父元素的字号大小。

[ 代码片段 2.4 相对font-size的模板 ]

<body> We love coffee <p class="slogan">We love coffee</p> 1 </body>

1
2
3
4
<body>
  We love coffee
  <p class="slogan">We love coffee</p>          1
</body>
  • 1 slogan从继承了字号大小。

代码片段中,CSS代码片段声明了body的字号大小。为了更加清晰,在这里我用了px来声明。下一步,你可以用em来放大slogan的字号大小。

[ 代码片段 2.5:在font-size上使用em ]

Vim

body { font-size: 16px; } .slogan { 1 font-size: 1.2em; 1 } 1

1
2
3
4
5
6
7
body {
  font-size: 16px;
}
 
.slogan {                  1
  font-size: 1.2em;        1
}                          1
  • 1 计算:这个元素继承到字号,乘以1.2

slogan声明的字号大小是1.2em,为了计算转换成像素值,你需要引用继承的字号16px,16 * 1.2 = 19.2,所以计算字号值是19.2px。

提示

如果你已经知道以px为单位的基础字号大小,但希望把它改用em声明,下面有个简单的计算公式:目标em值 = 目标像素值 / 父元素(被继承元素)像素值。举个例子,如果你想要一个10px的字号大小,父元素的字号是12px,10 / 12 = 0.8333em。如果你想要16px的字号大小,父元素字号是12px,那么 16 / 12 = 1.3333em。我们会在这章里多次用到这个计算公式。

有一点对你很有帮助,对于大多数浏览器,默认字号大小是16px。技术上,关键字medium会被计算转换为16px。

  颜色值缩写
:关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
    例子1:p{color:#000000;}
可以缩写为:p{color: #000;}



三种样式

  1. 内联式适用情况:局部特殊化

  2. 嵌入式适用情况:统一标签样式格式

  3. 外联式适用情况:方便代码重用和管理

  4. 优先级:就近原则(离被设置元素越近优先级别越高)。
    但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下,

当我们在一个元素内用em同时声明font-size和其他属性

你已经使用过em声明font-size了(基于一个继承的字号大小值)。以及,你也曾经使用em声明其他属性,如paddingborder-radius(基于当前元素的字号大小值)。当你针对同一个元素使用em声明font-size和其他属性的时候,em会变得很神奇。此时浏览器必须先计算font-size,然后基于这个值再去计算其他值。这些属性声明的时候使用的是相同的em值,但很可能它们会有不同的计算值。

在之前的例子里,我们计算到字号大小是19.2px(继承的16px乘以1.2em)。图2.4是相同的slogan元素,但有额外的1.2em padding以及为了让padding大小更加明显的灰色背景。可以看出,paddingfont-size稍微大一些,尽管它俩声明的时候em值是一样的。

[ 图2.4 一个font-size为1.2em以及padding为1.2em的元素 ]

澳门新浦京娱乐场网站 4

现在的情况是,这个段落从body继承了16px的字号大小,通过计算得到值为19.2px的字号计算值。这意味着,19.2px是1em在当前域的基础值,而这个值会被用作计算padding的值。对应的CSS代码在下面,更新你的样式表并查看你的测试页面吧。

[ 代码片段 2.6 在font-size和padding上使用em ]

CSS

body { font-size: 16px; } .slogan { font-size: 1.2em; 1 padding: 1.2em; 2 background-color: #ccc; }

1
2
3
4
5
6
7
8
9
body {
  font-size: 16px;
}
 
.slogan {
  font-size: 1.2em;             1
  padding: 1.2em;               2
  background-color: #ccc;
}
  • 1 赋值为 19.2 px
  • 2 赋值为 23.04 px

在这个例子里,padding的声明值为1.2em,乘以19.2px(当前元素的字号大小),计算出23.04px。我们可以看到,尽管font-sizepadding声明时em值是一样的,但它们的计算值是不一样的。

    例子2:p{color: #336699;}
可以缩写为:p{color: #369;}


内联式css样式,直接写在现有的HTML标签中

  1. 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
    <p style="color:red">这里文字是红色。</p>
  2. 注意要写在元素的开始标签里,下面这种写法是错误的:
    <p>这里文字是红色。</p style="color:red">
  3. 并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:
    <p style="color:red;font-size:12px">这里文字是红色。</p>

字号收缩问题

当你使用em声明多层嵌套的元素字号时,会产生意想不到的效果。要弄清楚每个元素的实际值,首先你需要知道它继承的父元素的字号大小,如果父元素的字号也是用em声明的,那么你需要知道它的父元素的字号大小,在dom树往上查,以此类推。

当你使用em声明列表的字号大小,列表嵌套了好几层,效果就更明显了。大多数web开发者会发现在他们的职业生涯里面,图2.5的列表嵌套形式有点眼熟。文字在逐步缩小!正是因为em带来的这一类烦人的问题,开发者才对em避而远之。

[ 图 2.5 嵌套列表中的字号缩小现象 ]

澳门新浦京娱乐场网站 5

当你多层嵌套列表,而每一层声明的字号大小以em为单位,字号收缩现象就会发生。在代码片段2.7和2.8的例子里,无序列表的字号是0.8em。这个选择器对页面上所有的ul有效,所以当一个列表从另外一个列表继承到字号大小的时候,em就产生复合效果。

[ 代码片段 2.7 在列表上使用em ]

CSS

body { font-size: 16px; } ul { font-size: .8em; }

1
2
3
4
5
6
7
body {
  font-size: 16px;
}
 
ul {
  font-size: .8em;
}

[ 代码片段 2.8 多层嵌套的列表 ]

<ul> <li>Top level <ul> 1 <li>Second level 1 <ul> 2 <li>Third level 2 <ul> 3 <li>Fourth level 3 <ul> <li>Fifth level</li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul>
  <li>Top level
    <ul>                                    1
      <li>Second level                      1
        <ul>                                2
          <li>Third level                   2
            <ul>                            3
              <li>Fourth level              3
                <ul>
                  <li>Fifth level</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
  • 1 这个列表嵌套在第一个列表里,继承了它的字号大小
  • 2 然后这个列表又嵌套在另一个列表里,继承了第二个列表的字号大小
  • 3 ……以此类推

每一个列表的字号大小是0.8乘以父元素的字号大小。这代表第一个列表的字号大小是12.8px,嵌套的子列表字号大小是10.24px(12.8px * 0.8),第三层列表的是8.192px,如此类推。同样地,如果你给字号大小的赋值大于1em,相反,文字的字号会一层层变大。我们想要的效果是像图2.6一样,在顶层声明字号的大小,但下面嵌套层级的列表字号保持不变。

[ 图 2.6 字号正常的多层嵌套列表 ]

澳门新浦京娱乐场网站 6

其中一种实现的方式可以看看代码片段2.9。第一个列表的字号大小还是0.8 em(见示例2.7),第二个选择器对嵌套在无序列表的无序列表有效 —— 也就是除了第一个无序列表以外的所有无序列表。现在嵌套的列表设定了跟父元素一致的字号大小,正如图2.6一样。

[ 代码片段 2.9 字号收缩现象的纠正 ]

JavaScript

ul { font-size: .8em; } ul ul { 1 font-size: 1em; 1 }

1
2
3
4
5
6
7
ul {
  font-size: .8em;
}
 
ul ul {                1
  font-size: 1em;      1
}
  • 1 嵌套在列表里面的列表,应该把字号大小设定为跟父元素一样

这可以解决问题,但不是最优方案。因为你设置了一个字号值,马上用另一个选择器重写了这个规则。如果你可以使用针对嵌套的列表声明一个特定的选择器,避免互相覆盖,会是一个更好的方案。

到现在我们清楚了,如果你不是一个比较小心的人,你应该远离em。使用em作为paddingmargin和元素缩放效果的单位挺好的,但当em遇上font-size时,事情可以变得很复杂。感谢上天,我们有个更好的选择 —— rem。

1 赞 收藏 评论

澳门新浦京娱乐场网站 7

  字体缩写
:网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
    body{
font-style:italic;
font-variant:small-caps; 
font-weight:bold; 
font-size:12px; 
line-height:1.5em; 
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句:
    body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意:
      1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
      2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
    一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
      body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。  

  • ##### 行内元素与块级元素的区别:

嵌入式css样式,写在当前的文件中

  1. 现在有一任务,把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情(为每一个``标签加入sytle="font-size:18px"语句),本小节讲解一种新的方法嵌入式css样式来实现这个任务。
  2. 嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个``标签中的文字设置为红色:
    <style type="text/css">
    span{
    color:red;
    }
    </style>
  3. 嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。

第十二章 单位和值

1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。
2.行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;
 块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。
3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;
 块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。
4.块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;
 行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

外部式css样式,写在单独的一个文件中

  1. 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:
    <link href="base.css" rel="stylesheet" type="text/css" />
  2. 注意:
    1、css样式文件名称以有意义的英文字母命名,如 main.css。
    2、rel="stylesheet" type="text/css" 是固定写法不可修改。
    3、<link>标签位置一般写在<head>标签之内。

  颜色值
在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:
    1、英文命令颜色  p{color:red;}



选择器

  1. 每一条css样式声明(定义)由两部分组成,形式如下:
    选择器{
    样式;
    }
  2. 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

      2、RGB颜色  这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
       p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:p{color:rgb(20%,33%,25%);}



选择器种类

  • 标签选择器,标签名{},作用于所有此标签。

  • 类选择器, .class{},在标签内定义class="",属图形结构。

  • ID选择器,#ID{}, 在标签内定义id="",有严格的一一对应关系。

  • 子选择器, .span>li{},作用于父元素span类下一层的li标签。

  • 包含选择器,.span li{},作用于父元素span下所有li标签。

  • 通用选择器,*{},匹配所有html的标签元素。

  • 伪类选择符:它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。

  • 包含选择器作用于该标签下的子元素,不包含本身,标签选择器作用包含自己本身

    3、十六进制颜色  这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。
       p{color:#00ffff;}

  • #### CSS中可以和不可以继承的属性

标签选择器

  1. 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:
    <style type="text/css">
    p{
    font-size:12px;
    line-height:1.6em;
    }
    ...
    </style>
    上面的css样式代码的作用:为p标签设置12px字号,行间距设置1.6em的样式。

  2. px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

  长度值
长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。
    1、像素
      像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
    2、em
      就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px; 
如果 font-size 为 18px,那么 1em = 18px。如下代码:
      p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
    下面注意一个特殊情况:
      但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。 
如下代码:
      html:
      <p>以这个<span>例子</span>为例。</p>
css:
      p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
    3、百分比
      p{font-size:12px;line-height:130%}
设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。  

一、无继承性的属性

类选择器

  1. 类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。

  2. 语法:
    .类选器名称{css样式代码;}

  3. 注意:
    1、英文圆点开头
    2、其中类选器名称可以任意起名(但不要起中文噢)

  4. 使用方法:
    第一步:使用合适的标签把要修饰的内容标记起来,如下:
    <span>胆小如鼠</span>
    第二步:使用class="类选择器名称"为标签设置一个类,如下:
    <span class="stress">胆小如鼠</span>
    第三步:设置类选器css样式,如下:
    .stress{color:red;}/类前面要加入一个英文圆点/

第十三章 CSS样式设置小技巧

1、display:规定元素应该生成的框的类型
2、文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
3、盒子模型的属性:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性:content、counter-reset、counter-increment
7、轮廓样式属性:outline-style、outline-width、outline-color、outline
8、页面样式属性:size、page-break-before、page-break-after
9、声音样式属性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

ID选择器

在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:

  1. 为标签设置id="ID名称",而不是class="类名称"。

  2. ID选择符的前面是井号(#)号,而不是英文圆点(.)。

  3. 例子:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>认识html标签</title>
    <style type="text/css">
    #stress{
    color:red;
    }
    #setGreen{
    color:green;
    }
    </style>
    </head>
    <body>
    <h1>勇气</h1>
    <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
    <p>到了三年级下学期时,我们班上了一节<span id="setGreen">公开课</span>,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>

         </body>
     </html>
    
  4. 在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。这样,一般网站分为头,体,脚部分,因为考虑到它们在同一个页面只会出现一次,所以用id,其他的,比如说你定义了一个颜色为red的class,在同一个页面也许要多次用到,就用class定义。另外,当页面中用到js或者要动态调用对象的时候,要用到id,所以要根据自己的情况运用。自己的语言。
    但document的方法中有getElementById()这个方法倒是只能用id的.

  水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的。如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
  水平居中设置-定宽块状元素
 当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

二、有继承性的属性

类和ID选择器的区别

  1. 相同点:可以应用于任何元素
  2. 不同点:

    1. ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。如果单纯的在CSS里使用相同ID多次是可以的!但如果页面涉及到js,就不好了。因为js里获取DOM是通过getElementById,而如果页面出现同一个id几次,这样就获取不到了。所以id要有唯一性。成熟网站里,你很少看到css里用id选择器的,都是用class,id选择器留给写js的人用,这样避免冲突。
      下面代码是正确的:
      <span class="stress">胆小如鼠</span>
      <span class="stress">勇气</span>
      而下面代码是错误的:
      <span id="stress">胆小如鼠</span>
      <span id="stress">勇气</span>
    2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

      • 下面的代码是正确的(完整代码见右侧代码编辑器)
        .stress{
        color:red;
        }
        .bigsize{
        font-size:25px;
        }
        <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
        代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

      • 下面的代码是不正确的(完整代码见右侧代码编辑器)
        #stressid{
        color:red;
        }
        #bigsizeid{
        font-size:25px;
        }
        <p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
        代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。

  定宽块状元素:
    满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

1、字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3、元素可见性:visibility
4、表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性:page、page-break-inside、windows、orphans
9、声音样式属性:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

交集选择器

  • 一个标签选择器后边跟一个类选择器或者一个 ID 选择器,中间不能有空格。它要求必
    须是属于某一个标签的,并且声明了类选择器或者 ID 选择器。
  • 例如:
    div.mycolor{…} 类为 mycolor 的div标签才会被选中,应用该样式。
    div#mydiv{…} id 为 mydiv 的div标签才会被选中,应用该样式。

  水平居中总结-不定宽块状元素方法:

三、所有元素可以继承的属性

并集选择器

  • 就是多个选择器以逗号相连,只要满足其中之一它都会被选中!
  • 我们上面学的选择器都可以被写入并集选择器
    div,p,h1,div.mycolor,div#mydiv {…}

    (一)
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
      不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
        加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;
这一小节我们来讲一下第一种方法:
        第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
        第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
    (二)
第二种方法:改变块级元素的 display 为 inline 类型,然后使用 text-align:center 来实现居中效果。如下例子:
        html代码:
        <body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>

1、元素可见性:visibility
2、光标属性:cursor

子选择器

  1. 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。代码:
    .food>li{border:1px solid red;}
    这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

  2. 代码
    <ul class="food">
    <li>水果
    <ul>
    <li>香蕉</li>
    <li>苹果</li>
    <li>梨</li>
    </ul>
    </li>
    <li>蔬菜
    <ul>
    <li>白菜</li>
    <li>油菜</li>
    <li>卷心菜</li>
    </ul>
    </li>
    </ul>

  3. 样式:
    border:1px solid red;
    相当于
    border-width:1px; //边框宽度
    border-style:solid; //边框风格
    border-color:red; //边框颜色

        
css代码:
        <style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>


四、内联元素可以继承的属性

包含(后代)选择器

  1. 包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码:
    .first span{color:red;}
    这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。

  2. 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于<span style="color:red">所有子后代元素</span>。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

  3. 总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
    (三)
方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。
      代码如下:
      <body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>


1、字体系列属性
2、除text-indent、text-align之外的文本系列属性

通用选择器

  • 通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:
    * {color:red;}

      css代码:
      <style>
.container{
float:left;
position:relative;
left:50%
}
      .container ul{
list-style:none;
margin:0;
padding:0;

position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>


五、块级元素可以继承的属性

伪类选择符

  1. 更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:
    a:hover{color:red;}

  2. 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

  3. 关于伪选择符:
    关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 css3 中,但是因为不能兼容所有浏览器,本教程只是讲了这一种最常用的)。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。

  4. 什么时候使用伪类选择符
    当用户和网站交互的时候一般使用伪类选择器,,如“:hover”,":active"和":focus"。常用的伪类有:
    .demo a:link {color:gray;}/链接没有被访问时前景色为红色/
    .demo a:visited{color:yellow;}/链接被访问过后前景色为黄色/
    .demo a:hover{color:green;}/鼠标悬浮在链接上时前景色为绿色/
    .demo a:active{color:blue;}/鼠标点中激活链接那一下前景色为蓝色/

      这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。
    这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。

1、text-indent、text-align *

分组选择符

  • 当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:
    h1,span{color:red;}
    它相当于下面两行代码:
    h1{color:red;}
    span{color:red;}

  垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码:
    <div class="container">
hi,imooc!
</div>



CSS继承、特殊性、层叠、重要性

    css代码:
    <style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>


CSS继承

  1. CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
    p{color:red;}
    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

  2. 可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
    p{border:1px solid red;}
    <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线,而对于子元素span是没用起到作用的。

  3. 那么,哪些属性是可以继承的呢?css样式表属性可以继承的有如下:
    *azimuth, border-collapse, border-spacing,
    caption-side, color, cursor, direction, elevation,
    empty-cells, font-family, font-size, font-style,
    font-variant, font-weight, font, letter-spacing,
    line-height, list-style-image, list-style-position,
    list-style-type, list-style, orphans, pitch-range,
    pitch, quotes, richness, speak-header, speaknumeral,
    speak-punctuation, speak, speechrate,
    stress, text-align, text-indent, texttransform,
    visibility, voice-family, volume, whitespace,
    widows, word-spacing *

  4. CSS样式表继承详解

  垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种:
    方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
    说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效。所以又要插入 table 标签了。下面看一下例子:
      html代码:
      <body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

如何让块级元素水平居中?如何让行内元素水平居中?

CSS设置行内元素的水平居中

div{text-align:center} DIV内的行内元素均会水平居中

CSS设置行内元素的垂直居中

div{height:30px; line-height:30px} DIV内的行内元素均会垂直居中

当然,如果既要水平居中又要垂直居中,那么综合一下

div{text-align:center; height:30px; line-height:30px}

CSS设置块级元素的水平居中

div p{margin:0 auto; width:500px} 块级元素p一定要设置宽度,
才能相当于DIV父容器水平居中

CSS设置块级元素的垂直居中

div{width:500px} DIV父容器设置宽度

div p{margin:0 aut0; height:30px; line-height:30px} 块级元素p也可以加个宽度,以达到相对于DIV父容器的水平居中效果 说明:在以后的实际项目中,块级元素的垂直居中布局方式可能会碰到比这个更复杂。

什么叫行内元素?

常见的span、a、lable、strong、b等html标签都是行内元素

默认情况下,行内元素均无法设置宽度、高度、上下方向margin的外边距等

当然,这不是绝对的,通过CSS可以让任何行内元素变成块级元素!比如:

span{display:block} /span这时设置成了块级元素/

什么叫块级元素?

常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素

当然,这也不是绝对的,通过CSS可以让任何块级元素变成行内元素!比如:

h1{display:inline} h1这时设置成了行内元素

  • ##### 用 CSS 实现一个三角形

澳门新浦京娱乐场网站 8

三角.jpg

  • ##### 单行文本溢出加 ...

澳门新浦京娱乐场网站 9

单行文本溢出.jpg

  • #### px, em, rem 有什么区别?

特殊性(specificity)/权值/优先级

  1. 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码:
    p{color:red;}
    .first{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

  2. 下面是权值的规则:
    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
    p{color:red;} /权值为1/
    p span{color:green;} /权值为1 1=2/
    .warning{color:white;} /权值为10/
    p span.warning{color:purple;} /权值为1 1 10=12/
    #footer .note p{color:yellow;} /权值为100 10 1=111/
    4个等级的定义如下:

    1. 第一等:代表内联样式,如: style=””,权值为1000。
    2. 第二等:代表ID选择器,如:#content,权值为100。
    3. 第三等:代表类,伪类和属性选择器,如.content,权值为10。
    4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
    5. <span style="color:red">注意</span>:通用选择器(*),子选择器(>)和相邻同胞选择器( )并不在这四个等级中,所以他们的权值都为0。
  3. <span style="color:red">注意</span>:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

  4. 最后一个影响特殊性的声明:!important

    例:
    h1{ color:red!important;}
    !important被称为重要声明,被标记为!important的属性其特殊性最高,当出现有冲突的重要声明时,同样安照出现的先后顺序决定最后的显示。

    例:
    h1{color:red!important;}
    h1{color:blue!important;}
    最后h1文字为蓝色

    !important要写在分号的前面,每次针对一个属性(即想将样式中的多个属性都提高权限,就要多次添加)。
    p{color:red!important;font-size:14px!important}

    这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。

  5. 例子:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>特殊性</title>
    <style type="text/css">
    p{color:red;}
    .first{color:green;}/因为权值高显示为绿色/

         span{color:pink;}/*设置为粉色*/
         p span{color:purple};
    
         </style>
     </head>
     <body>
         <h1>勇气</h1>
         <p class="first">三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
         <p id="second">到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
     </body>
     </html>
    

    结果:
    <span style="color:green">三年级时,我还是一个<span style="color:purple">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</span>

    解释:
    第七行 p{color:red;} 对于p来说,这条语句的权值为 1 ;而对于p中的span胆小如鼠来说,因为继承性,这条语句对于胆小如鼠来说只有 0.1 的权值。
    第八行 .first{color:green;} 对于first来说,这条语句的权值为 10 ;而对于first中的span胆小如鼠来说,因为继承性,这条语句对于胆小如鼠来说只有 0.1 的权值。
    第十行 span{color:pink;} 对于span胆小如鼠来说,这条语句的权值为 1 。
    所以对于整段话来说(除了胆小如鼠外),执行第八行语句(即段落显示绿色),因为第八行具有的权值最高为10>第七行的权值1,;而对于胆小如鼠来说,执行第十行语句(即显示粉色),因为第十行语句具有的权值为1>第七行的权值0.1(第八行的权值)。
    第十一行 p span{color:purple;} 对于p和span来说,这条语句的权值为1 1=2。那么现在对于p来说,就执行第十一行语句(即显示紫色)(第十一行权值为2>第十行的权值1)。

  6. 相关阅读:
    CSS选择器的权重与优先规则
    玩转CSS选择器(一)之使用方法

      
css代码:
      table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
    方法二 
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
      html代码:
      <div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>


PX特点
  1. IE无法调整那些使用px作为单位的字体大小;
  2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
  3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

层叠

  1. 我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。

  2. 层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

  3. 如下面代码:
    p{color:red;}
    p{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
    最后 p 中的文本会设置为green,这个层叠很好理解,理解为后面的样式会覆盖前面的样式。

      css代码:
      <style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

EM特点
  1. em的值并不是固定的;

  2. em会继承父级元素的字体大小。
    所以我们在写CSS的时候,需要注意两点:

  3. body选择器中声明Font-size=62.5%;

  4. 将你的原来的px数值除以10,然后换上em作为单位;

  5. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

    也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。

CSS格式化排版

  隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
    position : absolute
float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
    如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为position:absolute 以后,就可以了。
      <div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>

rem特点

rem是[CSS3]新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:
p {font-size:14px; font-size:.875rem;}

注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。



  1. IE无法调整那些使用px作为单位的字体大小;

  2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;

  3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。

px像素(Pixel)是相对长度单位,像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。

字体单位使用em能支持IE6下的字体缩放,在页面中按ctrl 滚轮,字体以px为单位的网站没有反应。

px是绝对单位,不支持IE的缩放。

em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em有如下特点:

  1. em的值并不是固定的;

  2. em会继续父级元素的字体大小。

所以我们在写CSS的时候,需要注意:

  1. body选择器中声明Font-size=62.5%;(Font-size=63%;用于ie6兼容)

  2. 将你的原来的px数值除以10,然后换上em作为单位;

  3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继续#content的字体高而变为了1em=12px。

但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时,对于浮点的取值精确度有限。不知道有没有 其他的解释。

单位pt的说明

在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器 被分割为了一个个的像素,单个像素只能有一种颜色 (为了简化,这里暂不讨论次像素反锯齿技术),要在屏幕上显示,必须先把以 pt 为单位的长度转换为以像素为单位的长度,这个转换的媒介,就是 DPI (事实上,这里的所谓的 DPI,是操作系统和浏览器中使用的术语,即为 PPI, pixels per inch,和扫描仪、打印机、数码相机中的 DPI 是不同的概念)。

例如,无论在哪个操作系统中,Firefox 浏览器默认的 DPI 都是 96,那么实际上 9pt = 9 * 1/72 * 96 = 12px。

所以,虽然“DPI”中的“I”和“1pt 等于 1/72 inch”中的“inch”,都不代表物理上的英寸,但这两个单位互相之间是相等的,也就在相乘中约掉了。

那么,真实的物理长度怎么计算呢?请拿出一把尺子,丈量你的显示器的可见宽度 (我这里是 11.2992 英寸),除以横向分辨率 (我这里是 1024 像素),得到的就是每个像素的物理长度。

现在我们可以回答这样一个问题,网页上 9pt 的字体究竟占用了多宽的空间?答案是:  9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英寸 = 0.3363 厘米。

虽然pt是绝对单位,但是那只是针对输出设备而言的,在文字排版工具(word,abobe)中是非常有用的字体单位。不管显示器的分辨率是多少,打印在纸面上的结果是一样的。

但是网页主要为了屏幕显示,而不是为了打印等其他需要的。而px能够精确地表示元素在屏幕中的位置和大小。

当然。在dpi是96的情况下,9pt=12px。



澳门新浦京娱乐场网站 10

代码的作用.jpg

字体大小12px 行高1.5*12px 字体(tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;)
引号是为了在有空格的情况下不会被解析成多个元素
5b8b 4f53 黑体

代码
test1
test2 [rgba1](https://link.jianshu.com?t=http://www.cnblogs.com/Chen-XiaoJun/p/6208758.html) [rgba2](https://link.jianshu.com?t=http://www.cnblogs.com/letitgo/p/3904584.html)
test3
test4
test5

字体

  1. 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。
    body{font-family:"宋体";}

  2. 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)

  3. 澳门新浦京娱乐场网站:CSS基本功课程,CSS家常便饭样式。现在一般网页喜欢设置“微软雅黑”,如下代码:
    body{font-family:"Microsoft Yahei";}

    body{font-family:"微软雅黑";}

注意:第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

      
css代码
      <style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>

文字排版

  • font-family:设置字体;多个字体用逗号隔开
    font-family:"Times New Roman",Georgia,Serif;

  • font-size:字体大小;
    可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):
    body{font-size:12px;color:#666}

    注意:这里font-size一定要带单位px或者em或者%!!!

  • font-weight:bold:设置为粗体样式;

  • font-style:italic:设置为斜体样式;
    normal(标准) italic(斜体) oblique(倾斜)

  • text-decoration:underline:文字设置下划线;

  • text-decoration:line-through:删除线;
    h1{text-decoration:overline}
    其他值
    underline 定义文本下的一条线。
    overline 定义文本上的一条线。
    line-through 定义穿过文本下的一条线。
    blink 定义闪烁的文本。(经本人测试失效???)

  • 设置多种字体属性
    语法:{font:字体风格 字体粗细字体大小 字体类型;}
    span{font:oblique bold 12px "楷体";}

  • 鼠标形状
    语法:标签选择器{cursor:cursor属性;}(鼠标形状 )
    css:
    span{cursor:pointer;}
    html:
    <span>...(内容)...</span>
    cursor属性:
    cursor(鼠标形状) default(默认) pointer(超链接指针) wait(忙) help(帮助)
    text(指示文本) crosshair(十字状)

 

段落排版

  • text-indent:2em:缩进;中文文字中的段前习惯空两个文字的空白。
    注意:2em的意思就是文字的2倍大小。 这里可带单位,也可不带单位,当不带单位时,默认单位为em!)

    在中文里,文字输入分为全角和半角,
    (中文输入法里,按shift 空格 切换全角半角状态)
    全角,段落中所有字符(包括文字和其它符号:逗号、顿号、句号等),
    都是占用一个字的位置,这样排版的时候,上下文字能对齐;
    半角,段落中所有除文字外的符号,只占用半个字的位置;
    打字时,默认是半角,按空格最明显,只有前一个字的一半宽度;
    切换全角后,空格刚好是一个字宽度(段落中最明显,上下对齐)
    em 就是一个全角占位符;

  • line-height:2em:行间距(行高);
    设置高度与行高一样,可以实现垂直居中效果!

    注意:必须带单位px或em或者%!!!

  • word-spacing:50px:英文单词间距;(仅包括英文)

  • letter-spacing:20px:字符间距;(包括中文和英文)

    1. 在中英文混排的文章中,要注意的一点是,中文对word-spacing属性是没有反应的,而使用letter-spacing调整中文字间距的时候,会同时拉开英文字母的距离,使得在中文排版页面中的英文显得不美观;
      (经本人测试,中文字之间加空格之后,会对word-spacing产生反应!)
    2. 中英文混排时,可以对不同的语言添加<span>标签,分开调整;
  • text-align:属性规定元素中的文本的水平对齐方式;
    text-align:center/right/left(默认)/justify(两端对齐)

    例子:
    <div>[站外图片上传中……(3)]</div>
    此时在嵌入式样式中应这样写:
    div{
    text-align:xxx;
    }

    解释:

    1. 该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。其目的是设置文本或img标签等一些内联对象(或与之类似的元素)的居中。
    2. text-align可以对一个块使用,对这个块里的所有内容都会生效,不管块里包含的是图片还是文字。然而如果一个块内包含着子元素的块,那么对这个子元素所占的空间并不生效,只对块内所有的文字和图片生效而已。

    扩展阅读:
    margin:0 auto 与 text-align:center 的区别

  • vertical-align:文本的垂直对齐方式;
    middle/top/bottom

  • float:浮动方式(元素会紧贴到父元素的左边/右边/默认,注意很有可能挤压在浮动元素之前的元素)
    left/right/none(默认)

  • border
    设置左/右/上/下边框:
    border-left/right/top/bottom: 1px solid red;
    实线:solid
    虚线:dashed

  • border-radius
    设置边框的边角为圆形
    border-radius:XXpx;

  • 元素性质相互转化:
    display:block; (变成块级元素)
    display:inline; (变成内联元素)
    display:inline-block; (仍以块级元素展示,但是并不独占一行)
    display:none;(在页面不显示!)

后代元素长度大于祖辈元素的大小时候的处理方法:

overflow:visible
可能的值:
visible:默认,内容不会被修剪,会呈现在元素框之外。
hidden:超出的内容会被修剪掉,直接不现实。
scroll:超出内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被超出,则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。

背景

  • background-color
    元素的背景颜色默认为 transparent
    background-color 不会被后代继承。

  • background-image
    使用 background-image 属性默认值为 none 表示背景上没有放置任何图像
    如果需要设置一个背景图像,必须为这个属性设置一个 url 值
    background-image: url(bg.gif);
    注意图片的位置引入方法!

  • background-repeat
    使用background-img时,背景图片重复的问题
    使用 background-repeat 来解决,可以的值:repeat-x(只在x轴),repeat-y,no-repeat

  • background-position
    前提:背景图片一定不重复(no-repeat)

    1. 可以使用一些关键字:top、bottom、left、right 和 center 通常,这些关键字会成对出现。注意:第一个值是y轴(垂直方向),第二个值是x轴(水平方向)
      top left
      top center
      top right
      center left
      center center
      center right
      bottom left
      bottom center
      bottom right
    2. 也可以用百分比:background:50% 50%;第一个表示水平方向,第二个表示垂直方向
    3. 当然更可以用数值,以 px 单位:background:40px 10px;第一个表示水平第二个表示垂直
    4. 也可以混用
  • background-attachment
    背景关联:background-attachment:fixed
    用滚动条滚动时,背景图片不变

  • 总结写法
    background: #00FF00 url(bg.gif) no-repeat fixed center left;

单位和值

颜色值

在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:

  1. 英文命令颜色
    前面几个小节中经常用到的就是这种设置方法:
    p{color:red;}
  2. RGB颜色
    这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
    p{color:rgb(133,45,200);}
    每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。如:
    p{color:rgb(20%,33%,25%);}

    rgb(20%,33%,25%)=rgb(20%255,33%255,25%*255)
  3. 十六进制颜色
    这种颜色设置方法是现在比较普遍使用的方法,其原理其实也是 RGB 设置,但是其每一项的值由 0-255 变成了十六进制 00-ff。
    p{color:#00ffff;}
  4. 配色表

长度值

长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

  1. 像素
    像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。

  2. em
    就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
    p{font-size:12px;text-indent:2em;}
    上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
    <span style="color:red">下面注意一个特殊情况:</span>
    当给 font-size 设置单位为 em 时,此时计算的标准以父元素p的 font-size 为基础。如下代码:
    html:
    <p>以这个<span>例子</span>为例。</p>
    澳门新浦京娱乐场网站:CSS基本功课程,CSS家常便饭样式。css:
    p{font-size:14px}
    span{font-size:0.8em;}
    结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

  3. 百分比
    p{font-size:12px;line-height:130%}
    设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

盒模型

  • CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和
    的方式,页面中的所有标记都可以看成是一个盒子,盒模型是我们对网页
    行定位的基础,而定位是我们对网页元素进行位置固定的重点知识!

  • 内边距:边框和内容区之间的距离,通过 padding 属性设置

  • 内边距设置方法:
    padding-top:10px;
    padding-right:10px;
    padding-bttom:10px;
    padding-left:10px;

    • 简写:
      padding:上 右 左 下;
      padding:10px 20px 40px 30px;
  • 外边距:元素边框的外围空白区域是外边距,通过 margin 属性设置

  • 外边距设置方法:margin:;用法同上!

  • 一般来说,把各个元素的内边距和外边距

浮动

  • 因为 div 元素是块级元素,独占一行的。如何在一行显示多个 div 元素?显然默认的标准流已经无法满足需求,这就要用到浮动。
  • 浮动可以理解为让某个 div元素(或者其他块级元素)脱离标准流,漂浮在标准流之上。
  • 假设div2设置浮动,那么它将脱离标准流,但 div1、div3、div4 仍然在标
    准流当中,所以 div3 会自动向上移动,占据 div2 的位置,重新组成一个流。
  • 浮动的设置方法:
    float:left;
    float:right;
  • 让标准流中的元素不受到浮动的影响
    clear:both;
    none:默认值。允许两边都可以有浮动对象
    left:不允许左边有浮动对象
    right:不允许右边有浮动对象
    both:不允许有浮动对象
  • 如果连续多个元素设置浮动呢?
    结论:被设置浮动的元素会组成一个流,并且会横着紧挨着排队,直到父元素的
    宽度不够才会换一行排列。

相对定位与绝对定位

  1. 相对定位

    • 元素相对于原来的位置(也就是不加相对定位时,应该位于的位置)
    • 语法:
      div{
      position:relative;
      left:XXpx;
      right:XXpx;
      top:XXpx;
      bottom:XXpx;
      }
    • 为元素设置相对定位之后,元素依然会占据原来的空间,依然在标准流中!
    • 设置了left就不要设置right,设置了top就不要设置值bottom,这是矛盾的!
  2. 绝对定位

    • position:absolute;
      left:;
      right:;
      top:;
      bottom:;
    • 为元素设置绝对定位之后,元素不会占据原来的空间,脱离了原来的队伍
    • 为元素设置了左右之后,元素就会脱离水平方向的标准流,为元素设置了上下之后,元素就会脱离竖直方向的标准流;脱离之后,会根据父元素的位置来确定当前元素的位置。
  3. 固定定位

    • position:fixed;
      left:;
      right:;
      top:;
      bottom:;
    • 相对于浏览器的窗口进行定位,不会随着页面的滚动条而动!
  4. 重叠元素的堆叠顺序设置
    使用 z-index:;对设置了相对或绝对或固定定位的元素进行堆叠顺序的设置,设置的数值越
    大即堆叠在越上层,该属性可以是负值。

布局初探

  • 布局是我们书写整个网页的基本,就是把整个页面的框架先打好,例如我们现实生活中房子
    装潢的时候就有布局的概念,我们网页也是的,一个网页可以看成是由几个不同,这些组成部分我们可以使用 div 容器去存放他们(这也是 div 叫做容器的原因),布局有多种方式,这节课我们重点讲解下最常用的布局方式,固定浮动布局!

  • 固定浮动布局
    固定浮动布局即是用固定的值将元素的长度设置为固定不变, 然后配合浮动的技术实现整个页面的一个布局。
    网页的主要内容一般都是在我们浏览器的中间位置展示的, 固定浮动布局会将中间的内
    容整体长度使用固定的值定死, 因为是固定死的所以中间主要内容占用浏览器的长度空间是有讲究的,这个需要跟我们的用户的屏幕分辨率对应起来,不要超过大多数的人屏幕分辨率的长度。(一般设置为1000px)

  • 块级元素怎么相对于父元素居中?
    元素需要设置长度,元素左右的外边距设置为 auto 即可!

  • 元素都可以看成是一个盒子,这些盒子很多都有一个自己默认的内边距或者外
    边距,并且每个浏览器默认的距离还有可能不太一样,这样对于我们页面布局或者具体
    的细节的定位产生影响,那么我们应该怎么办?
    上下外边距为0,左右外边距自动居中。
    margin:0 auto;

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:CSS基本功课程,CSS家常