之前第一次接触html，一直使用table进行布局，十分麻烦还相当丑陋，造成当初并没有多大的兴趣，直到半年前开始接触到了使用div+css编写页面，才对它有了兴趣。作为一个菜鸟记录自己的点滴教训与收获，主要还是给自己看的，也希望对以后想要学习的同学有所帮助，同时也还请各位前辈多多指出不足。

1      减少无意义标签的使用

简单的举个例子：

对于这个顶部的结构，

错误：通栏>版心>左边+(右边>ul>li*9>a)

正确：通栏>版心>左边+(ul>li*9>a)

对于右边的部分，不需要使用一个div包裹ul，明明一个ul就可以实现何必使用多余的div标签进行嵌套呢。所以在编写过程中明明可以用一个标签解决的，不要使用无意义的标签多层嵌套。

2      关于命名

以前学习java，因为英语不好，喜欢用拼音命名，这样做不好，虽然一开始学习就知道，但是并不是很注意。在身边人的提醒下，尤其自己也感觉用拼音的不便性，纠正，以后要更注意命名。英语不好没关系，这不是还有有道和度娘吗？

再有就是标签发生嵌套时候的命名。一般同一层级的标签的命名问题不是很大，只需要使用一个单词就可以。但是当发生嵌套的时候就需要使用“-”进行连接，不然很容易自己分不清哪个标签是哪个。比如以上那个顶部通栏可以使用top命名整个，右边部分可以叫top-right，后面可能还会有top-right-detail-link如果太长就可以缩写为top-r-d-link，还是太长甚至可以缩写为trd-link，注意是太长才缩写，短的话为了保证意思的理解不用缩写，另外最后一个单词为了理解也最好不要缩写。

3      特殊符号的使用

上面那个下拉箭头是使用菱形符号◇制作的，使用了两个标签进行嵌套书写，

<i><s>◇</s></i>

s标签使用position控制需要显示部分的位置，i标签控制窗口大小，同时隐藏溢出。

 i {

     width: 15px;

     height: 8px;

     position: relative;

     overflow: hidden;

 }

 i s {

     font: 400 14px/14px consolas;

     position: absolute;

     top: -6px;

 }

以上是通行的做法，作为菜鸟，在不考虑兼容的情况下，感觉使用一个标签就可以解决，对于字符使用行高控制垂直位置，用宽高限制显示区域。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>测试</title>

     <style>

         i {

             display: inline-block;

             height: 50px;

             width: 100px;

             overflow: hidden;

             font: 400 100px/0px SimSun;

         }

     </style>

 </head>

 <body>

 <i>◇</i>

 </body>

 </html>

这是效果：  

目前只是测试了在谷歌，火狐下的效果，没有问题，有什么不妥之处还请指出。

4      相邻行内块元素之间的距离

上面的导航如果使用转化为行内块元素，那么相邻两个元素之间就会有几像素的距离，可能粗看看不出来，但是放大以后可以看见，解决这个问题的唯一办法就只能使用浮动。

5      数值的连写：

在css中有一些属性的值可以连写。比如padding、border-radius。前者为上、右、下、左，后者四个方向为左上、右上、右下、左下。它们都是顺时针方向排列的，只是起点不同。如果将四个方向看作a、b、c、d。那么当后面书写连续的2个数值时代表的是：ac、bd；3个数值代表a、bd、c；4个数值不用说代表的就是a、b、c、d了。

6      清除浮动

清除浮动的方法有4种，最普遍的是使用伪元素。

 .clearfix:before, .clearfix:after {

     content: "";

     display: table;

 }

 .clearfix:after {

     clear: both;

 }

 .clearfix {

     *zoom:; /*IE/7/6*/  /*兼容IE6下的写法*/

 }

7     
设置高度

上面讲到浮动突然想到关于的板块高度的问题，一般来说尽量不要使用一个固定的高度把一个板块写死，不要写死！不要写死！不要写死！重要的事情说3遍。写死了怎么做响应式？

8     
元素的margin,padding

对于所有元素margin和padding的水平方向（左右）都是起作用的，只有行内元素的垂直方向（上下）是不起支撑作用的。需要注意的是padding可以将元素边框撑大，但是并不会将元素挤离原来的垂直位置。

9     
相对定位与绝对定位的使用

定位总共有四种：绝对定位、相对定位、固定定位、静态定位。后两种定位，没有什么好说的，就是前面的两种定位，需要注意的是相对定位会占据原来文档流的位置，而绝对定位则不占据原来的文档流位置，所以在需要使用定位的时候，需要按照实际情况，具体情况具体分析，考虑到底是使用相对定位还是使用绝对定位。举个栗子：

 * { margin:; padding:; color: #fff; font-size: 20px; }

         .nav { height: 30px; background-color: pink; border-bottom: 4px solid red; }

         .w { width: 100px; margin: 0 100px; position: relative; height: 30px; z-index:; }

         .nav-list { height: 30px; background-color: red; }

         .left { width: 100%; height: 400px; background-color: peru; position: absolute; }

         .b { margin-left: 210px; width: 100px; height: 100px; background-color: lightblue; position: relative; }
 <div class="nav">

     <div class="w">

         <div class="nav-list">list</div>

         <div class="nav-list">list</div>

         <div class="nav-list">list</div>

         <div class="nav-list">list</div>

         <div class="nav-list">list</div>

     </div>

 </div>

 <div class="left">left</div>

 <div class="b">b</div>

List属于上面部分，left为底层的广告，b是下面板块的内容，如果完全使用相对定位和绝对定位解决问题，那么left为了不影响下面的板块应该使用absolute，这样的话超过上面部分的list就会被遮盖，所以要给list的父盒子设置一定的层级，照道理来说需要使用relative去占据上面部分的位置，因为他依旧属于上面的部分。这样的话需要给b也设置relative，为了不被遮挡还需要设置左外边距。

10  使用定位居中元素

块级元素的水平居中可以使用margin：0 auto；使用定位解决的办法是：设置定位后设置left（top）为50%，再使用margin-left回退自己身位的一半。

height: 20px;

width: 50px;

position: absolute;

left: 50%;

margin-left: -25px;

11  背景和图片

经常被问到应该什么情况下使用img插入图片，什么时候用背景。简单得讲我认为，一般的网站里的图标都用背景，具体涉及到某件产品那么使用img图片。

html、css基础注意点的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  10. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. 【前端】使用readline模块实现Node.js的输入输出

    'use strict'; function f(x) { // do something... } var readline = require('readline'); //创建readline接 ...

  2. Android开发——搭建最新版本的Android开发环境

    http://www.cnblogs.com/smyhvae/p/3788534.html http://www.cnblogs.com/xdp-gacl/p/4322165.html http:// ...

  3. Android二维码功能实现，在程序内嵌入ZXing项目

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9526247 最近二维码真是越来越火了,随便电视上.网络上.商场里,到处都是二维码. ...

  4. background-position （转）

    http://blog.csdn.net/JeamKing/article/details/5617088   注:这是别人博客链接地址  具体效果图片可以查看此链接 语法:background-po ...

  5. 换个新的思路 代替解压jar包 例证：wechat4j 框架中的templateMsg类

    很多朋友在写java的程序的时候都喜欢用第三方的jar包和框架,有可能遇到jar包中的内容已经跟不上官方开发者文档的更新,导致部分内容出错了,这个时候可能就要放弃这个jar的使用,但是这个jar中的其 ...

  6. Linux-设置固定IP

    第一步:激活网卡 系统装好后默认的网卡是eth0,用下面的命令将这块网卡激活. # ifconfig eth0 up 第二步:设置网卡进入系统时启动 想要每次开机就可以自动获取IP地址上网,就要设置网 ...

  7. html5画布基础

    canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

  8. Error:No suitable device found: no device found for connection "System eth0"

    环境描述: Vmware 故障说明: 在克隆几台虚拟机,发现启动后不能配置IP地址等信息,使用linux命令: “ifup eth0”也不能激活网卡, 而在使用"service networ ...

  9. mybatis入门_mybatis基本原理以及入门程序

    一.传统jdbc存在的问题 1.创建数据库的连接存在大量的硬编码, 2.执行statement时存在硬编码. 3.频繁的开启和关闭数据库连接,会严重影响数据库的性能,浪费数据库的资源. 4.存在大量的 ...

  10. (十一)socket、connect、bind函数详解

    一.socket函数 1.头文件: #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> 2.函数原型: ...