CSS – 样式查询表

字体

字体大小

font-size: (num) px 

 

字体族

font-family: "FontName","SecondFontName","ThirdFontName",sans-serif

可以写多个字体，当系统找到第一个字体时，则使用第一个字体，如果第一个字体找不到，则往第二个字体找，如果所有字体都找不到，默认使用系统默认字体

 

sans-serif 的作用：当所有字体都找不到时，要求在系统中找到一款【非衬线】的字体拿出来用。

说明：

1.使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。

2.如果字体名包含空格，必须使用引号包裹起来。

3.可以设置多个字体，按照从左到右的顺序诼个查找，找到就用，没有找到就使用后面的，目通常在
最后写上 serif(衬线字体)或sans-serif(非衬线字体)

4. windows系统中，默认的字体就是微软雅黑。

 

字体风格

字体风格指的是字体的一些显示风格，如字体倾斜的

font-style: normal | italic | oblique

normal : 没有风格

 

italic : 字体倾斜 (系统先找到字体内置的倾斜体，如果没有计算字体的倾斜效果)

oblique : 字体倾斜 (系统强制产生倾斜效果)

 

字体粗细

font-weight: normal | lighter | bold | bolder | (num) -> 100,400,600

normal = 400 : 正常粗细

 

lighter = 100 : 细

bold = 600 : 粗

bolder : 更粗（部分字体没有设计更粗的，将失效，效果为粗）

说明:

1. 100~1000且无单位，数值越大，字体越粗(或一样粗，具体得看字体设计时的精确程度)。

2. 100~300等同于lighter，400~500等同于normal，600及以上等同于bold。

 

字体复合属性

字体复合属性是指把所有字体的所有属性都归到一个属性中

font: font-weight font-style font-size(必须排在倒2) font-family(必须排在倒1)

说明：

 

1.字体大小、字体族必须都写上。

2.字体族必须是最后一位、字体大小必须是倒数第二位。

3.各个属性间用空格隔开。

 

文本

文本颜色

color: HEX | HEXA | HSL | HSLA | rgb() | rgba() | ColorType

HEX:
color : #FF0011 | #F01

HEXA:
color: #FF0011FF | #F01F

HSL:
color: hsl(120deg,100%,50%);

HSLA:
color: hsl(120deg,100%,50%,0.5);

rgb:
color: rgb(255,255,255);

rgba:
color: rgb(255,255,255,1);

 

 

文本间距

设置文字与文字之间的间隔距离。

latter-spacing: (num) px 

负值让间距变小

 

 

设置单词与单词之间的间隔距离

word-spacing: (num) px 

单词间距是以空格作为判断，负值让间距变小

 

 

文本修饰

上划线，下划线，删除线

text-decoration: none | overline | underline | line-through 线类型 颜色

overline : 添加上划线

underline : 添加下划线

line-through : 删除线

none : 没有线

线类型：dotted->虚线，wavy->波浪线

颜色：设置rgb颜色

 

文本缩进

对一段文本进行缩进，如文章的开头缩进2个字体

text-indent: (num) px | 

 

文本行高

line-height: normal | (num) px | Multiple | percen |

 

1. normal:由浏览器根据文字大小决定的一个默认值。

2. 像素(px)。

3. Multiple:参考自身font-size的倍数(很常用)。

4. 百分比:参考自身 font-size的百分比。

注意：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

举例：

div {
    line-height: 60px;
    line-height:1.5;
    line-height:150%;
}

 

行高注意事项：

1.line-height过小会怎样?--文字产生重叠，且最小值是日，不能为负数。

2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值。

3.line-height和height是什么关系?

设置了height，那么高度就是height的值。

不设置 height的时候，会根据line-height计算高度。

 

行高应用场景：

1.对于多行文字:控制行与行之间的距离。

2.对于单行文字:让height等于line-height，可以实现文字垂直居中。

由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

文本对齐

水平方向对齐

text-align: left | center | right

left:左对齐

center:居中对齐

right:右对齐

 

垂直方向对齐

在垂直方向对齐方面比较复杂，其中可以控制行内元素垂直方向对齐的可以通过以下方式实现

vertical-align

作用: 用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式

语法：

vertical-align: top | bottom | middle | baseline

top: 使行内元素在一行的上方对齐

 

bottom：使元素的底部与其所在行的底部对齐。

middle：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐

baseline：使行内元素基线对齐

注意：vertical-align 只能控制行内子元素，如div这类块级元素是不能被控制的。

 

列表

list-style-type

作用：设置列表符号

语法:

list-style-type: type

可使用属性：

 

none: 不显示前面的标识 (很常用! )
square:实心方块
disc : 圆形
decimal:数字
lower-roman : 小写罗马字
upper-roman : 大写罗马字
lower-alpha : 小写字母
upper-alpha : 大写字母

 

 

list-style-position

作用：设置符号的位置

语法：

list-style-position：type

可使用属性：

 

inside:在 li 的里面
outside: 在li的外边

 

list-style-image

作用：设置自定义符号图标

语法：

list-style-image：url(...)

 

list-style

作用：对【list-style-type】、【list-style-position】、【list-style-image】的复合属性

语法：

list-style：list-style-type list-style-position list-style-image

注意：list-style中的复合属性值不受顺序限制

 

表格

table-layout

作用：设置列宽度

属性值：

auto: 自动，列宽根据内容计算 (默认值)。
fixed : 固定列宽，平均分。

 

border-spacing

作用：单元格间距

举例：

设置单元格与单元机之间的间距
border-spacing：1px

注意：

CSS 中可用的长度值.

注意：生效的前提，单元格边框不能合并

 

border-collapse

作用：合并单元格边框

属性值：

collapse: 合并
separate: 不合并

 

 

empty-cells

作用：隐藏没有内容的单元格

属性值：

show: 显示，默认
hide: 隐藏

注意：生效前提，单元格不能合并

 

caption-side

作用：设置表格标题位置

属性值：

top: 上面 (默认值)
bottom: 在表格下面

 

背景

background-color

作用：设置元素背景颜色，默认为transparent透明色

举例：

background-color: #112233

注意：符合 css 中颜色规范的值

 

background-image

作用：设置元素背景图片

举例：

background-image: url(...)

 

 

background-repeat

作用：当元素设置了背景图片时，如果图片尺寸与元素大小不一致时，若图片尺寸比元素小时，该图片的铺叠方式

属性值：

repeat : 重复，铺满整个元素，默认值。
repeat-x:只在水平方向重复
repeat-y:只在垂直方向重复
no-repeat : 不重复。

 

background-position

作用：当元素设置了背景图片时，该图片作为背景图在元素中的位置。

属性值(通过关键字设置)：

水平: left、center 、 right
垂直: top 、 center 、bottom
如果只写一个值，另一个方向的值取 center

属性值（通过指定坐标位置）：

以元素左上角，为坐标原点，设置图片左上角的位置
两个值，分别是x坐标和y 坐标。
只写一个值，会被当做 x 坐标，y坐标取 center

 

background

作用：背景复合属性

举例：

background：#112233 url(...) no-repeat left center

注意：复合属性顺序不限制

 

鼠标

cursor

作用：设置鼠标移动到元素时的样式

属性值：

pointer :小手
move: 移动图标
text :文字选择器
crosshair:十字架
wait : 等待
help : 帮助

注意：其它内置鼠标样式可查看MDN文档

 

举例：

设置自定义图片的鼠标样式
cursor：url(...),pointer

 

 

长度单位

像素px

说明：像素是屏幕中每一个光点所表示的单位，1px就是屏幕上一个光点的长度

 

倍数em

说明：em是按照当前的 font-size 大小的倍数，若当前元素设置了 font-size 时，2em = 2 * font-size大小

注意：如果当前元素没有设置 font-size 时，会向父级元素寻找 font-size 的值，若父级依然没有 font-size 值时，会直接取得浏览器默认的 font-size 值大小，默认为16px

 

根倍数rem

说明：不按照当前元素及父元素的 font-size 大小，而是直接按照 html 所设置的 font-size 大小值。若html根标签没有 font-size 值时，会直接取得浏览器默认的 font-size 值大小，默认为16px

 

百份数%

说明：如果子元素中设置了百份比，则该子元素将按照父级元素的大小值为基准计算百份比值。

 

元素显示模式

注意:元素早期只分为:行内元素、块级元素，区分条件也只有一条:"是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。

 

块元素(block)

1.在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。

2. 默认宽度:撑满父元素。

3.默认高度:由内容撑开。

4.可以通过css设置宽高。

标签举例：

1.主体结构标签:<html>、<body>
2.排版标签:<h1>~<h6>、<hr>、<p>、<pre>、<div>
3.列表标签:<ul>、<ol>、<li>、<dl>、<dt>、<dd>
4.表格相关标签:<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>
5. <form>与<option>

示例：

display: block;

 

 

行内元素(inline)

1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。

2.默认宽度:由内容撑开。

3.默认高度:由内容撑开。

4.无法通过css设置宽高。

标签举例：

1.文本标签:<br>、<em>、<strong>、<sup><sub>、<del>、<ins>
2. <a>与<label>

示例：

display: inlone;

 

 

行内块元素(inline-block)

1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。

2.默认宽度:由内容撑开。

3.默认高度:由内容撑开。

4.可以通过css设置宽高。

标签举例：

1. 图片:<img>
2. 单元格:<td>、<th>
3.表单控件:<input>、<textarea>、 <select>、 <button>
4.框架标签:<iframe>

示例：

display: inline-block;

 

盒子模型

盒子内容区

css属性名              功能                       属性值
width           设置内容区域宽度                   长度
max-width   设置内容区域的最大宽度                 长度
min-width    设置内容区域的最小宽度                长度
height           设置内容区域的高度                长度
max-height    设置内容区域的最大高度               长度
min-height     设置内容区域的最小高度              长度

注意:

max-width、min-width 一般不与 width 一起使用。

max-height、min-height 一般不与height一起使用。

 

默认宽度

所谓的默认宽度，就是不设置width 属性时，元素所呈现出来的宽度。

总宽度=父的content-自身的左右margin。

内容区的宽度=父的content-自身的左右margin-自身的左右border -自身的左右 padding.

 

盒子内边距

css属性名              功能                                     属性值
padding-top         上内边距                                    长度
padding-right       右内边距                                    长度
padding-bottom      下内边距                                    长度
padding-left        左内边距                                    长度
padding            复合属性                                    长度，可以设置1~4个值

 

padding 复合属性的使用规则:

1. padding:10px;四个方向内边距都是10px。

2.padding:10px20px;上10px，左右20px。(上下、左右)

3. padding: 10px20px30px;上10px，左右20px，下30px，(上、左右、下)

4. padding: 10px 20px 30px40px;上10px，右20px，下30px，左40px。(上、右、下、左)

注意：

1. padding 的值不能为负数。

2.行内元素的左右内边距是没问题的，上下内边距不能完美的设置。

3.块级元素、行内块元素，四个方向内边距都可以完美设置。

 

盒子边框

CSS 属性名	功能	属性值
border-style	边框线风格 复合了四个方向的边框风格	none ： 默认值solid ： 实线dashed ： 虚线dotted ： 点线double ： 双实线 ......
border-width	边框线宽度 复合了四个方向的边框宽度	长度，默认 3px
border-color	边框线颜色 复合了四个方向的边框颜色	颜色，默认黑色
border	复合属性	值没有顺序和数量要求。
border-left border-left-style border-left-width border-left-color   border-right border-right-style border-right-width border-right-color   border-top border-top-style border-top-width border-top-color   border-bottom border-bottom-style border-bottom-width border-bottom-color	分别设置各个方向的边框	同上

注意：

边框相关属性共 20 个。

border-style 、 border-width 、 border-color 其实也是复合属性。

 

盒子外边距

CSS 属性名	功能	属性值
margin-left	左外边距	CSS 中的长度值
margin-right	右外边距	CSS 中的长度值
margin-top	上外边距	CSS 中的长度值
margin-bottom	下外边距	CSS 中的长度值
margin	复合属性，可以写 1~4 个值，规律同 padding （顺时针）	CSS 中的长度值

 

注意：

1. 子元素的margin ，是参考父元素的content 计算的。（因为是父亲的content 中承装着
子元素）

2. 上margin 、左margin ：影响自己的位置；下margin 、右margin ：影响后面兄弟元素
的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的margin ；但行内元素，左右
margin 可以完美设置，上下margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个块级元素设置左右margin 都为 auto ，该块级
元素会在父元素中水平居中。

5. margin 的值可以是负值。

 

margin塌陷问题

什么是 margin 塌陷？

第一个子元素的上 margin-top 会作用在父元素上，最后一个子元素的下 margin-bottom 会作用在父元素上。

如何解决 margin 塌陷？

方案一： 给父元素设置不为 0 的padding 。

方案二： 给父元素设置宽度不为 0 的border 。

方案三：给父元素设置 css 样式 overflow:hidden

 

margin合并问题

什么是 margin 合并？

上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。

如何解决 margin 塌陷？

无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

 

内容溢出

CSS 属性名	功能	属性值
overflow	溢出内容的处理方式	visible ：显示，默认值 hidden ：隐藏 scroll ：显示滚动条，不论内容是否溢出auto ：自动显示滚动条，内容不溢出不显示
overflow-x	水平方向溢出内容的处理方式	同 overflow
overflow-y	垂直方向溢出内容给的处理方式	同 overflow

注意：

1. overflow-x 、 overflow-y 不能一个是hidden ，一个是visible ，是实验性属性，不
建议使用。

2. overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多
疑难杂症。

 

元素隐藏

visibility

visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。元素看不见了，还占有原来的位置（元素的大小依然保持）。

 

display

设置 display:none ，就可以让元素隐藏。

彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

 

样式继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式;但如果本身没有设置某个样式，会从父元素开始一级一级继承(优先继承离得近的祖先元素)。

会继承的css属性

字体属性、文本属性(除了vertical-align)、文字颜色等。

 

不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式 等。

 

一个规律:能继承的属性，都是不影响布局的，简单说:都是和盒子模型没关系的。

 

元素留出空白问题

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

1. 方案一： 去掉换行和空格（不推荐）。
2. 方案二： 给父元素设置 font-size 设置为 0,子元素单独设置 font-size(推荐)。
3. 方案三：让行内元素浮动起来。
4. 方案四：父元素开启 flex 或 grid 布局。

 

行内块的幽灵空白问题

产生原因：

行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。

解决方案：

1. 方案一： 给行行内块设置vertical ，值不为 baseline 即可，设置为 middel 、bottom 、top 均可。
2. 方案二： 若父元素中只有一张图片，设置图片为 display:block 。
3. 方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置fontsize。

 

 

浮动

1. 🤢脱离文档流。

2. 😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。

3. 😊不会独占一行，可以与其他元素共用一行。

4. 😊不会margin 合并，也不会margin 塌陷，能够完美的设置四个方向的margin 和padding 。

5. 😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

 

清除浮动

元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

 

清除浮动说明：

1.浮动的初衷是为了让文字包围div的布局，所以当div被浮动的元素遮挡时，文字会自动被甩到未被遮挡的位置中。

2.CSS 中提供了一种可以清除因浮动元素而影响到父级元素没有内容而发生塌陷的问题，其本质是在父元素中，在最后添加一个不浮动的块级子元素，然后让该子元素实现以下样式,以清除之前的子元素浮动带来的父级元素塌陷的问题。

/* 清除因左浮动的元素带来的空间塌陷的问题 */
clear: left

/* 清除因右浮动的元素带来的空间塌陷的问题 */
clear: right

/* 清除因左浮动或右浮动的元素带来的空间塌陷的问题 */
clear: both

3.因此，我们可以在所在浮动子元素后面自定义一个无宽高，无内容的块级子元素，让该块级子元素清除之前子元素浮动带来的问题。

4.为什么要使用块级子元素？因为如果用于清除浮动的子元素是一个行内元素，则它不会独立占用一行空间，且行内元素不能设置宽高，此时行内元素只会跟在浮动元素的后面，而不能产生足够的占位或占用一行空间来实现清除浮动的功能。

 

解决方案：

1. 方案一： 给父元素指定高度。

2. 方案二： 给父元素也设置浮动，带来其他影响。

3. 方案三： 给父元素设置 overflow:hidden 。

4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。

5. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

/* 在父元素的最后，使用 ::after 伪元素作为清除浮动的元素，
但是 ::after 默认是行内元素，所以需要设置为块级元素 */
.parent::after {
    /* 设置内容为空（伪元素默认规定的，不然设置伪元素干嘛） */
    content: "";
    /* 伪元素默认为行内元素，所以要设定为块级元素 */
    display: block;
    /* 利用伪元素作为设置清除浮动的子元素 */
    clear:both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

 

定位

相对定位 relative

慨念：相对定位，是指相对元素本身的原位置进行移动定位，相对定位会占用原来的位置，因此即使元素已经被移动定位了，但实际上它的元素还排列在原来的位置上，不会因为位置的移动而使后而的元素抢占。

 

设置相对定位

1.给元素设置 position:relative 即可实现相对定位。

2.可以使用 left 、right 、top 、bottom 四个属性调整位置。

 

相对定位的特点

1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。

2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：

• 定位的元素会盖在普通元素之上,设置了相对定位的元素在层级上会比没有设置相对定位的元素层级更高。
• 都发生定位的两个元素，后写的元素会盖在先写的元素之上。

3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。

4. 相对定位的元素，也能继续浮动，但不推荐这样做。

5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

 

绝对定位

慨念：

1.绝对定位会查找是否有开启定位（不管相对还是绝对）的祖先元素，并以开启了定位的祖先元素作为定位原点。

如果父级元素开启了定位，那么该子元素将以该父级作为定位原点，如果父级没有开启定位，则会再往上级元素查找，如果所有父级元素都没有开启定位，直到根级元素则以根极元素作为定位原点。

2.绝对定位的原理是直接把元素脱离文档流，浮动在文档流上方（和浮动类似），所以它不会占用文档流中的位置。

3.绝对定位与浮动类似，但与浮动不同的是，浮动会把文字内容甩出遮挡区，而绝对定位会直接把所有内容都遮挡住。

4.设置绝对定位后的元素，不再是【块】【行】【行内块】元素，而是变成了【定位元素】，定位元素可以设置宽高，也会自动由内容撑大。

 

设置绝对定位？

• 给元素设置 position: absolute 即可实现绝对定位。
• 可以使用 left 、right 、top 、bottom 四个属性调整位置。

 

注意：

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。

2. left 不能和right 一起设置， top 和bottom 不能一起设置。

3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。

4. 绝对定位的元素，也能通过margin 调整位置，但不推荐这样做。

5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

 

子绝父相的慨念

子绝父相是指，相对定位与绝对定位相互配合使用的一种常见的布局方法。

为什么子元素是绝对定位？

• 绝对定位的属性就是，以开启了任意方式定位的父元素作为定位源，当父级元素开启了定位属性时，子元素就可以以父元素所在的位置上任意浮动
• 子元素使用绝对定位，因为是直接浮动在文档流上方，所以不会影响到父元素其下的其它子元素的位置变化，可以做到任意位置布局。

 

为什么父元素是相对定位？

• 按照子元素使用相对定位的规定而言，父元素是可以也设定绝对定位的，这样子元素也会以父元素作为源点，但是绝对定位是属于浮动类的，如果父元素使用绝对定位的话，就无法占用文档流，其它元素就会顶上来。
• 父元素使用相对定位的话，它依然占用文档流，且即使父元素的定位发生改变时，它的占位依然不会发生改变，但是如果父元素使用绝对定位的话，首先父元素会查找是否开启了定位的祖元素（多数时候都没有开启），如果没找到就会以文档流作为源点。而作为父元素，应当占有文档流位置，而相对定位就适合占有文档流位置的定位。

 

子绝父相带来的效果？

• 父元素使用相对定位但不偏移时，父元素会占用文档流（类似于解决了清除浮动的问题），且父元素位置固定
• 子元素使用绝对定位，当子元素发生偏移时，因为绝对定位会发生浮动，所以不会对父元素的其它子元素位置产生影响，只会发生遮挡。

 

固定定位

固定定位与绝对定位相似，设置固定定位后，元素会浮动在文档流上方，但与绝对定位不同的是，固定定位是以视口作为源位置，不会查找带有定位属性的父级元素做源位置。因此固定定位时，页面的滚动不会使固定定位元素发生位移。

设置为固定定位？

• 给元素设置 position: fixed 即可实现固定定位。
• 可以使用 left 、right 、top 、bottom 四个属性调整位置。

 

注意：

1. 脱离文档流，会对后面的兄弟元素、父元素有影响。

2. left 不能和right 一起设置， top 和bottom 不能一起设置。

3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。

4. 固定定位的元素，也能通过margin 调整位置，但不推荐这样做。

5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

 

粘性定位

粘性定位是一个新的定位方式，它的定位样式和【通讯录】中的表头滚动固定类似。

 

设置为粘性定位？

• 给元素设置 position:sticky 即可实现粘性定位。
• 可以使用 left 、right 、top 、bottom 四个属性调整位置，不过最常用的是top 值。

 

示例：

.div{
    /* 开启粘性定位 */
    position:sticky;

    /* 需要设定元素在到达那个位置时产生粘性 */
   top:0px;
}

 

注意：

• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
• 粘性定位的源位置是离它最近的一个拥有“滚动机制”的祖先元素，如果它的父级元素开启了 overflow:scroll 时，那么粘性定位元素就以其父级元素作为源定位，否则，会以<body>为源定位，因为 <body> 本身就开启了“滚动机制”
• 最常用的值是top 值。
• 粘性定位和浮动可以同时设置，但不推荐这样做。
• 粘性定位的元素，也能通过margin 调整位置，但不推荐这样做。

 

 

定位层级 z-index

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。

3. 可以通过 css 属性 z-index 调整元素的显示层级。

4. z-index 的属性值是数字，没有单位，值越大显示层级越高。

5. 只有定位的元素设置 z-index 才有效。

6. 如果z-index 值大的元素，依然没有覆盖掉z-index 值小的元素，那么请检查其包含块的层级。

 

定位的特殊应用

 

让定位元素的宽充满包含块

1. 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为0 。

2. 高度想与包含块一致， top 和 bottom 设置为 0 。

 

让定位元素在包含块中居中

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

注意：该定位的元素必须设置宽高！！！

 

CSS类名推荐

位置
顶部导航条	topbar
页头	header 、 page-header
导航	nav 、 navigator 、 navbar
搜索框	search 、 search-box
横幅、广告、宣传图	banner
主要内容	content 、 main
侧边栏	aside 、 sidebar
页脚	footer 、 page-footer

 

重置默认样式

很多元素都有默认样式，比如：

1. p 元素有默认的上下margin 。

2. h1~h6 标题也有上下margin ，且字体加粗。

3. body 元素有默认的8px 外边距。

4. 超链接有默认的文字颜色和下划线。

5. ul 元素有默认的左pading 。

等等

 

使用全局选择器（不推荐）

* {
    margin: 0;
    padding: 0;
    ......
}

 

reset.css

选择到具有默认样式的元素，清空其默认的样式。

/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    /* 底部留白 */
    display: block;
	border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    font-size: 100%;
    font-weight: normal;
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    outline: none;
    border:none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #666;
}

a:hover {
    color:#DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

 

Normalize.css

Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。

官网地址： http://necolas.github.io/normalize.css/