CSS3的chapter6
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的更多相关文章
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
随机推荐
- 在HTML文件的表单中添加{%csrf_token%}便可以解决问题
原因是django为了在用户提交表单时防止跨站攻击所做的保护 只需在HTML文件的表单中添加{%csrf_token%}便可以解决问题 ------------------------if判断{% i ...
- Python一般错误
1. IndentationError: unindent does not match any outer indentation level 格式对齐的问题.Python对空格和Tab有严格区别
- java数据结构
1.计算机科技的两大支柱 1.数据结构 2.算法 程序=数据结构+算法 2.定义:是一门研究非数值计算的程序设计问题中计算机的操作对象以及它们之间的关系和操作等等的学科 3.数据(Data):是对信息 ...
- Windows内核 WDM驱动程序的基本结构和实例
WDM驱动的基本结构: WDM驱动模型是建立在NT式驱动程序模型基础之上的.对于WDM驱动程序来说,一般都是基于分层的,即完成一个设备的操作,至少要由两个驱动设备共同完成. 1)物理设备对象和功能设备 ...
- 增强for循环
import java.util.ArrayList; import java.util.HashMap; import java.util.Iterator; import java.util.Li ...
- C# 模拟鼠标移动与点击
我们需要用到的mouse_event函数,位于user32.dll这个库文件里面,所以我们要先声明引用. [System.Runtime.InteropServices.DllImport(" ...
- iOS 3D touch 使用技巧
第一个 在桌面中3d Touch 打开菜单 由于本人纯属代码党,本次实现方法也只使用代码实现 到达到这个效果并不难,只需要在appdelegate中实现以下代码即可 ,当然也有缺点,就是这个app没运 ...
- CSS成长之路----知识点篇
一,ul--li列表水平排列,切居中对齐 主要是利用Li标签中的display属性.设置为display:inline,使li纵向排布,且能够使用text-align:center;使其居中显示 HT ...
- 【五子棋AI循序渐进】——整合完成
经过一年多的学习和探索,终于在今天得到了一些回报,在实现PVS多线程和加入了一个新的启发模式之后,搜索速度达到了120K左右,现在整合了VCF/VCT引擎.PVS混合引擎之后,棋力与连珠fiver6基 ...
- adadmin: error while loading shared libraries: libclntsh.so.10.1
EBS R12.2运行adadmin报错: $ adadmin adadmin: error while loading shared libraries: libclntsh.so.10.1: ca ...