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"; /**单列宽度 单行高度 列数 行数*/ ...
随机推荐
- 跪啃SAM
struct SAM { ],size,last,pre[maxn],pos[maxn]; SAM() { size=; memset(ch[],,])); pre[]=-; } int idx(ch ...
- PatentTips – EMC Virtual File System
BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention generally relates to net ...
- The Java library for converting Wikipedia wikitext notation to HTML
https://code.google.com/p/gwtwiki/ The Java Wikipedia API (Bliki engine) is a parser library for con ...
- COGS2479(四维偏序)
题意:给定一个有n个元素的序列,元素编号为1~n,每个元素有三个属性a,b,c,求序列中满足i<j且ai<aj且bi<bj且ci<cj的数对(i,j)的个数. 分析:cdq分治 ...
- hdu3756(三分)
题意:三维坐标轴,有以原点为圆心,底面在xoy平面上,顶点在z轴上的圆锥,问圆锥的最小体积为多少才能完全覆盖空间里的所有点(n<=10000) 分析: 很容易想到转成二维问题,将其投影到xoz平 ...
- 权限框架之Shiro详解(非原创)
文章大纲 一.权限框架介绍二.Shiro基础介绍三.Spring Boot整合Shiro代码实战四.项目源码与资料下载五.参考文章 一.权限框架介绍 1. 什么是权限管理 权限管理属于系统安全 ...
- hadoop(1)入门
hadoop入门(一) 一.概述 1.什么是hadoop hadoop不仅是一个用于存储分布式文件系统,还是设计用来在有通用计算设备组成的大型集群上执行的分布式应用的基础框架. hadoop框架最 ...
- Servlet的Cookies处理
以下内容引用自http://wiki.jikexueyuan.com/project/servlet/cookies-handling.html: Cookies是存储在客户端计算机上的文本文件,用于 ...
- OCP知识点讲解 之 队列、资源与锁:RHCA|OCM|CCIE RedHat大中华地区前50位RHCA系统架构师:叶绍琛
一.队列与共享资源 共享资源可以被多个会话.进程同时访问,因此它的访问需要保护.Oracle中,除了PGA,所有的东西(包括内存.磁盘.CPU.表.索引.事务等等,种类太多,一概用东西两字来代表) ...
- Java正则表达式过滤出字母、数字和中文
原文:http://blog.csdn.net/k21325/article/details/54090066 1.Java中过滤出字母.数字和中文的正则表达式 (1)过滤出字母的正则表达式 [^(A ...