这部分是html细节知识的学习。

快速入门系列--HTML-01简介

快速入门系列--HTML-02基础元素

快速入门系列--HTML-03高级元素和布局

快速入门系列--HTML-04进阶概念

边框、填充、对齐和浮动

这部分将主要介绍使用CSS控制整个Web页面的各个方面，通常来说，会使用margin（外部）和padding（内部性增加元素周围的空间，使用align和float设置元素的相对位置。对于margin来说，可以使用margin-top/right/bottom/left设置，记住顺序为顺时针，同时注意在设置百分比边距时，一定记住是相对的百分比，比如外部容器为页面的25%，那么内部的margin:25%其实是这25%的25%。此外，如果有两个带边框的元素彼此堆叠在一起，但他们之间没有边距，那么它们接触的位置似乎有双边框，可以同时将这两个边框减半，达到美观的效果。

常见的对齐包括text-align水平对齐，vertical-align垂直对齐，前者可以设置为left,right,center,justify两端对齐，后者可以设置为top元素的顶部与当前行对齐，middle元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。对于float来说，一定要注意窗口的大小，当宽度不足时，会造成块元素的换行，对原有样式产生较大影响。此外，不要注意当需要去除浮动的影响时，可以使用clear属性，包括left,right,both,none和inherit，指定clear:left确保左边不允许出现其他的浮动元素。

方框模型和定位

HTML中的每个元素被视为一个方框，在考虑元素的真正高度和宽度时，就必须把方框模型的所有元素都考虑在内，通过下图对方框模型有个形象的了解。

因此元素的总高度实际上是width + padding-left + padding-right + border-left + border-right + margin-left + margin-right，在实际项目中，一定不要忘了设置默认的边距属性，因为不同浏览器会有差异。

相对定位是HTML使用的默认定位类型position:relative，可以把其当做跳棋的布置，从左到右排列，达到边缘就移到下一行，而另外一种是绝对定位position:absolute，允许设置HTML内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。

接下来讨论元素周围的内容流，首先得一个概念是当前行，其表示一个用于在页面上放置元素的不可见的行，这一行涉及页面上的元素留，当在页面的水平和垂直方向上一个接一个的排列元素时，它就可以派上用场。通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏，scroll可以给元素增加滚动条。

Tip:验证样式表，http://jigsaw.w3.org/css-validator/

固定布局和流式布局

一个非常有名的博客平台WordPress(wordpress.org/themes),有空的时候非常推荐看看，对于nodejs来说,ghost是一个不错的开源应用。对于大部分的web站点来说，一般会使用固定布局、流动布局或响应式布局，尤其针对现在的多终端环境来说，合理的折中是固定/流动混合布局，或者响应式的布局。在设置时，可以使用min-width（不包括填充、边框和边距）来保证流动式布局至少可以达到最基本的显示效果。在2010年，设计师Ethan Marcotte创造了术语响应式web设计，主要涉及一个媒体查询的概念，一个简单的示例如下。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="xxx.css">

Tip:em(字母m的宽度)的使用，用于弹性布局，不过该方式构建web页面将非常麻烦，此外在页面中，经常可以使用-1000em等方式，隐藏元素。

CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于<li>标签中，outside（默认值）则相反，而将list-style设置为none可以保证列表项前不会上放置任何图标。

CSS设计导航系统：不同于简单的项目符号或编号列表，导航元素一般会需要如下特性：用户鼠标光标会改变，以指示元素是可单击的；当鼠标悬停在元素上时，元素周围的区域会改变外观；内容区域在视觉上显得与普通文本不同。比如相对于页面中的链接元素，nav中的链接元素可以使用text-decoration:none属性来去除蓝色下划线，为了表示出样式的不同，可以使用伪类选择器nav li a:link, nav li a:visited和nav li a:hover, nav li a:active两组。此外，如果需要实现水平导航，可以将ul和li的display属性设置为inline，还可以设置line-height的高度。

使用鼠标修改文本显示：这部分首先介绍一个工具提示的例子，如下所示，同时可以使用类似方式利用CSS显示额外的翻转文本，而通常更为常见的通过不同的事件触发显示不同样式的例子这儿就不一一介绍了。

 <head>
 <meta charset="utf-8">
 <title>实现hit, tooltip效果</title>
 <style type="text/css">
 a{
 text-decoration: none;
 font-weight: bold;
 }
 a.tip{
 position: relative;
 z-index: 24;
 }
 a.tip:hover{
 z-index: 25;
 }
 a.tip span{
 display: none;
 }
 a.tip:hover span{
 font-weight: normal;
 font-style: italic;
 display: block;
 position: absolute;
 top: 20px;
 left: 25px;
 width: 150px;
 padding-left: 3px;
 border:1px solid #000;
 background-color: #ddd;
 color: #000;
 }
 </style>
 </head>
 <body>
 <a href="http://www.ctrip.com" class="tip">Ctrip<span>一个不错的公司</span></a>
 </body>

在介绍CSS3变形transformation,渐变transition和动画animation之前，需要了解浏览器的差异，比如chrome和safari使用-webkit，firefox使用-moz，微软使用-ms,Opera使用-o前缀，这是基于不同浏览器内核决定的。对于2D图形，可以使用transform:translate(x,y)平移元素，使用rotate(45deg)旋转元素，使用scale(.5)缩放元素，skewX(45deg)扭曲元素。

对于3D图像来说，需要在2D图形的基础上增加Z轴深度，通常通过透视图perspective来绘制图形，提供从特定点(vanishing point没影点)查看它们彼此之间的高度、宽度和深度。使用方式为perspective:500px, transform-style:preserve-3d,rotate(180deg), translateZ(75px)。CSS的渐变可以通过transition:transform 5s ease-in 1s;

而对于动画来说，有一个关键的概念，即关键帧，@keyframes spin{ from {} to {}}, animation:spin 5s infinite linear，看到这不经想到还是jQuery方便。

该部分内容比较复杂，在之后使用到时再回顾学习。

参考资料：

  1. 版) [M]. 北京:人民邮电出版社, 2014.

Html与CSS快速入门03-CSS基础应用的更多相关文章

  1. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  2. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  3. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  4. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  5. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

  6. [转]快速入门系列--WebAPI--01基础

    本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...

  7. C#快速入门笔记(1)——基础语法

    C#快速入门笔记(1)——基础语法 总体框架:

  8. CSS快速入门基础篇，让你快速上手（附带代码案例）

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

  9. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

随机推荐

  1. 微信小视频复制到手机本地Android APP 分享

    因为需要将拍的宝宝的微信小视频上传到亲宝宝软件,每次去手动找文件比较麻烦,所以做了个微信视频复制到手机本地的APP,做工虽然粗糙,但是绝对实用, 下载地址 http://pan.baidu.com/s ...

  2. NPIO 导出记录

    http://www.cnblogs.com/qingyuan/archive/2012/11/08/2760034.html http://www.cnblogs.com/gaoshuai/arch ...

  3. web攻防

    1.内网渗透端口转发: 在被控制机上执行: lcx.exe -slave 216.32.*.*(一个外网ip) 51  192.168.2.32(内网ip)  端口号 在本机上执行: lcx.exe ...

  4. Ubuntu 12.04 改造指南

    文章转自:http://www.lupaworld.com/article-217719-1.html 升级12.04已经有一段时间了.作为一个从08年就开始用Ubuntu的老用户,我觉得作为一个LT ...

  5. mysqld 已死，但是 subsys 被锁

    1. Obviously the 'ole check the log file for anything nasty cat /var/log/mysqld.log 2. Stop the serv ...

  6. label正确显示多行数据

    label显示多行文字时会遇到文字中包含换行符“\n”,这时需要对字符进行全部替换, if(labelContent.indexOf('\\n')>0){labelContent=labelCo ...

  7. php+redis window

    http://download.csdn.net/detail/qwfy326/6572443 wampserver2.2e-php5.3.13-httpd2.2.22-mysql5.5.24-x64

  8. PyCharm 3.0 发布，提供免费开源版本

    PyCharm 发布最新的 3.0 版本,该版本新特性详见: http://www.jetbrains.com/pycharm/whatsnew/index.html 该版本最主要的是提供了免费开源的 ...

  9. SQL入门经典(二) 之数据库基本查询、添加、更新和删除

    使用SQL查询: SQL查询基本语法: SELECT [ALL|DISTINCT]  [TOP (<expression>) [PERCENT] [WITH TIES] ] <col ...

  10. DWZ错误的解决：0x800a13af - Microsoft JScript 运行时错误: 重新声明常量“document”

    在写完Login后,需要跳转到Index中,就是DWZ的主界面,结果出现如下问题: 0x800a13af - Microsoft JScript 运行时错误: 重新声明常量“document” 费了很 ...