
css定位
发布日期:2021-05-10 03:30:55
浏览次数:23
分类:精选文章
本文共 1312 字,大约阅读时间需要 4 分钟。
定位
定位的作用
静态定位(一般少用)静态定位是元素的默认定位,无定位的意思。语法:{position:static;}静态定位按照标准流特性来摆放位置,它没有边偏移
相对定位
绝对定位(absolute)特点:若祖级元素没有定位,则按照浏览器为准定位(若祖级有定位,则按照最近的祖级为准定位)不占有原有位置 子绝父相(一般常用) 固定定位语法:position:fixed;特点:以浏览器的可视窗口为参照点移动位置跟父级元素没有任何关系不跟随滚动条不在占用原有的位置(固定在右侧,左侧也类似)技巧:先用 left:50%; 到达中间的位置margin-left:(中间盒子一半的宽度就行了,一般宽一点); 粘性定位兼容性差,IE不支持 定位的叠放次序 定位拓展定位的特殊性1.绝对定位,固定定位和浮动类似,在行内元素添加定位后,可以直接设置高度和宽度2.块级元素添加定位,如果不设置大小,则跟随内容的大小变化3.绝对定位会压住下面的所有的内容
元素显示与隐藏
display属性display:none;隐藏对象display:block;除了转换为块级元素以外,还有显示对象的功能隐藏功能以后就不会占有原来的位置 visibility属性visbility属性用于指定元素是可见还是隐藏visiblity:visible;可见visible:hidden;不可见仍会占有原来的位置如果隐藏后不想要原来的位置,可以用display:none;(用的比较多) overflow溢出overflow:visible;不隐藏,也不剪切overflow:hidden;隐藏溢出的部分overflow:scroll:溢出部分显示进度条,不溢出不显示overflow:auto;溢出不溢出都显示滚动条如果有定位的盒子要谨慎使用,它会隐藏多余的部分附:如果一个盒子既有left和right属性,会默认left属性
精灵技术
有效减少服务器发送和请求的次数,提高页面的加载速度原理:将网页中的一些小的图像整合到一个大图中background-position:x y;需要注意的是,是下面的图片在动,而不是框在动,x和y一般是负值缺点:图片较大,图片放大缩小容易失真适用于比较精细的图片icomoon字体图标icomoon字库,可以下载很多图标icofont阿里字库字体图标,表面是图画,实质是字体优点:轻量级,灵活性(可以加很多字体的效果),兼容性适用于简单的小图标这个里面有各种适用于各个浏览器的图标格式在下载解压后css文件前面几行里面有这几行CSS三角制作对于一个盒子,不指定宽度和高度其三角大小就是border的粗细,如果要一个三角形,就把另三个设为透明的就行了
鼠标样式轮廓线给表单添加outline();或者outline(none);去除默认的蓝色边框input{ outline:none;}
文本防止拖拽textarea{ resize:none;} vertical-align属性应用实现图片和表单与文字对齐(行内或行内块元素的属性,不是的可以转换为行内块元素)有截图没有弄上去( 从有道云笔记复制而来)
发表评论
最新留言
关注你微信了!
[***.104.42.241]2025年04月07日 07时22分26秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
JavaFX官方文档
2021-05-10
ORA-12154: TNS: 无法解析指定的连接标识符
2021-05-10
In App Purchase Verification using PHP
2021-05-10
shell编程===》进程锁
2021-05-10
Split返回数组元素含有空字符串移除
2021-05-10
解决VS中C语言运行scanf错误
2021-05-10
idea上的程序报错-> 错误: 找不到或无法加载主类
2021-05-10
java刷题--49字母异位词分组
2021-05-10
《web安全入门》(四)前端开发基础Javascript
2021-05-10
call_user_func函数和call_user_func_array函数
2021-05-10
配置php.ini文件,关闭错误提示,打开错误日志,设置错误日志路径
2021-05-10
接收get或post数据使用fwrite写入文件中,方便追踪错误;或其他几种缓存方式
2021-05-10
mysql开启慢查询日志及查询
2021-05-10
Window平台Grpc框架搭建
2021-05-10
C中几道位运算的例题
2021-05-10
python入门(二)基础知识
2021-05-10
golang log4go 使用说明及丢失日志原因
2021-05-10
Android Studio打包生成Jar包的方法
2021-05-10