CSS3初学篇章_7(布局/浏览器默认样式重置)

CSS布局
说到布局，就不得不提布局的核心<div>标签，它与其它标签一样，也是一个XHTML所支持的标签，专门用于布局设计的容器标签。在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，
仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种
布局方式为 div + css 布局。

语义元素

<figure>：标签规定独立的流内容（图像、图表、照片、代码等等），元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption>：标签定义 <figure> 元素的标题，被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>

<img src="url" alt="图片" width="宽度" height="高度">

<figcaption>这是标题</figcaption>

</figure>

CSS3初学篇章_7(布局/浏览器默认样式重置)

1.display(元素显示模式)

语法：display : block | none | inline | inline-block

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

block：块对象指的是元素显示为一个方块，默认显示状态下将占据整行，其它的元素只能另起一行显示。
inline：行间对象与block刚好相反，它允许其它元素在同一行显示。
none：隐藏对象

div{display:block}

2.float（元素的浮动）
语法：float : none | left | right
说明：用来控制元素是否浮动显示，浮动的时候元素的显示属性也变化了变为 “行内元素”。浮动的目的就是要打破文档流的默认显示规则，有的时候为了让元素按照我们的意愿进行显示，就要利用float属性。

注意：
1.任何申明为 float 的元素自动被设置为一个“块级元素”。
2.在标准浏览器中浮动元素脱离了文档流，所以浮动元素后的元素会占据浮动元素本来
应该所处的位置。
3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
4.文字内容会围绕在浮动元素周围。
5.浮动元素只能浮动至左侧或者右侧。

div{ float:left;}

3.clear（清除浮动）
语法：clear : none | left | right | both

说明：既然有浮动，自然有清除浮动，它的存在意义与浮动相同，都是为了页面布局。

none :默认值。允许两边都可以有浮动对象
left :不允许左边有浮动对象
right: 不允许右边有浮动对象
both :不允许有浮动对象

div { clear:both；}

4.position(元素的定位)
语法：position : static | absolute | fixed | relative

static : 无定位，默认值
absolute：绝对定位
relative ：相对定位
fixed：固定定位

absolute 说明：
脱离文档流。
通过 top,bottom,left,right 定位。
如果父元素 position 为 static 时，将以body坐标原点进行定位。
如果父元素 position 为 relative 时，将以父元素进行定位。

div { position:absolute; left:100px; top:100px;}

elative说明：
相对定位（相对自己原来的位置而言）

不脱离文档流
参考自身静态位置通过 top,bottom,left,right 定位。

div { position: relative; left:100px; top:100px;}

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

div { position: fixed; right:; bottom:;}

5.z-index(元素的层叠关系）：
语法：z-index : auto | number

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

div { z-index:}

CSS reset

　　在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。"覆盖"浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

最简单的reset:

*{margin:;padding:;}

注：一般CSS reset不需要自己去写，可以去使用网上大神开源的css文件，http://cssreset.com/

秒客网

CSS3初学篇章_7(布局/浏览器默认样式重置)

相关文章