黑马程序员技术交流社区
标题: 前端宝典 [打印本页]
作者: 一页青 时间: 2019-3-18 16:57
标题: 前端宝典
黑马社区大神太多。作为一个初入门的小白，就分享分享学习这段时间来整理的笔记，供一样黑马努力的小白们。加油！！！
一．认识网页
1. Web:网页→由文字、图片、链接等元素组成
2. 代码→浏览器渲染→用户看见的网页
3. 浏览器是转化代码的。网页显示,运行的平台。
4. 常见的浏览器：IE(微软） Chrome(谷歌） Firefox(火狐） safari(苹果） Opera(欧朋） Edge(微 软） ↓ ↓
5. 内核（Rendering Engine） bink webkit
二．Web
1.web标准作用：由于浏览器不同，为了显示内容统一
2.由W3C(万维网联盟）组织和其他标准组织一起制定
3.web标准的构成：结构(元素的结构） 表现(元素的外观，颜色，大小等) 行为(交互)
三．HTML
1.html:超文本标记(标签)语言 不是编程语言
2.html标签：描述网页中的内容
标签(一般约定字母小写）：
一．
①骨架标签：<html> →根标签
<head>
<title> </title>
</head>
<body></body>
</html>
②常规元素(双标签) 开始标签 ← <body> </body> →结束标签 “/”关闭符
③空元素(单标签) <br/>
二．标签关系
①嵌套关系 <head>
缩进一个tab← <title> </titile>
</head>
②并列关系 <head> </head>
<body> </body>
四．代码开发工具
Sublime ：[！+tab ]可以快速书写骨架标签 [标签名+tab]可以快速书写书签
属性：lang 指定页面内容所用语言 “en”表示英文 “ zh-CN”表示中文
meat 存储 字符集charset=”UTF-8”
Vscold
五．标签的语义化
1. 语义化即标签的含义。合适的地方用合适的标签
2. 常用的标签：
⑴排版标签：①<h1> </h1> 标题标签，共六级
②<p> </p> 段落标签
③<hr /> 水平线标签
④<br /> 换行标签 break
⑤<div> </div> 一行只能一个
⑥<span> </span> 一行可以多个
div标签和span标签没有语义，只是作为盒子用来装网页元素的，布局用的
⑵文本格式化标签：
<b> </b> <strong> </strong> 加粗标签
<i> </i> <em> </em> 斜体标签
<s> </s> <del> </del> 删除线标签
<u> </u> <ins> </ins> 下划线标签
后者有强调意思，语义更强烈，推荐使用后者
⑶图像标签：
<img src=”文件名”/>
↓
属性 属性格式：<标签 属性1=”属性值1“ 属性2=”属性值2”/>
↓
alt=” “ 替换文本 图片不能显示时替换
title=” “ 提示文本 鼠标放在图片上时显示的内容
width 宽度 height 高度 一般只设置一个，自动等比例调整
border=“ ” 设置图片边框的宽度
⑷链接标签：
<a href=” “> </a>
外部链接样式：<a href=”http://www.***.com”> </a>
内部链接样式：<a href=”直接写目标的url”> </a>
空连接样式 ：<a href=”#”> </a>
图像链接样式：<a href=””> <img src=” “ /> </a>
↓
当个文字
瞄点链接(瞄点定位):点击可以迅速定位到目标位置
1. 在目标位置设置 id=” “
2.
点击对象上设置链接标签 <a href=”#id名”> </a>
链接打开方式属性：target=” “ _blank(新窗口打开） _self(原窗口打开。默认）
⑸ 注释标签：<!--注释内容-->
作用：解释这部分代码的含义。
程序不执行 约定写在要解释的代码的上方
快捷书写方式：ctrl+/ 或 ctrl+shift+/
⑹base标签 **
<base target=”_blank”/> 让该页面所有链接以新窗口打开，写在<head> </head>标签中
⑺预格式化标签
<pre> </pre> 可以让内容按文本格式显示。整体不好控制，使用不多
六．路径 **
1. 相对路径：
①同一级路径<img src=”1.jpg” />或 <img src=”./1.jpg” /> 直接写文件名
②下一级路径<img src=”images/1.jpg” /> 先写图片上级文件夹名/文件名
③上一级路径<img src=”../images/1.jpg” />先写../图片文件夹名/文件名
一个../表示向上翻一个文件夹，有几个写几个../
2. 绝对路径：
本地地址换电脑就无效了，不建议用
网上的图片地址可以用
七．特殊字符 **
由于浏览器不能识别空格等符号 <会被解析
主要记： 空格：
<: <
>: >
以运算符&开头，以;结尾。不是标签，只是符号
html第二天
一．
1. 表格：展示数据
2. 列表：布局使用
3. 表单：收集用户信息
二．
1. 创建表格
①<table> →表格标签
<tr> →行标签
<td> →单元格标签 【（table date）表格数据】
</td> 单元格标签中可以放其他内容及标签
</tr>
</table>
表格标签中的属性：
border=“1 ” 表格边框
width=“ ” 表格宽度
height=“” 表格高度
align=“ ” 表格在网页中对齐的方式 【left左 center:居中 right:右】
cellspacing=“ 0” 单元格与单元格的距离/外边距
cellpadding=“ ” 单元格内容与单元格的距离/内边距
②表头单元格标签 ：
<th> </th>
会让文字加粗且居中，也是一个普通单元格
③表格标题标签：
<caption> </caption> 写在<table>标签内，行标签的上方
标题可以跟着表格移动
合并单元格： 写在单元格标签中
跨行合并：rowspan=” 格数”
跨列合并：colspan=”格数”
三部曲：1确定合并方式
2根据先上后下 先左后右确定目标单元格
3删除多余单元格
拓展内容
表格划分结构： 题头、正文、脚注
都是放在table 标签中，目的让表格结构更清晰
1 <thead> </thead> 定义表格的头部。内必须有tr标签
2<tbody> </tbody> 表格主体，放数据的主体
3<tfoot> </tfoot> 放表格的脚注之类的
两两标签的单元格不能再合并了
④列表标签：
特点：整齐、整洁、有序，组合自由度比表格更高
1无序列表： <ul>
<li>
</li>
</ul>
各列表项之间无顺序之分，是并列的
<li>
</li>
</ol>
各列表项按顺序排列，与ul基本相同，但使用少
<dt> </dt>
<dd> </dd>
<dt> </dt>
<dd> </dd>
</dl>
一般是dd对dt的解释或者详细罗列用自定义列表。小米最下方的售后服务列表
⑤表单标签
表单由：表单控件 提示文本 表单域 组成
↓ ↓ ↓
文本框、密码框，多选框） 框旁边的文字 把所有数据包含，提交数据
input控件、单标签。 <input />
⑴type:类型 为必需属性 < input type=” “ />
type属性值 text:文本框 password:密码框
radio:单选按钮 checkbox:多选按钮
submit:提交按钮 reset:重置按钮
button:普通按钮 →后面需跟 value属性
image:图片形式的提交按钮→后面需跟src属性
file:文件域→上传头像文件用的
⑵value：值 框内显示的文字
<input value=” 双击666” />
⑶placeholdr: 占位符，用作提示信息。用户输入会消失
<input placeholdr=”请输入昵称” />
⑷ name: 名字，给表单区别数据信息的
<input type=”password” name=”pwd” />
⑸checked: 默认选中状态
<input checked=”checked” />
⑥label标签 提高用户体验，点击label标签内的内容时可以让光标定位到文本框
用法：1、label之间包含内容 <label> 用户名 <input type.../></label>
2、通过for和id控制
<label for=”id名” >昵称</label> <input type=”text” id=” “ />
⑦textarea文本域标签 可以多行填写文本。开始和关闭符之间不要留空隙
留言板<textarea></textarea>
⑧select 下拉列表标签
籍贯 <select>
<option>北京</option>
<option>重庆</option>
<option>上海</option>
</select>
select 中至少包含一对 option。
在option 中定义selected =" selected "时，当前项即为默认选中项
⑨form表单域标签
用于收集和上传数据给服务器
<form action=”url地址” method=” 提交方式“ name=”表单名称”>
各种表单控件
</form>
action服务器程序的url地址
method表单数据的提交方式。有get和post
name 用于区分同一页面的多个表单
css第一天
css（Cascading Style Sheets）层叠样式表 或 级联样式表
因为html属性不方便，满足不了设计者的需求，有局限性
css让html从样式中脱离。让网页更加丰富多彩，布局更加灵活
css设置外观样式和版面布局。 结构和样式相分离
书写位置
1. 行内式（内联式） 书写不方便，代码臃肿。样式与结构没有分离
<h1 style=”color: red;>标题</h1>
2. 内部样式（内嵌样式） 只能控制当前页面，没有彻底分离
<head>
<style>
p {color: red;
font-size: 18px
}
</style>
</head>
3. 外部样式表(外链式) 结构与样式相分离。让css样式可以共享。高效维护
⑴新建一个css文件单独写样式
⑵在html代码的head标签中插入<link rel=”stylesheet” href=”css文件路径”/>
约定：p {color: red; 推荐使用这种展开式书写
}
p是选择器，color是属性 red是值 color: red;是声明
css选择器
作用：找到html中特定元素。把我们想要的标签选择出来
分为基础选择器和复合选择器
基础选择器：
1. 标签选择器
可以把某一类标签全部选出来。不能差异化设计。
P {
color:red;
}
2. 类选择器
可以为元素定义单独或者相同的样式。可以一个也可以多个。
第一步 .类名 {
color: red;
}
第二步 <p class=”类名”> 我是一个段落</p>
类选择器的特殊用法：一个标签多个类名的写法
<p class=”red font-size” > </p>
3. id选择器 类选择器可以重复使用，id是唯一的，不能二次使用
第一步#id名 {
color: red;
}
第二步 <p id=”id名”> 我是一个段落</p>
类选择器在修改样式中使用多。id选择器在后期js使用多
4. 通配符选择器 能够匹配页面中所有元素。会降低页面响应速度
* {
color:pink;
}
约定：不使用没有语义定义的标签选择器。如 div span
一般给body指定整页面大小
css字体属性
⑴字号大小font-size:20px(em)
①单位基本用px，其他单位很少用
②谷歌浏览器默认字号为16px
⑵字体 font-family
font-family:”宋体”，微软雅黑”
①中文字体或者多个单词组成或特殊符号要用” “
②多个字体中间用英文 , 隔开。从前往后优先级显示
③如果电脑上都没有这些字体，则以默认字体微软雅黑
css unicode 字体编码
⑶字体加粗 font-weight
可以用strong标签。用css实现没有语义，可以加粗也可以不加粗。
font-weight: 400;
↓
normal(相当于400） 不加粗。默认值
bold(相当于700) 加粗
100-900 不带单位
一般喜欢用数字表示。数字用整数
⑷字体风格 font-style
normal 默认值，让浏览器以标准的字体样式
italic 斜体
平时很少用斜体，反而喜欢给斜体标签em改成不斜体
字体的综合写法
.类名 {font: 字体风格 字体粗细 字号 字体；}
严格按照顺序来写。中间用空格隔开
字号和字体不能省略
css外观属性
①颜色 color
预定义颜色： red pink
rgb代码： rgb(255,0,0)或rgb(0%,10%,100%)
十六进制：#000000 红绿蓝。两两相同可缩写#000
②文本水平对齐方式 text-align
left(默认值) right center
不能设置给span a em del ins strong标签
③行间距 line-height
一般行高比字号大7、8各px
④首行缩进 text-indent
单位为em。1em等于一个汉字的宽度
⑤文本的装饰 text-decoration
none 取消下划线
underline 加下划线
chrome调试工具
按F12或者右键 检查打开。左边是html,右边是css
emmet语法
tr>td h+p
css第二天
复合选择器 为了更准确更精细选择目标元素标签
1.后代选择器 （使用的是嵌套关系的标签）
.类名 选择器 选择器 { }
按照爷爷、父亲、儿子、孙子、重孙子的关系从左往又。中间以空格隔开
2.子代选择器 （也是嵌套关系的标签。只能向下选一级。儿子级）
.class > p { }
用大于号表示
3.交集选择器 （既是...又是....的关系）
P.class { }
两类选择器中间不能有空格。后期使用较少
4.并集选择器 （和的意思。因为里面样式相同，通常用于集体声明。用 , 隔开表示）
p,
span, { }
5.链接伪类选择器 （用于向某些选择器添加特殊效果）
a:link 未访问的的链接状态。 未被点击的链接正常状态
a:visited 已经访问的链接的状态。 点击过的
a:hover 鼠标移动到链接的状态
a:active 选定的链接的状态 。 鼠标按住不松开时
书写顺序从上到下的顺序不能改变，否则无效
一般与a标签选择器用，也可与类选择器。中间无空格，只有冒号
因为浏览器安全的机制一般link visited active都只是用来改颜色状态
a链接有默认的样式，所以a链接需要单独设置
标签显示模式 display
指标签以什么方式显示。为了更好的布局，所有css对标签更细的分类
①块级元素 h1~h6 p ul li dl div
特点：1、自己独占一行
2、高度，宽度，内外边距可以控制
3、宽度默认是容器的100%。（父级的宽度）
4、是一个容器盒子，里面可以放行或者块元素
5、文本段落里面尽量不能放块级元素div等。如 p h1~h6 dt
②行内元素 a strong b ins s del em i span
特点：1、相邻行内元素在一行上，一行可以显示多个
2、高，宽边距直接设置是无效的。包括垂直方向的边距
3、默认宽度是本身内容的宽度
4、行内元素只能容纳文本或者其他行内元素
5、链接里面不能再放链接。特殊情况可以放块级元素，但转换一下块级模式最安全
③行内块元素 img input td
特点：1、和相邻行内块元素在一行上，之间会有空白缝隙，可以显示多个
2、默认宽度是本身内容宽度
3、可以设置宽，高，行高，内外边距
标签显示模式转换 display (显示）
行转: block 块转行：inline 转行内块：inline-block
行高
上距离+下距离+文字=行高 测量：两基线之间的距离是行高
行高=盒子高度 文字垂直居中
行高>盒子高度 文字偏下
行高<盒子高度 文字偏上
css背景 background
1、背景颜色 background-color 默认值是透明的
2、背景图片 background-image: url(图片路径);
url地址不提倡加” “ 默认是无图片。受盒子大小影响，图片会自动平铺
3、背景平铺 background-repeat
repeat:平铺（默认值） no-repeat:不平铺
repeat-x :水平平铺 repeat-y 纵向平铺
4、背景位置position(位置）
L
length: 百分数写法
position: 方位单词 left right top bottom
background-position: x坐标 y坐标
1、两个都是方位名词没有前后顺序，中间用空格隔开
2、如果只指定一个值，另一个值默认居中对齐，数值写法也是
3、如果是精确数值必须按照x y 的顺序书写
4、可以方位单词和数值混用，但也必须按照 x y顺序书写
5、背景图片大值可以让高分辨率显示更好。一般书写 center top
5、背景附着 让背景是滚动的还是固定的
background-attachment
fixed 固定 scrool 滚动的（默认值）
背景简写
background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
官方没有顺序要求，约定这样的顺序书写。中间用空格隔开
css第三天
6、背景透明
B
background: rgba(0,0,0,0.3) a表示透明度取值范围0-1。 0.3可以简写.3
css层叠性
当同一类选择器或者权重一样的选择器作用同一个元素上时将触发层叠性
以就近原则。后来居上。后来的层叠掉上面的
css继承性
子标签会继承父级一些样式属性。利用继承性可以简化代码
文本类的属性可以继承。如 text- font- color line-
css优先级
同一属性作用在同一元素上且选择器与权重都不同时将触发优先级
1.权重计算公式： 权重
继承或* 0，0，0，0
标签选择器 0，0，0，1
类选择器、伪类选择器 0，0，1，0
id选择器 0，1，0，0
行内样式 1，0，0，0
!important(重要的) 无穷大
color: pink !important
默认属性相当于一个默认标签选择器。所以继承和通配符干不过默认属性
2.权重叠加：复合选择器权重会叠加
如p .类名 0，0，0，1+0，0，1，0=0，0，1，1
相加不会进位。十一个标签选择器相加也干不过一个id选择器
继承权重为0
当看优先级时首先看显示内容的元素有没有选中，选中情况下对比计算权重
权重相同时不执行优先级，执行层叠性。
盒子模型
网页布局中1.设置好盒子大小和位置
2.把元素图片放在盒子中
盒子模型的组成(box model):元素的内容(content)、边框(border)、内边距(padding)、外边距(margin)
边框的写法：
border-width:边框宽度
border-style:边框样式 1.solid(实线) 2.dashed(虚线) 3.dotted(点线) 4.none(无。默认值)
border-color:边框颜色
边框连写 border: 宽度 样式 颜色； 无官方要求，约定的。一般都是连写
分别指定边框：border-top border-left border-right border-bottom
border-bottom
细线表格的写法： border-collapse: collapse; (设置相邻边框合并显示。）
内边距
padding-left padding-right padding-bottom padding-top
简写：padding：1px
只写1个值 表示上下左右都是该值
写2个值 表示上下 左右
写3个值 表示上 左右 下
写4个值 表示上 右 下 左（顺时针方向）
当设置了内边距时，盒子会被撑大。解决办法：
计算盒子实际大小来改变内容的大小。1.盒子实际大小=内容高度/宽度+内边距+边框
2.内容宽度/高度-多出来的值（两条内边距值）
内边距不影响盒子的情况：如果这个盒子没有宽度，则padding不会撑大盒子
外边距
margin-left margin-right margin-top margin-bottom
简写和内边距形式一样
块级盒子水平居中
1.必须有宽度 2.左右外边距设置为auto(自动）
左边设置auto时贴右边显示 右边设置auto时贴左边显示
水平居中的三种写法：1.margin: auto;
2.margin:0 auto;
margin-lefe: auto; margin-right: auto;
盒子中的文字水平居中和盒子的水平居中
text-aling: center; 可以让盒子内的行内元素和行内块元素水平居中
插入图片和背景图片的区别
1.一般产品展示，比较重要的用插入图片。移动图片只能通过盒模型的内外边距
2.一些小图标，或者超大背景图用背景图。移动图片只能通过背景位置
清除元素默认的内外边距
* {
padding: 0;
margin: 0;
}
行内元素为了照顾兼容性，只设置左右外边距。不要设置上下内边距。
相邻块元素垂直外边距的合并
1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素有上内边距时，则他们之间的垂直距离不是两者之和，而是取两者值中的较大值。这种现象称为相邻元素垂直外边距的合并或者外边距的塌陷
解决办法：只设置一个盒子的垂直方向的外边距即可
2.嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父级没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并。合并的外边距为两者的较大值。
解决办法三种：1.给父级定义一个上边框
2.给父级指定一个上内边距
3.给父级添加overflow: hidden
网页布局的稳定性
什么时候用内边距，什么时候用外边距。一般都混用。优先如下：
宽度>内边距>外边距
1. margin会有外边距合并还有ie6下面加倍的bug,所以最后使用
2. padding会影响盒子的大小，需要加减计算。
css第四天
list-style: none; 取消ul默认样式的小圆点
书写规范
1. 空格规范： ：与值空格 选择器与{ 空格
2. 选择器规范： 并集选择器另起一行。嵌套不要大于三层
3. 属性规范： 每个属性另起一行。 属性以；结束
拓展：
圆角边框（css3）
border-radius: 50% 圆的写法
如果是四个值，也是按着顺时针方向的上 右 下 左来设置
盒子阴影
box-shadow: (h-shadow)水平阴影 (v-shadow)垂直阴影 模糊距离 影子大小 影子颜色 内/外阴影;
前两个属性值必须写。默认是外阴影。不需要写。写了外阴影反而不显示
oueset可以将外阴影改成内阴影
浮动 用来页面布局的
布局的三种机制： 普通流（标准流） 浮动 定位
普通流：块级元素会独占一行从上向下的顺序排列。行内元素会按照从左向右的顺序一行排列。碰到父级边缘会自动换行。都是按照默认的方式显示排列
浮动：让盒子浮动起来，多个块级盒子占一行
因为一些网页布局的要求，标准流不能满足需求，所以需要用到浮动
概念：1.元素浮动会脱离标准流的控制 2.移动到指定位置
float : { none (默认值，不浮动） left（左浮动） right（右浮动）
作用：1，可以让块级元素在同一行显示
2，可以让盒子水平靠左或靠右对齐
3，可以让文字环绕的效果
浮：漂浮在标准流上面，脱离标准流
漏：浮动的盒子把原来的位置漏给下面标准流的盒子。不占有原来的位置。俗称 脱标
特：float属性会改变元素的display显示模式。不再是块级元素。类似于转成行内块，但之间没有间隙。
如果父级盒子装不开这些盒子。多的会另起一行显示
给浮动元素添加一个标准流的父级盒子。减小对其他标准流的影响
浮动元素与父盒子的关系：
子盒子的浮动参照父盒子对齐。既不会覆盖住边框，也不会覆盖内边距。
浮动元素与标准流兄弟盒子的关系
两盒子都浮动会顶部贴着对齐
如果上盒子不浮动，下盒子浮动，下盒子贴在上盒子下边
浮动只会影响后面或当前的标准流，不会影响上面的标准流
如果一个盒子中的多个盒子有一个浮动，其他兄弟盒子应当都设置浮动。确保一行显示
为什么要清除浮动
因为很多情况下父盒子不方便给高度，但是子盒子浮动了不占位置，父级盒子高度为0.就影响了下面的标准流。
清除浮动主要为了解决父级元素因子级浮动引起的内部高度为0的问题。清除浮动后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
（清除）clear: left right both（左右两侧。一般只用这个值）;
清除浮动的四种方法：
1.额外标签法（隔墙法）
在最后一个浮动的盒子后面添加一个空标签，给空标签设置属性 clear: both;
缺点：添加太多无用的空标签，结构化较差
2.父级添加over flow 属性方法
给父级盒子添加属性 over flow: hidden;
代码简洁，但内容增多时会造成不会自动换行，导致内容被隐藏掉
3.清除浮动之after伪元素
.clearfix:after {
content: “ ”;
display:block;
height:0;
visibility: hidden;
clear: both;}
.clearfix { *zoom:1;} →这一步是解决IE6 7不兼容的问题
after伪元素默认是行内元素。就是利用了css在当前标签的内部后面创建一个”标签“
4.双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content:””;
display:table;}
.clearfix:after {
clear:both;}
.clearfix { *zoom:1;} →这一步是解决IE6 7不兼容的问题
什么时候用清除浮动：当父级盒子没有高度，子盒子浮动影响了下面的布局了
Ps的学习
图片格式：
1. jpg JPEG 高清，颜色比较多，一般产品类图片都采用这种格式
2. Gif 只能储存256中颜色，但可以透明背景和动画效果
3. Png 新兴网络图像格式，结合了jpg gif的优点。通用于logo 和一些小图标
4. Psd ps的源文件格式，用ps打开，带有图层
切图：
1. 手动划动切片 2.图层切片 3.辅助线切图 4.切图插件 cutterman
css样式属性规范顺序
1. 先写布局定位属性 display float clear 背景定位
2. 盒子自身属性 width height 内外边距 边框 background-
3. 文本属性 font- color text- line-height
4. Css3或者其它属性 border-radius box-shadow rgba()
布局思路流程
1.必须确定页面的版心（可视区）测量可得知
2.分析页面中的行模块，在行模块中的列模块
3.制作html结构，先结构后样式
4.运用盒子模型的原理，通过div css布局
学成在线静态页面
定位
价值：将盒子定在某一位置，自由的飘浮在其他盒子（标准流和浮动）的上面
定位的元素层级都会高于标准流和浮动，静态定位除外
定位也是用来布局的，有两部分组成
定位=定位模式+边偏移
通过 top bottom left right 属性定义元素的边偏移
定位的盒子有了边偏移才有价值，一般有定位必有边偏移
四种定位模式
position 值： static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
1. 静态定位是元素的默认定位方式。无定位的意思。不要定位的时候用。按照标准流特性摆放位置，没有边偏移
2. 相对定位
①相对于自己原来标准流的位置来移动 （自恋型）
②原来标准流的位置区域继续占有，后面的盒子仍以标准流对待它。 （没有脱离标准流）
3. 绝对定位
①绝对定位元素以带有定位的父级元素或祖级元素来参照移动位置 （父级静态定位除外）
②如果父级没有定位，子盒子以浏览器为基准定位
③不保留原来位置，完全是脱标的
绝对定位一般要搭配有定位的父级元素一起使用。
子绝父相→ 父元素需要占位置。所有父元素要使用相对定位。
4. 固定定位 ----IE低版本不支持
①完全脱标 （完全不占位置）
②只认浏览器可视窗口（跟父元素没有任何关系。不随滚动条移动） 认死理型
作者: 首席填坑师 时间: 2019-3-18 19:09
嘀嘀嘀
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |