CSS布局
         div标签:

在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种
布局方式为 div + css 布局。

文档流:

文档流其实就是指浏览器生成页面的顺序。也是浏览器默认的显示规则。

Display(元素显示模式):

用来设置元素的显示方式。

display

block

块对象指的是元素显示为一个方块,默认显示状态下将占据整行,其它的元素只能另起一行显示。

inline

行间对象与block刚好相反,它允许其它元素在同一行显示

inline-block

既有行内元素的特点,又有块级元素的特点

none

隐藏对象

Float(元素的浮动)

用来控制元素是否浮动显示。

Left

向左浮动

right

向右浮动

none

不浮动

浮动的时候元素的显示属性也变化了 变为 “行内元素”

Clear(清除浮动)

none

默认值,允许浮动

left

不允许左边浮动

right

不允许右边浮动

both

不允许浮动

position(元素定位)

static

默认值,无定位

absolute

绝对定位

relative

相对定位

fixed

固定定位

Absolute:

l  脱离文档流。

l  通过
top,bottom,left,right 定位。

l  如果父元素
position 为 static 时,将以body坐标原点进行定位。

如果父元素 position 为 relative  时,将以父元素进行定位。

Relative:

l  相对定位(相对自己原来的位置而言)

l  不脱离文档流

l  参考自身静态位置通过
top,bottom,left,right 定位。

Fixed:

固定定位实际上只是绝对定位的特殊形式;固定定位的元素是相对于浏览器窗口而固定,
而不是相对于其包含元素;即使页面滚动了,它们仍然会处在浏览器窗口中跟原来完全一样的地方。

z-index(元素的层叠关系)

当元素发生重叠时,可以通过 z-index 属性,设置其层叠的先后顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。

默认值为0.

CSS
reset(清除默认样式)

在HTML标签在浏览器里有默认的样式,在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。"覆盖"浏览器的CSS默认属性。也就是把浏览器提供的默认样式覆盖掉!

CSS3的chapter6的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

随机推荐

  1. 20145334赵文豪 《Java程序设计》第1周学习总结

    20145334赵文豪 <Java程序设计>第1周学习总结 教材学习内容总结 第一周的学习在紧张中结束了,我们这周了解了各门课的基本内容与授课形式,在第一周java课程的的学习中我们学习了 ...

  2. phpstorm 实用快捷键 和 注释

    1. 注释   类似 /**退款详情 * @param * @param * @param * @return * @author */ 在方法中引入,直接/**+enter键 2.快捷建 CTRL ...

  3. 利用Sonar规则结合WebStorm进行Code Inspect

    1.目的 在编写代码时会受到公司Sonar规则的限制,不想在编写完成后再对代码进行Inspect,回头再来一个个修正,费时费力. 那么,下面将通过优秀的WebStorm开发工具自身的CodeInspe ...

  4. wpf 将Style应用到 ListView 中的 ListViewItem 元素

    例: 为每个条目元素设置右键菜单 1. 新建右键菜单元素和样式元素 注意: 同时设置样式元素的 TargetType 属性和 x:Key 属性, 将样式元素限定为应用于 ListViewItem 类型 ...

  5. iOS:Xcode8以下真机测试iOS10.0和iOS10.1配置包

    一.介绍 xcode的升级都已经到8系列了,可是还是有很多开发者使用的xcode还是7系列,然而xcode7...最多支持9.3,无法给升级到10.0和10.1的iPhone手机用户进行真机测试.此时 ...

  6. jQuery源代码学习之四——jQuery.callbacks

    自己实现的callbacks模块相较于jquery源代码中的callbacks模块有所简化,表面上看没有考虑firing这个参数,没有对之进行任何处理,即没有考虑在函数执行过程中,再次调用add,re ...

  7. lua2c

    lua2c lua2c is a Lua module and utility to convert Lua 5.1 source code to C API code. http://lua-use ...

  8. DuiLib学习笔记1——编译运行demo

    c++中皮肤问题比较麻烦,MFC自带的太难用.DirectUI界面库就比较强大了,之前像skin++之类的基于DirectUI收费昂贵.DuiLib是基于DirectUI的界面库,可以将用户界面和处理 ...

  9. [Android Tips] 6. Parallax ViewPager

    文章 http://ryanhoo.github.io/blog/2014/07/16/step-by-step-implement-parallax-animation-for-splash-scr ...

  10. IOS开始对App Store大扫除:你的APP更新了吗?

    成都亿合科技小编从北京商报了解到,对于开发APP应用的要注意啦,IOS要开始对App Store大扫除:你的APP更新了吗? 日前苹果App Store的开发者们发送邮件,表示将实施一个持续评估应用行 ...