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. 可并堆试水--BZOJ1367: [Baltic2004]sequence

    n<=1e6个数,把他们修改成递增序列需把每个数增加或减少的总量最小是多少? 方法一:可以证明最后修改的每个数一定是原序列中的数!于是$n^2$DP(逃) 方法二:把$A_i$改成$A_i-i$ ...

  2. 【Eclipse】eclipse中设置tomcat启动时候的JVM参数

    主要通过以下的几个jvm参数来设置堆内存的: -Xmx512m 最大总堆内存,一般设置为物理内存的1/4 -Xms512m 初始总堆内存,一般将它设置的和最大堆内存一样大,这样就不需要根据当前堆使用情 ...

  3. MU Puzzle HDU - 4662

    Suppose there are the symbols M, I, and U which can be combined to produce strings of symbols called ...

  4. Codeforces 645A Amity Assessment【八数码】

    题目链接: http://codeforces.com/problemset/problem/645/A 题意: 2*2的八数码问题 分析: 这题n为2,不需要搜索,直接判断字母排列顺序就好了. 注意 ...

  5. 激活IDEA 2019.1

    First step: 先下载jar包JetbrainsCrack.jar,把它放到你认为合适的文件夹内, 我放在了安装目录C:\Program Files\JetBrains\IntelliJ ID ...

  6. kill杀死进程方法

    查找进程:ps -ef | grep firefox kill -s 9 1827

  7. 解决confluence的乱码问题

    使用confluence时发现一些含有中文的页面中,中文都变成了问号. 继续搜索解决方案,发现时数据库中数据的格式不对, 在mysql中输入以下命令:   mysql> show variabl ...

  8. C++ - 库函数优先级队列(priority_queue)输出最小值 代码

    库函数优先级队列(priority_queue)输出最小值 代码 本文地址: http://blog.csdn.net/caroline_wendy 库函数优先级队列(priority_queue)的 ...

  9. javascript的继承方法

    一.构造函数继承 该方法最简单,使用call或者apply方法,将父对象的构造函数绑定到子对象上. function Parent(name){ this.name = name; this.colo ...

  10. Highcharts构建加权平均值图表

    Highcharts构建加权平均值图表 加权平均值图表是将图表中多个数据列值.依据加权算法计算获取平均值,并加入生成一个加权折线.在这里,我们直接使用第三方插件Dynamic Weighted Ave ...