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"; /**单列宽度 单行高度 列数 行数*/ ...
随机推荐
- 主席树初探--BZOJ3524: [Poi2014]Couriers
n<=500000个数,m<=500000个询问,每次问区间里出现次数>(R-L+1)的数字是谁,没有输出0. 写了带修改发现不会不带修改了.... 不带修改的话,n个点,每个点表示 ...
- codevs4437 YJQ Arranges Sequences
题目描述 Description 神犇YJQ有两个长度均为n的数列A和B,并且A是一个单调不增的数列.他认为这两个数列的优美度为.有一天YJQ很无聊,他把Bi进行重新排列,得到了许多不同的优美度.他想 ...
- python类变量以及应用场景
类变量是python 中class 的变量,区别于实例的变量.我们通过一些例子具体了解一下 先看下面的例子 >>> class Demo(object): ... v1 = 1 .. ...
- test markdown 写博客
欢迎使用 Cmd Markdown 编辑阅读器 我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想 ...
- NYOJ 题目42 一笔画问题(欧拉图)
一笔画问题 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描写叙述 zyc从小就比較喜欢玩一些小游戏.当中就包含画一笔画.他想请你帮他写一个程序.推断一个图是否可以用一笔画下 ...
- Django学习系列之路由系统
一.基于App的路由 作用: 根据App对路由规则进行分类,在全局urls.py包含某个项目的urls.py 示例 定义全局urls.py(全局路由系统) #导入include from django ...
- [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type
ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...
- Wps 2013 拼音标注两种方式分析
Wps 2013 拼音标注两种方式分析 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转 ...
- java 学习第一步---安装JDK以及配置环境变量
1.下载jdk 链接:https://pan.baidu.com/s/1FiTGhxdHK0KTFawdkLT26g 提取码:zcy0 我已经在官网上面下载了1.8的jdk,通过百度云盘分 ...
- HttpUtils 发送http请求工具类
import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URISyntaxEx ...