前端学习之CSS

目录

• 一. CSS引入方式
• 二. CSS选择器
• 三. CSS继承性和层叠性
• 四. 盒模型
• 五. 清除默认样式
• 六. 标准文档流
• 七. 浮动
• 八. 清除浮动
• 九. margin中的坑
• 十. 字体图标的使用
• 十一. 文本属性和字体属性(经常使用的)
• 十二. background
• 十三. 定位

一. CSS引入方式

如今的互联网前端分为三层:

• HTML: 超文本标记语言. 从语义的角度描述页面结构.

• CSS: 层叠样式表. 从审美的角度负责页面样式.

• JS: JavaScript. 从交互的角度描述页面行为.

1. CSS优势:

• 使数据和显示分开
• 下降网络流量
• 使整个网站视觉效果一致
• 使开发效率提升了(耦合性下降, 一我的负责写html,一我的负责写CSS)

好比说,有一个样式须要在100个页面上显示,若是是html来实现,那要写100遍,如今有了CSS,只要写一遍. 如今,html只提供数据和一些控件,至于其余的各类各样的样式则彻底由CSS来提供.

2. CSS引入方式:

(1)行内样式

在元素(标签)内部直接写属性(颜色,大小等样式)

<p style="color: green">我是一个段落</p>

(2)内接样式

​ 在head标签中,在style标签的内部写入CSS

<style type="text/CSS">
        /*如下是CSS代码*/
        span{
               color: yellow;
        }
</style>

(3)外接样式

• 链入式

在head标签中用link标签链入CSS

<link rel="stylesheet" href="./index.CSS">

• 导入式

在style标签内部使用 @import url("#"); 导入CSS

<style type="text/CSS">
        @import url('./index.CSS');
</style>

二. CSS选择器

1. 基本选择器

• (1)标签选择器

标签选择器能够直接选中全部的标签元素, 好比div, ul, li, p等等, 无论标签藏得多深, 都能选中, 选中的是全部的标签, 而不是某一个, 因此说选择的是"共性"而不是"特性".

用法:

标签名:{color: red;}

• (2)id选择器

经过#加id名来选中某个元素. 同一个页面中的id毫不可能重复, 任何标签均可以设置id. id的命名规范, 大小写都是严格区分的, 如aa和AA就是两个彻底不一样的属性值.

用法:

#id名{color: red;}

• (3)类选择器

所谓类就是指class, class与id很是类似, 任何的标签均可以添加类, 可是类是能够重复的, 属于归类的概念. 同一个标签中能够携带多个类, 用空格隔开.类选择器经过.加类名来选中某个元素.

用法:

.类名{color: red;}

• 总结:
  • a. 不要试图用一个类将咱们的页面写完. 这个标签要携带多个类, 共同设置样式
  • b. 每一个类要尽量的小, 要有公共的概念, 可以让更多的标签使用
  • c. 尽可能用class, 除非特殊的状况能够用id, 由于id通常是用在js中的, 即js是经过id来获取到元素的

2. 高级选择器

• (1)后代选择器

使用空格表示后代选择器. 后代选择器, 顾名思义, 即父元素的后代(包括儿子, 孙子, 重孙子).

用法:

.container p{color: red;}

• (2)子代选择器

使用>表示子代选择器, 好比div>p, 仅仅表示的是当前div元素选中的(相邻)子元素p(即:不包括孙子).

用法:

.container>p{color: red;}

• (3)并集选择器

多个选择器之间使用逗号,隔开, 表示选中页面中的多个标签, 一些共性的元素, 可使用并集选择器.

用法:

h3,content{color: red;}

• (4)交集选择器

使用.表示交集选择器. 同时用两种选择器选择一个标签元素, 例如div.active表示选中的是active和div都拥有的元素

3. 属性选择器

属性选择器, 字面的意思就是根据标签中的属性, 选中当前的标签.

用法:

[for]{color: red;}

input[type='text']{background: red;}

4. 伪类选择器

伪类选择器通常用在超连接<a>标签中,使用<a>标签的伪类选择器, 咱们必定要遵循爱恨准则----LoVe HAte.

用法:

a:link{color: #666;}                /*没有被访问过的a标签样式*/
a:visited{color: yellow;}           /*访问事后的a标签样式*/
a:hover{color: green;}              /*鼠标悬停时a标签的样式*/
a:active{color: #yellowgreen;}      /*鼠标按下时a标签的样式*/

注意: link, visited, active这三个只有a标签有, 而horver其余元素也能够用.

5. 伪元素选择器

• (1)设置第一个首字母的样式:

p:first-letter:{color:red; font-size:30;}

• (2)在...以前添加内容:

p:before{content: 'alex';}

这个属性使用很少, 了解便可, 使用此伪元素选择器必定要结合content属性.

• (3)在...以后添加内容:

p:after{content: '&'; color: red; font-size: 40px;}

这个属性使用很是频繁, 一般与布局有很大的关联(清除浮动).

三. CSS继承性和层叠性

CSS有两大特性: 继承性和层叠性

1. 继承性

面向对象语言都会存在继承的概念, 在面向对象语言中, 继承的特色是: 派生类继承父类的属性和方法.

CSS中的继承: 给父级设置一些属性, 子元素继承了父级该属性.

• 注意:
  • 有一些属性是能够继承下来: color, font-*, text-*, line-*, 它们主要是一些文本级的标签元素;
  • 可是像一些盒子元素属性, 定位的元素(浮动, 绝对定位, 固定定位)不能继承.

2. 层叠性和权重问题

CSS中的层叠性: 权重大的标签覆盖掉了权重小的标签.

权重: 谁的权重大,浏览器就会显示谁的属性.

• 总结:
  • a. 先看标签元素有没有被选中, 若是选中了, 就计算元素(id, class, 标签数量)的权重. 谁的权重大, 就显示谁的属性, 权重同样大, 后来者居上.
  • b. 若是没有被选中的标签元素, 权重为0.
  • c. 若是属性都是被继承下来的, 权重都是0. 若是权重都是0, 则遵循"就近原则"(谁描述的近, 就显示谁的属性)

3. !important 的使用

!important: 设置权重为无限大(IE不支持)

!important: 不影响继承来的权重, 只影响选中的元素. 不要随便使用!important,由于使用它会影响页面布局.

用法:

选择器(样式: 值!important;)

四. 盒模型

在CSS中, "box model"这一术语是用来设计和布局时使用的, 在网页中基本上都会显示一些方方正正的盒子. 咱们称这种盒子叫盒模型.

盒模型有两种: 标准模型和IE模型. 咱们重点学习标准模型.

1.盒模型示意图:

2. 盒模型的属性

• width: 内容的宽度
• height: 内容的高度
• padding: 内边距,边框到内容的距离
• border: 边框,盒子的宽度
• margin: 外边距,盒子边框到附近最近盒子的距离

3. 盒模型的计算

若是一个盒子设置了width, height, padding, border (先不设置margin, margin有坑),那么:

盒子的真实宽度 = width + 2*padding + 2*border

盒子的真实高度 = height + 2*padding + 2*border

4. padding(内边距)

padding解释内边距的意思, 它是边框到内容之间的距离. 另外, padding的区域是有背景颜色的, 而且背景颜色和内容的颜色同样, 也就是说background-color这个属性将填充满全部的border之内的区域.

padding有四个方向, 分别描述四个方向的padding.

• (1)写单独属性, 分别设置不一样方向的padding, 以下:

padding-top: 30px;

padding-right: 30px;

padding-bottom: 30px;

padding-left: 30px;

• (2)写综合属性, 用空格隔开, 以下:

/*上 右 下 左*/
padding: 20px 30px 40px 50px;

/*上 左右 下*/
padding: 20px 30px 40px;

/*上下 左右*/
padding: 20px 30px;

/*上下左右*/
padding: 20px;

5. border(边框)

border: 边框的意思, 描述盒子的边框. 边框有三要素: 粗细, 线性样式, 颜色.

若是颜色不写, 默认是黑色.

若是粗细不写, 默认不显示边框.

若是只写线性样式, 默认的有: 上下左右3px的宽度, 实体样式, 黑色边框.如:

border: solid;

分别设置三要素, 以下:

border-width: 3px;

border-style: solid;    /*还有dotted、double、dashed*/

border-color: red;

注意: 值能够是1个, 2个, 3个, 4个, 对应关系跟上面介绍的padding综合属性是同样的.

设置一个方向的三要素, 以下:

border-top-width: 10px;
border-top-style: solid;
border-top-color: red;

上面三行代码至关于下面这一行:

border-top: 10px solid red;

注意: border: none或者border: 0都表示没有设置样式.

应用: 使用border来制做小三角

/*小三角 箭头指向上方*/
div{
    width: 0;
    height: 0;
    border-bottom: 20px solid red;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

6. margin(外边距)

margin: 外边距的意思, 表示边框到最近盒子的距离. margin也有四个方向, 而且也能够设置1, 2, 3, 4个值.

/*表示四个方向的外边距离为20px*/
margin: 20px;

/*表示盒子向下移动了30px*/
margin-top: 30px;

/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;

五. 清除默认样式

有一些标签会默认自带样式, 好比<ul>标签默认有padding-left值, 有些默认有margin值, <ul>,<ol>和<a>标签也自带一些样式, 可是咱们通常在作网页的时候不想用那些默认的样式, 因此须要清除页面标签中默认的样式, 以便咱们更好的去调整元素的位置.

虽然通配符选择器*能够解决问题, 可是这种方法效率不高, 不推荐. 咱们要使用并集选择器来选中页面中应有的标签, 以下代码就是清除默认样式的一种写法, reset.css:

参考网址: https://meyerweb.com/eric/tools/css/reset/

参考代码:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

六. 标准文档流

宏观的讲, 咱们的web页面和ps等设计软件有本质的区别, web网页的制做, 是个"流", 从上而下, 像"织毛衣". 而设计软件, 想往哪里画东西, 就去哪里画.

标准文档流下, 有一些现象, 好比: 空间折叠现象, 高矮不齐底边对齐现象等.

标准文档流等级森严, 标签分为两种等级: 行内元素和块级元素.

1. 行内元素和块级元素的区别

• 行内元素:
  • a. 与其余元素并排
  • b. 不能设置宽和高, 默认的宽度就是文字的宽度
• 块级元素:
  • a. 独占一行, 不能与其余的任何元素并列
  • b. 能进行宽和高的设置. 若是不设置宽度, 那么宽度将默认变为父级的100%

2. 标签的分类

在之前的HTML学习中, 咱们已经将标签分过类了, 当时分为: 文本级和容器级.

• a. 从HTML的角度来说, 标签分为:
  • 文本级标签: <p>, <span>, <a>, <b>, <i>, <u>, <em>
  • 容器级标签: <div>, <h1>~<h6>, <li>, <dt>, <dd>

PS: 为何说<p>是文本级标签呢? 由于<p>里面只能放"文字","图片"和"表单"元素, <p>里面不能放<h1>~<h6>和<ul>, <p>里面也不能放<p>.

• b. 从CSS的角度来说, CSS的分类和HTML很相像, 可是就<p>不同:
  • 行内元素: 除了<p>以外, 全部的文本级标签, 都是行内元素. 而<p>虽是个文本级标签, 但它倒是个块级元素
  • 块级元素: 全部的容器级标签都是块级元素, <p>标签也是块级元素.

3. 块级元素和行内元素的相互转换

咱们能够经过display属性将块级元素和行内元素进行相互之间的转换.display即"显示模式".

• a. 块级元素转换为行内元素, 经过设置: display: inline;
• b. 行内元素转换为块级元素, 经过设置: display: block;

4. 脱离标准文档流

标准文档流里面的如今很是多, 致使不少页面效果没法实现, 若是咱们如今就要设置并排和宽高, 那该怎么办呢? 办法就是: 移民! 即脱离标准文档流.

• CSS中一共有三种手段来使一个元素脱离标准文档流:
  • 浮动
  • 绝对定位
  • 固定定位

七. 浮动

浮动是CSS里面布局最多的一种属性, 也是很重要的一个属性. float表示浮动的意思, 它有以下属性值:

• none: 表示不浮动, 默认
• left: 表示左浮动
• right: 表示右浮动

想要学好浮动, 必定要知道它的四大特性:

• a. 浮动的元素是脱标(脱离标准文档流)的, 标签一旦设置浮动, 就可以并排, 而且再也不区分行内元素,块级元素, 也就可以设置宽高了

• b. 浮动的元素互相贴靠
• c. 浮动的元素有"字围"效果

• d. 浮动的元素有收缩的效果, 即: 一个浮动元素, 若是没有设置width, 那么就会自动收缩为文字的宽度

注意: 关于浮动, 咱们要遵循一个原则: 永远不要设置一个盒子单独浮动.要浮动就一块儿浮动; 有浮动就必定要清除浮动.

八. 清除浮动

1. 浮动带来的不良影响

首先来观察以下HTML和CSS代码:

• HTML代码:

<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
<div class="father2"></div>

• CSS代码:

.father{
    width: 1126px;
}
.box1{
    width: 200px;
    height: 500px;
    float: left;
    background-color: red;
}
.box2{
    width: 300px;
    height: 200px;
    float: left;
    background-color: green;
}
.box3{
    width: 400px;
    height: 100px;
    float: left;
    background-color: blue;
}
.father2{
    width: 1126px;
    height: 600px;
    background-color: purple;
}

从执行效果中发现: 若是不给父盒子设置一个高度, 那么浮动子元素是不会填充父盒子的高度的, 此时.father2的盒子就会跑到第一个位置上, 影响页面布局.

浮动元素的确能实现页面元素的并排效果, 这既是它的优势也是它的缺点. 因为它同时也会形成页面布局的极大混乱, 因此咱们要清除浮动.

2. 清除浮动的四种方法

清除浮动的方法有不少种, 在这里只介绍四种:

• a. 给父盒子设置高度
• b. 内墙法: 给浮动元素的后面加一个空的块级标签, 再给该标签设置clear:both属性
• c. 伪元素清除法(经常使用)
• d. overflow:hidden(经常使用)

3. 伪元素清除浮动

为元素清除浮动的写法以下:

给浮动元素的父盒子, 也就是不浮动的元素, 添加一个clearfix类, 而后做以下设置:

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

4. 关于overflow

overflow属性规定当前内容溢出元素框时发生的事件.

值	描述
visible	默认值, 内容不会被修剪, 会呈如今元素框以外
hidden	内容会被修剪, 超出元素框以外的部分不可见
scroll	无论内容是否超出元素框都出现滚动条
auto	若是内容超出元素框, 则浏览器会显示滚动条以便查看其他内容
inherit	规定继承父元素的overflow属性的值

这些事件逐渐演变成overflow:hidden清除法, 其实它是一个BFC区域, 具体参见: http://www.javashuo.com/article/p-ezyacvwn-v.html

九. margin中的坑

1. margin塌陷问题

当给两个标准文档流下的兄弟盒子设置垂直方向上的margin时, 那么以较大的为准, 咱们称这种现象为塌陷. 记住这种现象, 在布局垂直方向盒子的时候要注意margin的用法. 水平方向上没有塌陷现象.

当咱们给标准文档流下的兄弟盒子设置浮动以后, 就不会出现margin塌陷的问题.

2. margin: 0 auto;

当一个<div>元素设置margin: 0 auto;时就会使盒子居中. 咱们知道margin: 0 auto;表示上下外边距距离为0, 左右为auto的距离, 那么auto是什么意思呢? 若设置margin: 0 auto;, 咱们发现盒子尽量大的左右两边有很大的距离, 由于此时的盒子是居中的.

• 注意:
  • a. 使用margin: 0 auto;时, 水平居中盒子必须有width, 要有明确的width值
  • b. 若是给盒子设置"浮动"或"固定定位"或"绝对定位",那么margin: 0 auto;失效
  • c. margin: 0 auto;使盒子居中,而不是使文本居中, 文字水平居中可使用text-align: center

3. margin和padding的区别

margin属性描述的是兄弟盒子的关系, 而padding属性描述的是父子盒子的关系.

先看以下两段代码:

• CSS代码:

.father{
    width: 300px;
    height: 300px;
    background-color: blue;
}
.son{
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-top: 30px;
}

• HTML代码:

<div class="father">
    <div class="son"></div>
</div>

运行上面代码, 发现两个盒子总体下移了30px, 其实咱们只是想让子盒子下移30px, 父盒子不要动,可是父盒子由于没有设置border, 因此父盒子也掉下来了, 一旦给父盒子设置一个border就行了, 那么问题来了, 咱们不可能在页面中平白无故的去给盒子加一个border, 因此此时的解决办法只有一个, 就是使用父盒子的padding, 让子盒子向下走.

• 修改后的CSS代码:

.father{
    width: 300px;
    height: 270px;
    background-color: blue;
    padding: 30px
}
.son{
    width: 100px;
    height: 100px;
    background-color: orange;
}

十. 字体图标的使用

阿里巴巴矢量图标库: http://www.iconfont.cn/

十一. 文本属性和字体属性(经常使用的)

1. 文本属性

/*对齐方式*/
text-align: left|right|center|justify(两端对齐,只适合英文);

/*文本颜色*/
color: 色值;

/*首行缩进, 建议使用单位em*/
text-indent: 2em;

/*文本修饰:  无|下划线|上划线|中划线(删除线)*/
text-decoration: none|underline|overline|line-through;

/*设置行高*/
line-height: 高度值;

2. 字体属性

font-weight: normal|bold|lighter|100~900|inhert;  
/*100~300没有区别*/

• font-family: 字体;
  • a. 网页中不是全部字体都能显示, 由于这个字体要看用户的电脑里面装没装, 好比你设置: font-family:”华文彩云”;, 若是用户电脑里面没有这个字体, 那么就会变成宋体.
  • b. 为了防止用户电脑里面没有你设置的那个字体, 咱们一般写多用个逗号隔开的备选字体, 如: font-family: "Times New Roman","微软雅黑", 备选字体能够有无数个, 默认显示第一个, 没有安装第一个就显示第二个, 以此类推, 都没安装就显示宋体.
  • c. 咱们要将英文字体放在最前面, 这样全部的中文, 就不能匹配英文字体, 就自动的变为后面的中文字体.
  • d. 全部的中文字体, 都有英语别名, 微软雅黑的英语别名是: Microsoft YaHei, 宋体的英语别名是SimSun
  • e. font属性可以将font-size(字体大小),line-height(行高),font-family(字体类型)合三为一: font:12px(大小)/30px(行高) "Times New Roman","Microsoft YaHei","SimSun";
  • f. 行高能够用百分比, 表示字号的百分之多少, 也能够用em单位, 表示字号的几倍. 通常来讲, 都是大于100%的, 由于行高必定要大于字号. 例如:
    • font: 12px/200% "宋体"; 或者 font: 12px/2em "宋体"; 等价于 font: 12px/24px "宋体";
    • 反过来, 好比: font: 16px/48px "宋体"; 等价于 font: 16px/300% "宋体"; 或者 font: 16px/3em 宋体"";

十二. background

1. 颜色表示法

颜色一共有三种表示方法: 单词, rgb表示法, 十六进制表示法.

• rgb表示法: rgb(红色 绿色 蓝色)三原色

光学显示器, 每一个像素都是由三原色的发光原件组成的, 靠明亮度不一样调成不一样的颜色.

用法: rgb(111,234,123); , r, g, b的每一个值的取值范围是0~255

• 十六进制表示法: 全部用#开头的值, 都是十六进制的

用法: #a0a0a0; #112233; 能够简写成 #123;

2. background-color 属性表示设置背景颜色

用法: background-color: #0f0;

3. background-image 表示设置该元素的背景图片

用法: background-image: url('paper.gif');

4. background-repeat:repeat 表示设置该元素的平铺方式

用法: background-repeat:repeat(默认)|repeat-x|repeat-y|no-repeat|inherit;

5. background-position 表示设置背景图片的位置

/*第一个值是水平位置,第二个值是垂直位置*/
background-position: x% y%|Xpx Ypx;
/*第一个值若是是*/

6. 图片精灵图技术

CSS雪碧, 即CSS Sprite, 也有人叫它CSS精灵, 是一种CSS图像合并技术, 该方法是将小图标和背景图像合并到一张图片上, 而后利用CSS的背景定位来显示须要显示的图片部分.

• CSS精灵图应用原理:

只有一张大的合并图, 每一个小图标节点如何显示单独的小图标呢? 其实就是截取大图一部分显示, 而这部分就是一个小图标.

• 使用精灵图的好处:
  • (1) 利用CSS Sprites能很好地减小网页的http请求, 从而大大的提升页面的性能, 这也是CSS Sprites最大的优势, 也是其被普遍传播和应用的主要缘由
  • (2) CSS Sprites能减小图片的字节, 曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的额字节总和
  • (3) 解决了网页设计师在图片命名上的困扰, 只需对一张集合的图片上命名就能够了, 不须要对每个小元素进行命名, 从而提升了网页的制做效率
  • (4) 更换风格方便, 只需在一张或少张图片上修改图片的颜色或样式, 整个网页的风格就能够改变. 维护起来更加方便
• 使用精灵图的不足:
  • (1) CSS精灵图的最大问题是内存使用
  • (2) 拼图维护比较麻烦
  • (3) 精灵图技术使CSS的编写变得困难
  • (4) CSS精灵图调用的图片不能被打印

7. 应用

咱们可使用background综合属性制做通天banner, 什么是通天banner呢? 就是通常咱们电脑屏幕都是1439, 可是设计师给咱们的banner图都会比这个大, 那么咱们能够以此属性制做通天banner, 以下:

background: red url(images/banner.jpg) no-repeat center top;

十三. 定位

定位3种: 相对定位, 绝对定位, 固定定位

1. 相对定位(至关于本身原来的位置定位)

• 现象和使用:
  • a. 若是对当前元素仅仅设置了相对定位, 那么与标准文档流的盒子没有什么区别
  • b. 设置相对定位以后, 咱们才可使用四个方向的属性: top, bottom, left, right
• 特性:
  • a. 不脱离标准文档流
  • b. 形影分类
  • c. 老家留坑, 就是原来的位置还在(占着茅坑不拉翔)

注意: 以上特性能够证实: 相对定位在页面中没有什么太大的做用, 它会影响咱们的页面布局, 咱们不要使用相对定位来作压盖效果.

• 用途:
  • a. 微调元素位置
  • b. 作绝对定位的参考(父相子绝), 绝对定位中会介绍此内容
• 参考点: 以本身原来位置作参考点

2. 绝对定位

• 特性:
  • a. 脱离标准文档流
  • b. 作遮盖效果, 提高了层级, 设置绝对定位以后, 不区分行内元素和块级元素, 都能设置宽高
• 参考点:
  • (1) 单独设置一个绝对定位的盒子:
    • a. 当咱们使用top属性描述的时候, 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置的
    • b. 当咱们使用bottom属性描述的时候, 是以首屏页面左下角为参考点来调整位置的
  • (2) 以父辈盒子做为参考点(经常使用):
    • a. 父辈元素设置相对定位, 子元素设置绝对定位, 那么会以父辈元素左上角为参考点, 这个父辈能够是父亲,爷爷,曾爷爷
    • b. 若是父亲设置了定位, 则会以父辈元素左上角为参考点; 若是父亲没有设置定位, 则会以设置了定位的父辈元素为参考点
    • c. 不只仅是父相子绝, 父绝子绝和父固子绝都是以父辈元素为参考点

注意: 父绝子绝没有实际意义, 作网站的时候不会出现父绝子绝, 由于绝对定位脱离标准文档流, 影响页面的布局. 相反, "父相子绝"在咱们的页面布局中, 是经常使用的布局方案, 由于父亲设置相对定位, 不脱离标准文档流, 子元素设置绝对定位, 仅仅的是在当前父辈元素内调整该元素的位置.

还要注意, 绝对定位的盒子无视父辈的padding.

做用: 页面布局常见的"父相子绝"很是重要, 必须掌握!

3. 固定定位(当前已固定的元素不会随着页面滚动而滚动)

• 特性:
  • a. 脱标现象
  • b. 压盖现象
  • c. 提高层级
  • d. 固定不变
• 参考点:
  • a. 设置固定定位, 若是用top描述, 那么是以浏览器的左上角为参考点
  • b. 若是用bottom描述, 那么是以浏览器的左下角为参考点
• 做用:
  • a. 返回到顶部
  • b. 固定导航栏
  • c. 设置小广告

4. z-index

这个东西很是简单, 它有如下四大特性, 只要记住了每一个特性, 页面布局时就不会找不到盒子的状况了:

• a. z-index值表示谁压着谁, 数值大的压盖住数值小的
• b. 只有定位了的元素, 才能有z-index, 也就是说, 无论是相对定位,绝对定位仍是固定定位, 它们均可以使用z-index, 而浮动元素不能使用z-index
• c. z-index值没有单位, 就是一个正整数, 默认的z-index值为0, 若是你们都没有z-index值, 或者z-index值同样, 那么谁写在HTML后面, 谁就在上面压着别人. 定位了的元素, 永远压住没有定位的元素
• d. 从父现象: 父亲怂了, 儿子再牛逼也没用. 即父亲的z-index值较小, 儿子的z-index再大也没用

5. 应用: 绝对定位的盒子居中

能够看成公式记下来:

position: absolute;
left: 50%;
margin-left: -width/2;  /*即自身宽度的一半*/