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"; /**单列宽度 单行高度 列数 行数*/ ...
随机推荐
- 【动态规划】最长上升子序列(LIS)
今天看了<挑战程序设计竞赛>的动态规划部分,感觉对以前一些知其然却不知其所以然的问题有了更好的理解,先整理一部分. 题意: 有一个长为n的数列a0,a1,a2,...,an .请求出这个序 ...
- 洛谷——P1164 小A点菜
P1164 小A点菜 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过u ...
- SDUT--找朋友(BFS&&DFS)
找朋友 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 X,作为户外运动的忠实爱好者,总是不想呆在家里.如今,他想把死宅Y从家 ...
- CentOS+Apache+php无法访问redis的解决方法 Redis server went away
在CentOS下配置Apache+php+redis+phpredis环境.编辑访问redis缓存的php程序test.php,以应用程序方式在后台运行,可成功访问Redis,而在Apache下以网页 ...
- java Bean及其使用
1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...
- 容器ArrayList原理(学习)
一.概述 动态数组,容量能动态增长,元素可以为null,用数组存储,非线程同步(vector线程同步) 每个 ArrayList 实例都有一个容量,该容量是指用来存储列表元素的数组的大小,自动增长(默 ...
- Oracle存储过程(增、删、改)写法、oracle执行存储过程
Oracle存储过程(增.删.改)写法 发布时间: 2010-3-24 11:07 作者: ZHF 来源: 51Testing软件测试网采编 字体: 小 中 大 | 上一篇 下一篇 ...
- 【Dairy】2016.10.17-1 OIer最悲剧的事情
OIer最悲剧的事情: 看完题,觉得很可做 然后开始码,码了很久 一测样例,不过.. 开始肉眼查错..手玩样例.. 过了很久 ...
- backbone源代码注释(部分)
// Backbone.js 1.0.0 // (c) 2010-2013 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely ...
- EasyUI之树形结构tree
转自:https://blog.csdn.net/ya_1249463314/article/details/70305730 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...