CSS定位

CSS定位

1.基本布局

基本布局包括盒模型 浮动 定位这三种；
盒模型：①content:内容
②padding:内边距
③border:边框
④margin：外边距
浮动：float:left/right/none;使元素能够同排显示

2.定位

1.分类(position)：①static:静态定位（默认值）
②relative:相对定位
③absolute:绝对定位
④fixed:固定定位
⑤sticky:黏性定位
2.relative:相对定位特点：①相对于自身原来的位置进行偏移
②不改变元素本身特性
③保留元素原来位置
④一般不单独使用，经常配合绝对定位使用
3.absolute:绝对定位 特点：①完全脱离文档流，不保留元素原来位置
②改变元素特性
③基于最近的relative父级元素。如没有就基于body
4.fixed:固定定位特点：①完全脱离文档流，不保留元素原来位置
②改变元素特性
③固定在页面不动
④如网页导航或者返回顶部这些就可使用固定定位
页面布局最好不要都用定位，若以后改布局会很麻烦

3.元素隐藏

设置元素不可见的方法有很多，在这里例举几个常用的
①opacity:设置元素透明度
②visibility:hidden;设置元素可见性
③overflow:hidden:设置超出隐藏
④rgba:设置元素透明度，与opacity的区别就是opacity使所有的元素都有透明度，包括背景色，而rgba只会让当前所指元素有透明度