前端新人学习笔记-html/css/js基础知识点(三)_html/css_WEB-ITnose
一:默认样式重置
但凡是浏览默认的样式,都不要使用。
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
二:块元素和内嵌元素
块元素的特征:
1.默认独占一行;
2.没有宽度时,默认撑满一排;
3.支持所有css命令;
内联元素的特征:
1.同类的标签可以在同排显示;
2.不支持宽高;
3.内容撑开宽度;
4.不支持上下的margin和padding;
5.代码换行被解析;
三:块元素和内嵌元素的转换
display:block 使内联元素具备块属性标签的特性;
display:inline 使块元素具备内嵌元素的特性。
display:inline-block
特性:1.块在一行显示;
2.行内属性标签支持宽高;
3.没有宽度的时候内容撑开;
问题:1.代码换行被解析;
2.ie6,7不支持块属性标签的inline-block;
四:浮动
1.块在一排显示;
2.内联元素也支持宽高了;
3.默认内容撑开宽度;
4.脱离文档流;
5.提升层级半层
这个时候div标签就和里面的内容位于同一层级了。
这个时候会出现这样的现象,这就和提升了半个层级有关。
推荐阅读
-
页面可视化编辑ckeditor(web基础学习笔记十五)_html/css_WEB-ITnose
-
前端开发基础学习笔记(三):知识点--CSS基础
-
2015年9月29日html基础加强学习笔记_html/css_WEB-ITnose
-
2015年9月29日html基础加强学习笔记_html/css_WEB-ITnose
-
web前端学习笔记-scrollWidth,clientWidth,offsetWidth的区别_html/css_WEB-ITnose
-
前端标签记忆-学习笔记_html/css_WEB-ITnose
-
《HTML5与CSS3基础教程》学习笔记 --Three Day_html/css_WEB-ITnose
-
js权威指南-学习笔记01_html/css_WEB-ITnose
-
CSS3秘笈第三版涵盖HTML5学习笔记1~5章_html/css_WEB-ITnose
-
css学习笔记--三种样式表的使用及区别_html/css_WEB-ITnose