html/css 的基础知识

在编写页面时,首先是布局,注意html的合理嵌套,行内元素不能内嵌块元素的低级错误。再就是表现与行为相分离!

所谓表现就是页面上的呈现形式,如鼠标移动/划过时的一些样式性的操作,用class标签,而元素的行为如button,就用id!

首先说说样式的一般设置: 我们浏览网页可以打开F12,查看元素的style 样式。

一:样式重置 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0;padding:0; }

或是 *{margin:0;padding:0;};

body{font-size:12px; font-family:Arial,"宋体"; color:#666;}/*根据整体网页设置出基本的字体样式。*/

ol,ul{list-style:none;padding:0;margin:0;} a{text-decoration:none;} img{border:none;}

 

二:块元素和内嵌元素

块元素的特征:

1.默认独占一行;

2.支持所有css命令;

内联元素的特征:(如span)

1.同类的标签可以在同排显示;

2.不支持宽高;

3.内容撑开宽度;

4.不支持上下的margin和padding;

5.代码换行被解析; 改变行内元素和块元素的表现形式可以用display: block/inline-block 详见:http://www.w3school.com.cn/cssref/pr_class_display.asp

三:块元素和内嵌元素的转换

display:block 使内联元素具备块属性标签的特性;

display:inline 使块元素具备内嵌元素的特性。

display:inline-block

特性:1.块在一行显示;

2.行内属性标签支持宽高;

3.没有宽度的时候内容撑开;

问题:1.代码换行被解析;

         2.ie6,7不支持块属性标签的inline-block;

        解决:ul li{display:inline-block; *zoom:1;*display:inline\9;}

四:定位 position

absolute :相对于 static 定位以外的第一个父元素进行定位; 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框

relative: 相对定位,相对于其正常位置进行定位。

fixed:固定定位,相对于浏览器窗口进行定位。一般用在页面 的返回顶部的元素样式设置。

用z-index:value;来解决其层级问题!

五:浮动 1.块在一排显示; 2.内联元素也支持宽高了; 3.默认内容撑开宽度; 4.脱离文档流; 5.提升层级半层

 
box1
box2
posted @ 2016-04-14 15:53  studentNina  阅读(231)  评论(0编辑  收藏  举报