focus、click、blur、display、float、border、absolute、relative、fixed
onfocus:获取焦点,点击时,按着不放
onclick:点击松开之后,未点击其他处
onblur:点击松开之后,又点击其他处
display:block,none,inline
block:单独占据一行,与前后不在同一行
block:块对象的默认值。对象之后添加新行。
none:隐藏对象。隐藏的对象不占据物理空间。
inline:内联对象的默认值。对象后不添加行。 display:none不占据页面空间
visibility:hidden 占据页面空间
type="hidden" 不占据页面空间 float 可以看出float所占空间大小 width="150px" border:1px solid red; 测试一个元素是不是块级标 签:background-color:red; 使几个块级标签在同一行 width="33%" ---------------
绝对定位position
需要至少定位top、left、right、buttom中的一种
不占据页面空间
position:absolute;
top:20px;
left:60px; 相对定位:占据页面空间,
absolute(绝对定位)
从文档流中拖出(不占据页面空间)。
相对于最接近的,使用absolute或relative定位的父级元素进行绝对定位,如果此元素不存在,则相对与页面左上角定位。 relative(相对定位)
在正常文档流中,不可层叠(占据页面空间)。
相对于正常文档中的位置偏移。 fixed(固定定位)
设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。
此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。 column 浮动 align :规定 div 元素中的内容的水平对齐方式。
text-align:规定“元素中”的文本的水平对齐方式。 问题:center的边框哪去了?
答案:content是absolute定位,也即是从文档流中拖出来了,不占据页面控件,所有没有把center撑开。
focus、click、blur、display、float、border、absolute、relative、fixed的更多相关文章
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- display:table的几个妙用:垂直居中、浮动……
一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...
- change和onchange、click和onclick的区别
change和onchange.click和onclick的区别: onchange和onclick都是js方法 可以在标签元素上使用 <input onchange="" ...
- mousedown、mouseup、click事件之间的关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件.与 click 事件不同,mousedown 事件仅需要按键被 ...
- 移动端touch、click、tap的区别
一.click 与tap比较 click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件.singleTap 和 ...
- [转]relative、absolute和float
position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...
- relative、absolute和float
relative.absolute和float position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...
- HTML中的布局方式:absolute、relative、fixed、static
在CSS中关于定位的内容是: position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码,稍作修改可以生成下图.css代码如下: @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ ...
随机推荐
- cdq分治入门--BZOJ3262: 陌上花开
n<=100000个人,每个人三个属性Ai,Bi,Ci,一个人i的等级为Ai>=Aj,Bi>=Bj,Ci>=Cj的人数,求每个等级有多少人. 裸的三维偏序.按照常规思路,一维排 ...
- bat初学
今天在重置某工具软件试用期时(汗,盗版可耻=_=!,鄙视自己一下),实在懒得每次过了试用期再点开注册表,手工删除了,就想着写个脚本执行一下,这里就想起来了bat文件. 首先介绍一下for循环,从百度知 ...
- hdu - 2066 一个人的旅行(基础最短路)
http://acm.hdu.edu.cn/showproblem.php?pid=2066 把与草儿相连的城市最短距离置为0,然后进行dijkstra,在t个城市里找出距离最近的一个即可. #inc ...
- nginx: [emerg] unknown directive "聽" in D:\software03\GitSpace\cms\nginx-1.14.0/conf/nginx.conf:36
nginx: [emerg] unknown directive "聽" in D:\software03\GitSpace\cms\nginx-1.14.0/conf/nginx ...
- spring-kafka
spring-kafka 使用spring-kafka的小伙伴,看过来. 说明 因为spring-kafka封装的比较厉害,可能跟你实际使用起来有很大的差别. 一个简单的消费例子 在spring-bo ...
- 一步步搭建java信息管理系统00 - 前言
开发前,先上效果图吧 信息管理系统,个人认为,以下几个因素是不可缺少的 多tab 因菜单比较多,右侧的树形一定要考虑,如果菜单还是多,那么顶部就要考虑起来了 以后想到什么,再添加吧. 看到easyui ...
- Android GIS开发系列-- 入门季(13)Gdal简单写个shp文件
Gdal是用来读写栅格与矢量数据的,在Gdal官网,可以下载相关的资源进行平台的编译.其实Arcgis底层也是用Gdal来读取shp文件的,那在Android中可以直接读写shp文件吗,是可以的.这里 ...
- Vuzzer自动漏洞挖掘工具简单分析附使用介绍
Vuzzer 是由计算机科学机构 Vrije Universiteit Amsterdam.Amsterdam Department of Informatics 以及 International ...
- Silverlight+WCF实现跨域调用
在这篇文章中.WCF扮演server,向外提供LoginVaild服务.Silverlight扮演client.调用WCF提供的LoginVaild服务.思路有了.以下进行代码实现. 数据库脚本实现 ...
- Vue.js 组件的三个 API:prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...