css溢出、定位

kyrie0316

于 2024-05-25 16:31:23 发布

阅读量505

点赞数 12

分类专栏： html\css 文章标签： css 前端

本文链接：https://blog.csdn.net/W1060632133/article/details/139199584

版权

html\css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

溢出

含义:元素用于固定的大小,当内容或是里面的区域不能再这个区域内正常显示,有超出的情况,超出的效果即为溢出

基本语法: overflow:visible/hidden/scroll/auto
属性: 
	visible:超出溢出的时候默认值 显示
	hidden:超出的时候将超出的部分,进行隐藏
	(hidden可以解决的问题：可以解决浮动引起的高度塌陷的问题
    					 可以解决margin的一些问题
    					 可以实现超出出现省略号的效果)
	scroll:溢出滚动,(默认有滚动条)
	auto:溢出滚动,(超出有滚动条)
	（常用于后台管理系统）

显示省略号

原因：纯css书写单行文本溢出显示省略号,这样限制范围是用width限制,所以所有的宽度是一样的,不一样的话设置麻烦

单行文本显示省略号
	/* 限制范围 */
      width: 300px;
    /* 强制文本单行显示 */
      white-space: nowrap;
    /* 溢出隐藏 */
      overflow: hidden;
    /* 显示省略号 */
      text-overflow: ellipsis;
      
多行文本显示省略号
	/* 限制范围 */
	  width: 300px;
    /* 需要CSS3的老版本弹性盒子 */
      display: -webkit-box;
    /* 设置显示省略号在第几行 */
      -webkit-line-clamp: 2;
    /* 设置主轴为垂直的 */
      -webkit-box-orient: vertical;
    /* 溢出隐藏 */
      overflow: hidden;

元素类型

所有的标签也叫作元素根据纯css的显示分类有：

1.块元素：默认从上往下竖着排列,且支持宽高，并且默认是独占一整行纵向排列

例如:div,ul,ol,li,p,h1-h6,header,footer…

2.行内元素：默认从左往右横着排列,不支持宽高的设置,不支持margin的上下设置,对于padding的上下支持是有问题的,有时候对于行高支持也有问题,其次可以识别编辑器敲的回车,该回车在浏览器上显示的时候,会在横向有空格,其次垂直相对于文本基线对齐

例如：a,b,strong,span,i,em,var,u,ins,s,del,sup,sub…

3.行内块元素:既有行内元素的特点,又有块元素的特点

例如: img input textarea select…

以上的一些元素的特点,如果想要改变,可以改变强制转换 通过属性 display

!强制转换成块元素 display:block;
 强制转换成行内元素 display:inline;
 强制转换成行内块元素 display:inline-block;
!彻底隐藏 内容和空间都隐藏  display:none;
	元素触发弹性盒子 display:flex
	元素触发网格 display:grid
	
 不常用取值:
    list-item === 元素显示以列表项类型显示
    table === 元素以表格类型显示
    table-row === 元素显示以表格的行类型显示
    table-cell === 元素显示以表格的列类型显示

置换元素:
1.在css显示上默认是带有宽高或者边框的
2.最终的浏览器显示结果需要依赖HTML的属性或者标签配合
eg: img标签,引入之后想要显示出图片要依赖src属性,默认带有一定的宽高; select依赖option标签才有效果,默认带有一定的宽高

非置换元素:除了置换都是非置换

显示隐藏

hover配合实现显示隐藏
隐藏一个元素的方法
  ！彻底隐藏,彻底隐藏的标签自己是不能添加hover的
!display:none; 是空间和内容都隐藏  是不支持CSS3过渡效果
    显示只要display的属性值不是none就可以 常用用display:block;

width:0;height:0;overflow:hidden;是空间和内容都隐藏 是支持CSS3过渡效果
	显示只要宽度和高度的属性值不是0就可以  只是隐藏内容但是空间还在
    
!opacity:0; 设置透明度属性为0  取值范围是0-1  给了opacity的盒子支持hover效果
    显示只要属性值不是0就可以,常用值是1
    
visibility:hidden; 只是隐藏内容,但是空间还在 自己隐藏的时候是不支持hover效果的
     显示是visibility:visible;
     
     
     
     ！让需要滑动显示的区域先隐藏  之后再设置滑动的地方使用:hover 让该区域再显示出来
        需要隐藏区域{
            display: none;
        }
        滑动的地方:hover 需要隐藏区域{
            display: block;
        }

定位

含义 : 定位代表的是让元素去某一个位置, 或者是让元素相对于某一个元素进行位置的调整偏移

定,覆盖上去位,位置

使用场景

想要一个盒子覆盖上去且需要位置移动的时候用  
    1:盒子覆盖上去且不会随着滚动条移动,此时的盒子参照物是浏览器的当前窗口,也就是固定不动的时候用固定定位
    2:盒子覆盖上去且会随着滚动条移动,此时的盒子参照物是某个父元素(给相对定位)的时候用绝对定位(父相子绝)
    3:盒子覆盖上去且会吸顶效果,此时的盒子用的是粘性定位
    
    主要是看定位移动的时候参照物
    position:static;默认值 没有定位(静态定位)
    position:absolute; 绝对定位
    position:relative;相对定位
    position:fixed;固定定位
    position:sticky; 粘性定位

1.如果案例中覆盖上去的盒子移动位置的时候参照物是父元素或者是浏览器的窗口第1屏幕用绝对定位
2.如果案例中覆盖上去的盒子移动位置的时候参照物是自己的初始位置用相对定位
3.如果案例中覆盖上去的盒子移动位置的时候参照物是浏览器的当前窗口且固定不动,用固定定位
4.如果案例中有吸顶效果,那么用粘性定位

这个悬空不占位的特点专业术语叫做脱离文档流

绝对定位

position:absolute;

	特点1:脱离文档流,一个盒子给了绝对定位之后,该盒子是完全悬空不占位的会空出来一块空间,下面的盒子会上去,被该盒子完全覆盖

	特点2:层叠顺序(层级关系),可以通过属性z-index修改,该属性默认值是0,没有最大值也没有最小值,可以给负数,数值越大层越靠上,不带单位,且必须是整数,如果属性值是一样的,按照结构在后层在上
(注意点z-index只能用于定位的盒子,如果给负数,该盒子是在所有盒子的最下面)

	特点3:一个盒子给了绝对定位之后,只是原地悬空不占位了,所以可以让该盒子移动位置,可以用margin或者是padding,同时也可以多一个选择,用提供的left right top bottom属性移动位置

参照物

	参照物1:浏览器窗口的第一屏(大小根据窗口的大小)(例:百度新闻的弹窗,只在第一屏,只在第一屏中,滚动就看不见了)
	参照物2:有定位设置的父元素,这个父元素可以给绝对定位,固定定位,粘性定位都可以,只要父元素有定位,儿子的参照物就是父元素,父元素常用定位相对定位(父相子绝)  这个父元素不一定是最近的,只要上一级有定位,那么儿子就找该父亲
	
	说明:left right top bottom属性给属性值的时候可以用正数也可以用负数,单位也可以是%这里的%之多少是参照物的%多少(给正数往参照物里面移动,给负数往参照物外面移动 所有定位都一样)