html,body最顶层元素.

1,元素百比分是相对父元素,所有元素默认父元素是body.

absolute,fixed[只有一个父元素,浏览器窗口]除外[浏览器窗口,为父元素].
css3:vh,vw也永远相对,浏览器窗口.height: 10% == 10vh
box-sizing: border-box; width包有padding;
2,设定height,width父元素,子元素不能撑开父元素。子元素溢出,可以用overfloat:hidden。
3,inline无height,width.内容决定大小.
4,inline,inline-block都会受到lineheight、fontsize以及vertical-align的共同影响,
设置下{vertical-align:top}或者 bottom.
5,
浮动元素
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"",
display:block;
clear:both
}
6,
.clearfix{
*zoom:1;
clear:both
}
7,margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom 都以父元素width。这点记住。
display:flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
order: <integer>;
flex-grow: <number>;
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto;
flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
8.calc(100% - 25px);word-break: break-all;换行 word-wrap: break-word 换行[换行后,如果不是一个word 还要换行]white-space: nowrap;不换行.word-spacing:-3px;letter-Spacing = ‘-.15em‘;字符间距.
transform:translate(-50%,-50%) 自身高度,宽度50% 平移
9,http://codepen.io/jianyeruan/pen/NNGMPN 排板记住看一下:
display:
block
inline
inline-block
float:left
position:
relative
absolute 脱离文档流,元父元素,浏览器窗口,为父元素,相对显屏.left,top,bottom,right属性.文档
fixed 脱离文档流,永远以浏览器窗口,为父元素.
11

时间: 2024-10-22 09:20:51

html,body最顶层元素.的相关文章

JavaScript事件代理和事件委托

一.概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台

谈谈Ext JS的组件——容器与布局

概述 在页面中,比較棘手的地方就是布局.而要实现布局.就得有能维护布局的容器. 能够说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最优秀的一个,而这得益于它强大的容器类和丰富的布局类.在本文将介绍Ext JS的容器组合和布局类. 容器:Ext.container.Container 容器的主要功能是管理其内部的组件.因而在继承Ext.Component的所有功能的基础上.加入了相应的用来处理内部组件的方法add.insert.remove和removeAll. 在配置

【repost】JavaScript 事件模型 事件处理机制

什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. 今天的事件 在漫长的演变史,我们已经告

Tomcat 学习心得

Tomcat Server的结构图 Tomcat服务器的启动是基于一个server.xml文件的,Tomcat启动的时候首先会启动一个Server,Server里面就会启动Service,Service里面就会启动多个"Connector(连接器)",每一个连接器都在等待客户机的连接,当有用户使用浏览器去访问服务器上面的web资源时,首先是连接到Connector(连接器),Connector(连接器)是不处理用户的请求的,而是将用户的请求交给一个Engine(引擎)去处理,Engin

实用的60个CSS代码片段

1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 使用这个技巧,从单行文本.段落到box,都会垂直对齐.目前浏览器

SQLdiag-配置文件

前一篇我们已经使用默认配置文件收集了部分诊断数据,并且知道配置文件会影响收集数据的内容.这一篇我们重点讲述配置文件的操作.可使用XML模板控制SQLdiag使用的收集器.每个收集器可以使用配置文件的<enabled="true">或<enabled="false">来启用或禁用.使用自己最喜欢的文件编辑器,甚至在支持XML文档编辑的Management Studio中修改XML配置文件.不要从XML文件中删除收集器,因为如果XML文件不能匹配

Tomcat 基本配置(转)

转自:http://blog.csdn.net/jubincn/article/details/4856293 目录(?)[+] Tomcat 基本配置 tomcat读取配置文件 首先简单说一下tomcat是如何读取配置文件的.tomcat在启动时,首先找系统变量CATALINA_BASE,如果没有,则找CATALINA_HOME.然后找这个变量所指的目录下的conf文件夹,从中读取配置文件. 最重要的配置文件:server.xml 要配置tomcat,基本上了解server.xml,conte

JS入门经典笔记

1,转义字符 \b 退格字符   \f 换页符   \n 换行字符  \r 回车字符  \t 制表符  \'单引号 \"双引号 \\ 反斜线 \xNN 其中NN是一个十六进制数,表示Latin-1字符集中的编号来表示一个字 2.parseInt()函数与parseFloat()函数把字符串转换为整数和浮点数   这两个函数逐字解析,如果解析到的字符不是有效数字,解析将停止,并把解析到之前的字符串转换为对应的数值.如parseInt("123abc")将返回数值123,当jav

android 入门

1.Android工程的文件系统结构 src:    java源代码存放的目录.在src文件夹里面可以建立若干个包,用以分类存放Java源程序(.java文件) gen:  自动生成目录  gen目录中存放所有由Andriod开发工具自动生成的文件.目录中最重要的就是R.java文件(gen\包名\R.java).开发工具会自动根据你放入res目录的资源,同步更新修改R.java文件.由于R.java文件是由开发工具自动生成,应避免手工修改R.java.R.java在应用中起到了字典的作用,它包