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的更多相关文章

  1. ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法

    ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...

  2. display:table的几个妙用:垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  3. change和onchange、click和onclick的区别

    change和onchange.click和onclick的区别: onchange和onclick都是js方法 可以在标签元素上使用  <input  onchange="" ...

  4. mousedown、mouseup、click事件之间的关系及执行顺序

      三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件.与 click 事件不同,mousedown 事件仅需要按键被 ...

  5. 移动端touch、click、tap的区别

    一.click 与tap比较 click与tap都会出发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap(轻击)代替click作为点击事件.singleTap 和 ...

  6. [转]relative、absolute和float

    position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活, ...

  7. relative、absolute和float

    relative.absolute和float   position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bo ...

  8. HTML中的布局方式:absolute、relative、fixed、static

    在CSS中关于定位的内容是: position:relative | absolute | static | fixed     static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z- ...

  9. css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS

    适用于分步骤操作的页面导航图 实现结果如下 上图对应下述代码,稍作修改可以生成下图.css代码如下: @charset "UTF-8"; /**单列宽度 单行高度 列数 行数*/ ...

随机推荐

  1. 【Tomcat】Tomcat Connector的三种运行模式【bio、nio、apr】

    Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运行模式 bio bio(blocking I/O,阻塞式I/O操作),表示Tomcat使用的是传统的Java I/O ...

  2. EditText隐藏和显示

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. Codeforces 631A Interview【模拟水题】

    题意: 模拟模拟~~ 代码: #include<iostream> using namespace std; const int maxn = 1005; int a[maxn], b[m ...

  4. 洛谷——P3379 【模板】最近公共祖先(LCA)

    P3379 [模板]最近公共祖先(LCA) 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询 ...

  5. JSP的隐藏对象

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/implicit-objects.html: JSP隐式对象是Java对象,JSP容器使隐式对象在每一个页 ...

  6. Java利用jacob实现文档格式转换

    实现文档格式之间的转换,我使用的是jacob-1.7版本,需要jacob.jar来调用activex控件,本机需安装WPS/office,还需要jacob.jar以及jacob.dll 其中:    ...

  7. Spark修炼之道(基础篇)——Linux大数据开发基础:第二节:Linux文件系统、文件夹(一)

    本节主要内容 怎样获取帮助文档 Linux文件系统简单介绍 文件夹操作 訪问权限 1. 怎样获取帮助文档 在实际工作过程其中,常常会忘记命令的使用方式.比如ls命令后面能够跟哪些參数,此时能够使用ma ...

  8. android application类简单介绍(一)

    每次应用程序执行时.应用程序的application类保持实例化的状态. 通过扩展applicaiton类,能够完毕下面3项工作: 1.对android执行时广播的应用程序级事件如低低内做出响应. 2 ...

  9. start com.android.settings/com.android.settings.SubSettings activity

    1. get class name: adb shell shell@android:/mnt/sdcard/books $ dumpsys window windows >dump.txt g ...

  10. 多button事件处理

    private void ButtonClick(object sender, RoutedEventArgs e) { Button cmd = (Button)e.OriginalSource; ...