css基础知识

本文主要内容

• CSS的单位

• 字体属性

• 文本属性

• 定位属性

css有单位

在学习html的时候，我们发现html的单位只有一种，就是像素px，通常可以省略。但是CSS不一样，CSS的单位必须要写，而且是不能省略。

绝对单位

1 in=2.54cm=25.4mm=72pt=6pc。

各种单位的含义：

• in：英寸Inches (1 英寸 = 2.54 厘米)

• cm：厘米Centimeters

• mm：毫米Millimeters

• pt：点Points，或者叫英镑 (1点 = 1/72英寸)

• pc：皮卡Picas (1 皮卡 = 12 点)

相对单位

px：像素

em：印刷单位相当于12个点

%：百分比，相对周围的文字的大小

像素px是一个相对单位的，也是最常用的。比如说，笔记本电脑的尺寸通常是15.6寸，但是我们可以设置不同的分辨率，在不同的分辨率下，单个像素的长度是不一样的。

font 字体属性

CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。

这一段，我们先来讲一下字体属性。

css样式中，常见的字体属性有以下几种：

p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体*/
	font-variant: small-caps;  /*小写变大写*/
}

css种，所有的行，都有行高，div的内边距padding，不是作用在文字上面的，而是作用在行上面。

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

代码举例：

vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

字体大小、行高、字体样式三大属性

例   字体大小：font-size：10px；

行高：line-height:10px;

字体样式：font-family：“宋体”；

另外还有 字体加粗  font-weight:10;

    font-weight: normal; /*正常*/
    font-weight: bold;  /*加粗*/

ps：

1.具体字体显示要根据用户的系统电脑里面有没有这个字体。

为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。

font-family: "微软雅黑","宋体";

上面代码的意思是如果用户电脑没有安装微软雅黑字体，那么页面上显示的就是宋体。

2.

我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

    font-family: "Times New Roman","微软雅黑","宋体";

上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于smyhvae哈哈哈这段文字，smyhvae会采用Times New Roman字体，而哈哈哈会采用微软雅黑字体。

文本属性

CSS样式中，常见的文本属性有以下几种：

• letter-spacing: 0.5cm ; 单个字母之间的间距

• word-spacing: 1cm; 单词之间的间距

• text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线

• text-transform: lowercase; 单词字体大小写。uppercase大写、lowercase小写

• color:red; 字体颜色

• text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify

• text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）

列表属性

ul li{
    list-style-image:url(images/2.gif) ;  /*列表项前设置为图片*/
    margin-left:80px;  /*公有属性*/
}

另外还有一个简写属性叫做list-style，它的作用是：将上面的多个属性写在一个声明中。

overflow属性：超出范围的内容要怎么处理

overflow属性的属性值可以是：

比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：

• visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。

• hidden：不显示超过对象尺寸的内容。

• auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。

• scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

• 鼠标的属性 cursor

  鼠标的属性cursor有以下几个属性值：

• auto：默认值。浏览器根据当前情况自动确定鼠标光标类型。

• pointer：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

• hand：和pointer的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

定位

标准流(文档流/普通流)排版方式

标准流(文档流/普通流) ​ -标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流(文档流/普通流)中。 ​ -元素在标准流(文档流/普通流)中的特点 ​ 块元素 ​ 1.块元素在标准流(文档流/普通流)中会独占一行，块元素会自上向下排列。 ​ 2.块元素在标准流(文档流/普通流)中默认宽度是父元素的100% ​ 3.块元素在标准流(文档流/普通流)中的高度默认被内容撑开 ​ 内联元素 ​ 1.内联元素在标准流(文档流/普通流)中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。 ​ 2.在标准流(文档流/普通流)中，内联元素的宽度和高度默认都被内容撑开

1.其实浏览器默认的排版方式就是标准流的排版方式 ​ 2.在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素 ​ 3.在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版 ​ 垂直排版, 如果元素是块级元素, 那么就会垂直排版 ​ 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版 4.如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流) ​ 可选值： ​ none，默认值，元素默认在标准流(文档流/普通流)中排列 ​ left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动 ​ right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离标准流(文档流/普通 流)，元素脱离标准流(文档流/普通流)以后，它下边的元素会立即向上移动，那么这个时候前面一个 元素就会盖住后面一个元素。 ​ 元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素 ​ 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。 ​ 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐

浮动流排版方式

1.浮动流是一种"半脱离标准流"的排版方式 ​ 2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

- 浮动元素字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

 注意点:
        1.浮动流中没有居中对齐, 也就是没有center这个取值
        2.在浮动流中是不可以使用margin: 0 auto;

特点: ​ 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的 ​ 无论是块级元素/行内元素/行内块级元素都可以水平排版 ​ 2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高 ​ 3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像。

定位流分类

1.1.静态定位

1.2.相对定位

1.3.绝对定位

1.4.固定定位

1.5.粘滞定位

1.6.z-index

。

1.1.静态定位（ Static positioning）

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

position: static;

- 1.2.什么是相对定位?（ Relative positioning ）

相对定位就是相对于自己以前在标准流中的位置来移动 ​ position: relative; ​ 使用top,right,bottom,left来控制

- 相对定位注意点

• 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

• 在相对定位中同一个方向上的定位属性只能使用一个

• 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

• 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

• 用于对元素进行微调

• 配合绝对定位来使用

什么是绝对定位?（Absolute positioning）

绝对定位就是相对于body来定位 ​ position: absolute;

绝对定位参考点

1.规律 ​ 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。 ​ 2.1只要是这个绝对定位元素的祖先元素都可以 ​ 2.2指的定位流是指绝对定位/相对定位/固定定位 ​ 2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

绝对定位注意点

1.绝对定位的元素是脱离标准流的 ​ 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素 ​ 3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点 ​ 4.一个绝对定位的元素会忽略祖先元素的padding

绝对定位-子绝父相

相对定位弊端: ​ 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面 ​ 绝对定位弊端: ​ 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化 ​ 子绝父相 ​ 子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; ​ 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

固定定位（Fixed positioning）

1.什么是固定定位? ​ position: fixed; ​ 固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定 定位可以让某个盒子不随着滚动条的滚动而滚动。

注意点: ​ 1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间 2.固定定位和绝对定位一样不区分行内/块级/行内块级

粘滞定位（ Sticky positioning ）

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上

移动（此时相当于fixed定位）。

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

z-index

1.什么是z-index属性? ​ 默认情况下所有的元素都有一个默认的z-index属性, 取值是0. ​ z-index属性的作用是专门用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素 ​ 3.默认情况下定位流的元素后面编写的会盖住前面编写的 ​ 4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面 ​ 注意点: ​ 1.从父现象 ​ 1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上 面。 ​ 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说 谁的父元素的z-index属性比较大谁就会显示在上面。