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默认属性。也就是把浏览器提供的默认样式覆盖掉!

时间: 2024-07-30 10:05:01

CSS3的chapter6的相关文章

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<

HTML5 CSS3 诱人的实例: 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

CSS3略谈(中二)

一.3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换.和二维变形一样,三维变形可以使用transform属性来设置 1. 3D移动 l   方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length) l   示例: div:hover{ /*Y轴移动+100px*/ /*transform:translateY(10

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

CSS3特性修改(自定义)浏览器默认滚动条

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角.渐变.rgba等等.最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)[伪类(:hover/:link)].这里写了一个Demo,来看看... 一.HTML <div class="banner_box&qu