Several details that need to be paid attention to when using div+css

　　第一个注意点：选择器的使用（标签、class、id）

三种选择器中id（#）的优先级最高，根据id名筛选出唯一元素；

如下输入：#menu{ width:1200px; height:45px; background:#90F}

　　　　　

其次是class（.）的优先级较高，根据id名筛选出唯一元素；

如下输入：.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}

　　　　　

标签优先级最差，根据标签名选中元素；

如下输入：div{text-align:center; vertical-align:middle; line-height:100px}

　　　　　

微软雅黑

　　第二个注意点：外边距margin、内边距padding和流float的使用

外边距margin和内边距padding的使用是相对于边框的调整，四边框按上右下左顺时针调整；

特殊使用：外边距margin一般配合流float来使用，流float给操作的对象规定一个方向（left向左流、right向右流），被操作对象按此按此方向进行布局

如下（导航栏的制作）：

　　　　.text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
　　　　.text:hover{ background-color:#000; color:#F00; cursor:pointer}

　　

　　　　

首页

   　　　　

产品介绍

   　　　　

产品图片

   　　　　

产品参数

   　　　　

关于服务

   　　　　

联系我们

　　

另外，内边距padding：如果加了内边距，该元素会相应的变大，则需要在相应的高度属性中进行调整；

如下输入：

　　　　

height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px">

（这里height由100px调整为80px，加padding效果）

　　第三个注意点：分层z-index的使用条件

使用分层z-index时，要配合位置属性来调整；如果缺少属性位置的设置，则没有显示效果。

如下输入：

　　

　　

#1. Do not use images that are too small for background tiles.

This is why many people don’t use 1px, only then did I know. Tiling an image with a width and height of 1px to an area of ​​200px requires 200*200=40,000 times and takes up resources.

2. No borders.

The recommended writing method is border:none;, haha, I use this all the time. border:0; only defines the border width as zero, but the border style and color will still be parsed by the browser and occupy resources.

3. Use the * wildcard with caution.

The so-called wildcard is to initialize all tags in CSS, regardless of whether they are used or not, outdated or advanced, and treated equally. This consumes a lot of resources. There are optional initialization tags.

4. CSS hexadecimal color code abbreviation.

As I got used to abbreviations and lowercase letters, I realized that it was not the recommended way of writing, in order to reduce the resources occupied by parsing. But it will also increase the file size. Which one is better or worse needs to be carefully verified.

5. Put the style on the head and the script on the foot. Not embedded, only external links.

6. Never use CSS expressions.

7. Use to reference the style sheet instead of importing it through @import.

8. Generally speaking, PNG is smaller than GIF, much smaller. Then again, how much color is wasted in GIFs is well worth optimizing.

9. Never scale images in HTML. One does not look good, and the other takes up resources.

10. It is best to use even numbers for text fonts, 12px, 14px, 16px, the effect is very good. Special case, 15px.

The above is the detailed content of Several details that need to be paid attention to when using div+css. For more information, please follow other related articles on the PHP Chinese website!