怎么说,在各种感觉中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. Unite'17 Shanghai再一次问候

    Unite'17 Shanghai再一次问候 --暨Unity2017年度大会 2017年5月11日,主题为"再一次问候"的Unity年度盛会在上海国际会议中心举行,这是Unity ...

  2. Brief introduction to Cassandra 【Cassandra简介】

    From wikipedia  https://en.wikipedia.org/wiki/CAP_theorem In theoretical computer science, the CAP t ...

  3. NIO原理剖析与Netty初步----浅谈高性能服务器开发(一)

    除特别注明外,本站所有文章均为原创,转载请注明地址 在博主不长的工作经历中,NIO用的并不多,由于使用原生的Java NIO编程的复杂性,大多数时候我们会选择Netty,mina等开源框架,但理解NI ...

  4. Maven学习(三)

    maven相关概念 maven坐标 Maven世界拥有大量构建,当我们需要引用依赖包是,需要用一个用来唯一标识去确定唯一的一个构建.如果拥有了统一规范,就可以把查找工作交给机器. 类似于空间找点的坐标 ...

  5. JQuery模拟实现天猫购物车动画效果

    测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...

  6. openfire muc 移除成员

    muc添加成员到数据库可参考 将Openfire中的MUC改造成类似QQ群一样的永久群 插件 插件是一位大神参考第一篇文章改进后编写的插件,进测试可以直接使用. ------------------- ...

  7. Nim 博弈和 sg 函数

    sg 函数 参考 通俗易懂 论文 几类经典的博弈问题 阶梯博弈: 只考虑奇数号楼梯Nim,若偶数楼梯只作容器,那么游戏变为Nim.题目 翻转硬币: 局面的SG值为局面中每个正面朝上的棋子单一存在时的S ...

  8. python之numpy库[1]

    python-numpy python中的数据 一维数据 用列表和集合表示 数组与列表的关系 列表:数据类型可以不同 数组:数据类型可以相同 多维数据 用列表表示 高维数据 用字典表示 高维数据仅利用 ...

  9. MAVEN总结,整合Eclipse以及配置私服

    对maven的理解 我们知道maven是一个项目管理工具,其核 心特点就是通过maven可以进行jar包的依赖管理,保证jar包版本的一致性,以及可以使多个项目共享jar包,从而能够 在开发大型jav ...

  10. 高防TTCDN

    TCDN是深圳市云中漫网络科技公司高防CDN产品的品牌名称,既可以防御,也可以达到加速的效果,价格实惠.TTCDN适用于WEB应用,可以隐藏源站服务器IP,有效的减轻源站服务器压力,加快全国各地区线路 ...