共计 1306 个字符，预计需要花费 4 分钟才能阅读完成。
1. 引入内部样式表的办法
（1） 步骤 ：
1）在 head 标签外面，生成一个 style 的双标签
2）在 style 的标签外面写入 @import url(css 门路)
（2）@import 和 link 的区别
1）@import 只能引入 css; link 能够引入多种文件
2）加载程序不同：@import 先加载构造，后加载 css。link 是同时加载构造和 css
3) @import 只反对 ie5 以上的浏览器；link 反对所有浏览器
<style>
@import url(css/ 内部样式表.css);
</style>2. 元素类型
1） 置换元素
-
浏览器依据标签及属性显示不同成果。
- 如依据 img 外面的不同的 src 显示不同的图片。依据 input 里不同的 type 显示不同的输入框
- 为什么 img 和 input 等内联元素能够设置宽高
2）非置换元素：除了置换元素之外的元素
3. 内联块元素的问题
-
内联块因为回车导致的空文本，使得内联块之间会有间距
<body> <input type="text"> <input type="text"> </body> -
解决办法：
- 写在同一行
- 给元素增加浮动
- 给内联块元素的父亲增加一个 font-size:0;
4. 暗藏元素
- visibility: hidden 暗藏元素
-
visibility: hidden 和 display: none 的区别：
- display: none 暗藏之后不占位
- visibility: hidden; 暗藏之后占位
5. 定位的补充
(1) 应用相对定位实现重叠成果
- 利用场景： 图文重叠
-
步骤：
- 1）给挪动的元素设置相对定位
- 2）给父元素设置参考物
- 3）通过挪动形式挪动元素到相应的地位
-
rgba
- a 指透明度，取值范畴 0 -1，0 齐全通明，1 不通明，值越小越通明
(2) 定位实现元素程度垂直居中
-
步骤：
- 1）给挪动的元素加相对定位 position: absolute;
- 2）有参考物的话，给先人元素设置定位属性
-
3）给挪动的元素设置
-
办法 1：
- top: 50%; margin-top: – 该元素高度的一半;
- left: 50%; margin-left: – 该元素宽度的一半;
-
办法 2：
left: 0; right: 0; bottom: 0; top: 0; margin: auto;
-
(3) 定位实现二级菜单
1）一级菜单失常写
2）二级菜单写到一级菜单的 li 外面
3）给二级菜单设置相对定位，脱离文档流，这样就不会影响到他人
4）给二级菜单设置暗藏，划过再显示
(4) 固定定位 fixed
- position: fixed;
- 参考物：浏览器窗口
- 利用场景：广告 / 头部导航 / 侧边栏 / 回到顶部
-
特点：
- 1）不会追随滚动条的滚动而滚动
- 2）脱离文档流
- 3）宽度不设置后，设置固定定位会脱离文档流，宽度自适应生效，须要从新设置宽度
(5) 粘性定位 sticky
- position: sticky
- 参考物：浏览器窗口
- 挪动 top
-
特点：
- 没达到 top 值之前失常显示，达到 top 值之后相似于固定定位，不会追随滚动条滚动，且脱离文档流
(6) 定位属性的层级关系
- 定位属性层级关系，必须有定位属性
-
z-index: 数值；
- 能够为负 能够为正 值越大 越在下面（-5> -7)
6. 锚点
-
在同一页面实现不同板块的跳转
<a href="#id 名"> 点击的文字 </a> <div id=""></div>
正文完