前端新人学习笔记-------html/css/js基础知识点（三）
这断时间家里有点事，上班也有点任务，所以几天没看视频没来更新了。今天来更新一下了。
一：默认样式重置
但凡是浏览默认的样式，都不要使用。
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 style="float:left;">wo shi div</div>
这个时候div标签就和里面的内容位于同一层级了。
<style>
body{ font-size:20px;}
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
这个时候会出现这样的现象，这就和提升了半个层级有关。
前端新人学习笔记-------html/css/js基础知识点（三）的更多相关文章
- 前端新人学习笔记-------html/css/js基础知识点
即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...
- 前端新人学习笔记-------html/css/js基础知识点（二）
4月7日学到的知识点: 一:<img src="1.png" alt="美女"/> alt是给图片添加介绍,当图片没加载出来时,会直接显示a ...
- 前端开发学习笔记 - 1. Node.JS安装笔记
Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 前端学习：学习笔记（CSS部分）
前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- Linux 学习笔记之超详细基础linux命令 Part 10
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 9----------------- ...
- spring mvc 及NUI前端框架学习笔记
spring mvc 及NUI前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(bus ...
随机推荐
- TCP的那些事（转载）
(转载本站文章请注明作者和出处 酷 壳 – CoolShell.cn ,请勿用于任何商业用途) TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身 ...
- Ubuntu 14.04 下使用IDEA开发Spark应用 入门
网上有很多教程,有用sbt ,也有不用sbt的,看的头大,搞了半天,终于运行成功一个例子,如下: 1.官网下载http://www.jetbrains.com/idea/download/ Inter ...
- 把DEDE的在线文本编辑器换成Kindeditor不显示问题
在织梦论坛下载了[Kindeditor编辑器For DedeCMS],按照操作说明安装后,后台文章编辑的区域却显示空白,有人说不兼容V57版本,有人说不兼容gbk版本,我也纠结了很久,在网上找了很多版 ...
- Hive 4、Hive 的安装配置(远端MyMql模式)
1.remote一体 这种存储方式需要在远端服务器运行一个mysql服务器,并且需要在Hive服务器启动meta服务.这里用mysql的测试服务器,ip位192.168.1.214,新建hive_re ...
- 全国计算机等级考试二级教程-C语言程序设计_第4章_选择结构
switch什么时候用break,什么时候不用break 调用break:一次执行一个分支,输入一个数据,对应一个级别 不调用break:连续执行多个分支 if...else 可以处理任何情况,大于小 ...
- 命名空间“Aspose”中不存在类型或命名空间名称“Slides”。
有可能引用的dll与项目的 .netFramework版本不同,需要确认两个版本是否相同.如果不同,项目右键->属性->应用程序.选择和引用的dll相同的版本.
- eclipse sysout快捷输入启用
Window-Preference-java-editor-content assist-advanced 一定要勾选Template Propasals. 关于Template Propasals: ...
- JSP指令 include 和forward
包括指令:include 静态包括 <%@include file="要包括的文件路径" %> 先将所包括 ...
- 浅析WebGIS
浅析WebGIS 摘要:随着网络的发展,利用Web公布信息越来越普及化.而地理信息系统(GIS)与网络的结合就产生了万维网地理信息系统(WebGIS),它引起了地理信息公布的新的变革,对实现GIS信息 ...
- 【C++学习笔记1】
几个比较容易忘记的东西....... 移动构造函数: Vector(Vector &©) //移动构造函数 { if(copy.A!=NULL) { A=copy.A; cop ...