怎么说,在各种感觉中h5学习的第二周已经过来了,先总结一下,感觉学习h5是一件让我爱恨交加的事,学会一些新的知识并把它成功运行出来的时候是非常激动和兴奋的,但是有时候搞不懂一个标签或者属性的时候,就有了把电脑砸了的冲动!!!!!!额。。。好吧,再纠结也并没有什么卵用。还是把这周的总结感悟写一下吧。

这周主要接触的H5知识有CSS盒子模型,浮动与定位,HTML的新增结构标签,[html5]表单新增结构标签,以及CSS过渡和动画。

下面讲一下盒子模型和定位

1.CSS盒子模型

在CSS的学习中,盒模型是非常重要的知识点,以下是盒模型的常见知识点

[margin 外边距]
margin属性值最多有四个:
① 写一个值:四个方向的margin均为这个值
② 写两个值:上、右两个方向,下默认=上,左默认=右
③ 写三个值:上、右、下三个方向,左默认=右
④ 写四个值:上、右、下、左 四个方向
⑤ 写三个值+auto:控件居右显示
margin: 50px 30px 20px auto; 距离父容器右侧30px
⑥ margin: 0 auto; 设置控件在父容器中,水平居中
 
[border 边框]
border 有三个属性值:宽度width 样式style 颜色color
原则上,三个属性都需要手动指定(color不写时,默认为黑色)
 
[padding 内边距]
使用方式,同margin①~④
注意:使用padding会将整个控件撑大,使用时需注意控件可视区域的实际小。
 
[border-radius 圆角]
1、可以接受8个属性值: X轴(左上、右上、右下、左下)/Y轴
例如:border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
2、只写X轴时,Y轴默认等于X轴。只写左上角,默认=右下角。只写右上角,默认=左下角
例如:border-radius: 50px 0px ;
=border-radius: 50px 0px 50px 0px;
=border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
3、只写一个数,默认8个值均相等。
 
[box-shadow 盒子阴影]
1、六个属性值,空格分割:
x轴阴影距离:(必选) 可正可负,正——右移 负——左移
y轴阴影距离:(必选) 可正可负,正——下移 负——上移
阴影模糊半径:(可选) 只能为正,默认为0。数值越大,阴影越模糊
阴影扩展半径:(可选) 可正可负,默认为0。数值增大,阴影扩大。数值减小,阴影缩小
阴影颜色:(可选) 默认为黑色
内外阴影:(可选) 可选值:inset(内阴影) 默认为外阴影
 
除此之外,盒模型还有以下知识点
1.

行内盒子的水平外边距

2.

块级盒子的垂直外边距合并

3.

垂直盒子的垂直外边距合并

还有很重要的一点就是解决子盒子添加margin-top时会出现的问题

2.CSS盒子的定位

[相对定位 relative]
1、使用position: relative; 设置元素为相对定位的元素;
2、定位机制:
① 相对于自己原来文档流中的位置定位,当不指定top等定位值时,不会改变元素位置;
② 相对定位元素,仍会占据原有文档流中的位置,而不会释放。
3、使用top、left、bottom、right调整位置。当left和right同时存在,left生效,当top和bottom同时存在,top生效。
 
[绝对定位 absolute]
1、使用position: absolute;设置元素为绝对定位元素。
2、定位机制:
① 相对于第一个非static的祖先元素(即使用了relative/absolute/fixed定位的祖先元素)进行定位。
② 如果所有祖先元素均未定位,则相对于浏览器左上角定位;
③ 使用absolute的元素,会从文档流中完全删除,原有空间释放不再占有;
 
[固定定位 fixed]
1、position: fixed; 是一种特殊的绝对定位,父容器无法使用relative锁住
2、定位机制:永远相对于浏览器进行定位。
 
[z-index 属性]
1、作用:设置定位元素的Z轴层叠顺序
2、使用要求:① 必须是定位元素才能使用。relative/absolute/fixed
② 使用z-index需要考虑父容器的约束。
如果父容器为z-index:auto,则子容器的z-index可以不受父容器的约束;
如果父容器z-index进行了设置,则子容器的层叠将以父容器的z-index为准(在同一父容器的不同子元素,仍可以通过自己的z-index调整层叠关系)。
 
3、z-index:auto & z-index:0 的异同:
① z-index:auto为默认值,与z-index:0处于同一平面。
② z-index:auto,不会约束子元素的z-index层次,而z-index:0,会约束子元素必须与父元素处于同一平面。
 
4、z-index相同(处于同一平面的定位元素)的层叠关系:后来者居上
 
【1、实现块级元素在块级元素中水平垂直居中】
① 设置子容器为定位元素;
② left:50%; margin-left:-width/2;
top:50%; margin-top:-height/2;
 
【2、使用负边距增大元素宽度】
① 不指定子容器宽度,指定高度或填充内容;
② margin: 0px -50px; 可以是左右两边,均超出父容器50px
 
 由于本周末进行了网页项目实战,在此过程中大量利用到盒子和定位,其中要注意的是,定位时一定要注意父子容器的定位关系,父容器一定要约束住子容器。
 
 
 
 
 
 

H5学习第二周的更多相关文章

  1. 【吴恩达课后测验】Course 1 - 神经网络和深度学习 - 第二周测验【中英】

    [中英][吴恩达课后测验]Course 1 - 神经网络和深度学习 - 第二周测验 第2周测验 - 神经网络基础 神经元节点计算什么? [ ]神经元节点先计算激活函数,再计算线性函数(z = Wx + ...

  2. 201671010140. 2016-2017-2 《Java程序设计》java学习第二周

                                 学习第二周(Java基本程序设计结构)      这一周,着重学习了Java的简单程序设计实现及运行,通过自己操作,发现Java的程序语法大面 ...

  3. Java学习第二周学习笔记

    20145307<Java程序设计>第二周学习总结 教材学习内容总结 Java语言中的很多基本语法都和C语言类似,以下Java中的基本语法 标识符 标识符是程序中自定义的一些名称. 由26 ...

  4. H5学习第一周

    已经接触H5一个周了,经过学习,总算对H5有了一些了解和认知,下面就总结一下我对H5的认知和感悟. 首先接触的是H5的常用标签[meta],它有其以下常用属性 1.charset属性.单独使用,设置文 ...

  5. IP通信基础学习第二周

    此周的课程学习应该算是我对此科目真正学校生涯的开始吧,尽管我对该科目仍感到很陌生. 课程一开头,老师就给我们简单的介绍了网络的定义.发展及其分类,重点讲了网络拓扑结构及其在局域网上具体的分层情况.该部 ...

  6. Java学习第二周

    这一周观看了黑马程序员毕向东的教学视频学习了数组的创建:数组元素的使用及遍历,类的声明,成员方法的声明,构造器的声明 数据类型[] 数组名 = new 数据类型[长度];数据类型[] 数组名 = {数 ...

  7. JAVA学习第二周课后作业

    Java 的基本运行单位是类.类由数据成员和函数成员组成.变量之间可以相互转换.String是一个类.static是静态.全局的意思.经过测试,Java的枚举类型定义的Size与String一样都不是 ...

  8. 2019 java学习 第二周总结

    新学期,新气象,新老师,不同的语言学习. 我已经荒废了大一,感觉自己在大一根本没学啥,可能是自己太贪玩了,导致自己学的不精,自己对其他的见解很少. 也有自大的原因,导致自己一直浮在水平面,有实力,有耐 ...

  9. python 学习第二周总复习

    目录 数据类型内置方法 数字类型内置方法 整型 浮点型 字符串类型内置方法 列表类型内置方法 元祖类型内置方法 字典类型内置方法 集合类型内置方法 布尔类型 数据类型总结 拷贝 浅拷贝 深拷贝 053 ...

随机推荐

  1. 自定义ScriptableObject属性显示

    自定义ScriptableObject属性显示的三种方式 1. 继承Editor,重写OnInspectorGUI方法 Editor官方文档 需求 将TestClass中intData属性和strin ...

  2. Java实现的高效计数器

    本文转载地址:            http://blog.csdn.net/snarlfuture/article/details/17049731 在统计来自数据库或文本中某些内容的频率时,你可 ...

  3. Ultimus BPM 房地产与建筑行业应用解决方案

    Ultimus BPM 房地产与建筑行业应用解决方案 行业应用需求 房地产与建筑行业客户业务特点是集团化管控,多区域.多项目.多业态管理,而行业业务往往项目周期长,涉及专业复杂,客户越来越重视管理和跟 ...

  4. 模拟实现简化版List迭代器&嵌入List

    1.迭代器(iterators)概念(1)迭代器是一种抽象的设计概念,其定义为:提供一种方法,使他能够按顺序遍历某个聚合体(容器)所包含的所有元素,但又不需要暴露该容器的内部表现方式. (2)迭代器是 ...

  5. 正则表达式入门案例C#

    ---恢复内容开始--- 在网上百度了好多关于正则表达式的,不过好多都是关于语法的,没有一个具体的案例,有点让人难以入门,毕竟我还是喜欢由具体到抽象的认识.所以我就在这先提供了一个入门小案例(学了了6 ...

  6. MySQL 开启慢查询日志

    1.1 简介 开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能. 1.2 登录数据库查看 [root@localhost lib]# ...

  7. 网络编程应用:基于UDP协议【实现文件下载】--练习

    要求: 基于UDP协议实现文件下载 发送方–请求–接收方发送文件–发送方接收文件 代码: 发送方: package Homework1; import java.io.File; import jav ...

  8. 打开IIS的快捷键

    [windows键+R]→在运行界面输入“inetmgr”→点击回车键,即可以出现IIS界面

  9. 两个HTML,CSS布局实例

    今天首先仿照某公司页面只做了一个几乎一模一样,连距离都相同的页面. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  10. [python标准库]XML模块

    1.什么是XML XML是可扩展标记语言(Extensible Markup Language)的缩写,其中的 标记(markup)是关键部分.您可以创建内容,然后使用限定标记标记它,从而使每个单词. ...