编写中发现的一些小技巧与经验，内涵尚浅，大虾请忽视（长期更新）。

来源：互联网发布：白袍巫师甘道夫知乎编辑：程序博客网时间：2024/05/16 15:30

1.在css中，部分元素可以直接使用 margin:0 auto; 使其居中，如<ol><ul>;

部分元素不能通过上述指令使其居中，可以在父辈元素的css属性中使用 text-align:center; 如<img>;

2.有时候，使文字竖直居中是一件麻烦的事情，其实可以通过将元素行高设置成和父辈高一样来轻松解决，

在CSS元素中，可以使用line-height:XXpx; 将行高与所在框体元素高度设置成相同。

3.给页面标题加上小图标，只要使用<link rel=”shortcut icon” href=”iconname.ico”>,

用法和导入CSS一样，http://www.bitbug.net/ 这个网站可以制作ico图标文件！~~

4.使用CSS的过渡，可以给元素加上简单的动画效果，比如放大、缩小、旋转。

例：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Magic夜灵(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

5.很多人都喜欢开篇用 *{margin:0；padding:0;}来清除边距，但通配符会囊括所有元素，使得浏览器在所有元素中索引一遍，影响加载速度，

可以尝试使用群组（并集）选择器：p,h1,ol,ul{margin:0; padding:0};来代替。

6.如何画出一小片阴影。

设置一个高度1px，宽度任意的空DIV，利用box-shadow属性即可。阴影位置下调10像素，是为了将阴影从div本体中脱离出来，否则本体会在阴影上留下空白。

.shadow{

height:1px;

width:100px;

box-shadow:10px 0px 10px 5px gray;}

7.使用position定位后，元素的margin:auto;属性会失效；

但给元素定位 top:0; right:0; bottom:0; left:0; 后，margin:auto; 属性会重新生效。

8.<a></a>可以通过设置 target=_blank 来在新页面中打开，但如果要在全局的a标签全部新页面打开，每个都加非常麻烦。

只要在head中加入 <base target="_blank" /> 即可实现在全局实现上述功能。

阅读全文

0 0