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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。