来源博客:u.mr90.top
css定位
- 为什么需要定位-因为标准流和浮动流无法快速实现
- 定位的组成:定位模式+边偏移
- 边偏移使用top,buttom,right,left属性移动
- 静态定位:position:static(很少使用)
- 相对定位:position:relative(位置保留)
- 绝对定位:position:absolute(先对于父元素)父元素无定位或者没有父级以浏览器为标准,以最近的有定位父元素对齐
(不在占有位置)
子绝父相
- 巧妙使用
>
固定定位
- position:fixed(不占有位置)
- 以可视化的窗口为参照点,使用算法固定在版心的位置
- 先定义浏览器的一半,left/right:50%,在使用margin-left:版心的一半
粘性定位
postion:sticky;top:0
占有原来的位置(浏览器可视区)
定位叠放次序
- z-index数值越大盒子越靠上
- 层叠性,属性都相同时候
- 只有定位的盒子才有z-index属性
绝对定位盒子局中
margin:0 auto;
加了绝对定位的盒子无法适用- 与定义版心位置的方法类似margin为负值
- 相对定位不脱流不影响
定位的特殊特性
- 行内元素添加绝对或者固定定位,可以直接设置w和h
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小使内容的大小
浮动和定位
- 浮动想让文字环绕,只会压住下面标准流的盒子,不会压住盒子中的文字(图片
- 定位会压住下面标准流的所有内容。绝对定位,固定定位
元素的显示和隐藏
- display:none;隐藏对象(经常使用)
- display:block;显示对象
- display不在占有原来的位置
- visibility:hidden;(隐藏之后继续保留原来的位置)
- overflows:hidden;隐藏溢出,比如:浮动溢出(父元素无高度的时候),overflows:scroll
- 有定位的盒子慎用隐藏元素
精灵图
background-position:x y; xy的正方向为向右向下,所以一般都是负值
- 取消表单轮廓
outline:none
- 防止拖拽文本,
textarea{resize:none}
vertical-align属性
- 行内元素和行内块元素,可以使图片和文字对齐
- verticla-align: middle;图片和文字垂直局中
- 解决图片底部有空格-加vertical-align属性(转化为块级元素)
文本省略号
单行
- 单行省略号,强制一行显示
white-space:nowrap
- 隐藏溢出
overflow:hidden
- 省略号代替
text-overflow:ellipsis
多行
- 第一种方法兼容性有问题
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
margin负值的使用
- 去除边框的时候可使用
- 如果li有定位加z-index提高定位,如果没有定位,添加相对定位即可