这断时间家里有点事，上班也有点任务，所以几天没看视频没来更新了。今天来更新一下了。

一：默认样式重置

但凡是浏览默认的样式，都不要使用。

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基础知识点（三）的更多相关文章

  1. 前端新人学习笔记-------html/css/js基础知识点

    即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日 ...

  2. 前端新人学习笔记-------html/css/js基础知识点（二）

    4月7日学到的知识点:     一:<img src="1.png" alt="美女"/> alt是给图片添加介绍,当图片没加载出来时,会直接显示a ...

  3. 前端开发学习笔记 - 1. Node.JS安装笔记

    Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...

  4. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  5. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  6. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  7. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  8. Linux 学习笔记之超详细基础linux命令 Part 10

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 9----------------- ...

  9. spring mvc 及NUI前端框架学习笔记

    spring mvc 及NUI前端框架学习笔记 页面传值 一.同一页面 直接通过$J.getbyName("id").setValue(id); Set值即可 二.跳转页面(bus ...

随机推荐

  1. ID3决策树算法原理及C++实现(其中代码转自别人的博客)

    分类是数据挖掘中十分重要的组成部分.分类作为一种无监督学习方式被广泛的使用. 之前关于"数据挖掘中十大经典算法"中,基于ID3核心思想的分类算法C4.5榜上有名.所以不难看出ID3 ...

  2. 【Java】使用Runtime执行其他程序

    public class ExecDemo{ public static void main(String[] args) { Runtime r = Runtime.getRuntime(); Pr ...

  3. bat命令学习笔记

    1.一般在开始声明 setlocal enabledelayedexpansion 设置本地为延迟扩展.其实也就是:延迟变量,全称延迟环境变量扩展,使得批处理能够感知到变量的动态变化,在运行过程中给变 ...

  4. C#中静态与非静态方法比较【转】

    C#静态方法与非静态方法的区别不仅仅是概念上的,那么他们有什么具体的区别呢?让我们通过本文向你做一下解析. C#的类中可以包含两种方法:C#静态方法与非静态方法.那么他们的定义有什么不同呢?他们在使用 ...

  5. 【iOS开发-35】有了ARC内存管理机制，是否还须要操心内存溢出等问题？——面试必备

    答案:必需要操心啊,ARC也不是万能的. 这里主要是涉及到集合类的数据类型. 比方数组,我们定义了一个可变数组muarr1,然后把一个对象p1加到muarr1中,此时会对这个对象retain一次,相当 ...

  6. 固定表格行列(expression)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  7. 用SQL将查询出来的多列的值拼接成一个字符串【转载】

    MySQL中: [sql] view plaincopyprint? -- 单列拼接,先查出一行,再加上逗号,接着拼接 查出的下一行 select group_concat(E.SUPPORT) fr ...

  8. mysql学习（十一）嵌套查询 排序 分组

    select * from products where id in(select id from cats where name like '%java%');//查找类型中名字中包含java的的商 ...

  9. jQuery 动态绑定的点击事件

    $(function () { , $_div = $('#test'); $('input[name=addbtn]').on('click', function () { $_div.append ...

  10. Android.Hacks.01_Centering views using weights

    Android.Hacks读书笔记01 #1#权重布局之解析: LinearLayout ’s android:weightSum      LinearLayout ’s child android ...