HTML初涉（4）

来源：互联网发布：c语言如何加密文件编辑：程序博客网时间：2024/05/29 01:53

1. 常犯错误：

不加ductype,导致低版本IE解析效果不一致

id得到命名为数字

编码不一致，文件编写与charset不一致

2. 边框设计

（1）margin设置：

margin：10px；//设置了四个方向外边框的大小

设置单边框：margin-top、margin-right、margin-left、margin-bottom。若margin：10px，20px；则按顺时针方向旋转分配，若其他方向上没有数字，则取对边值。

margin的重叠现象：相邻的普通元素上下边距并不是简单相加，而是取两者中的最大值。

（2）border设置：

border：10px solid green；//设置四个方向上边框为绿色实线

单边框的设置同margin。

border的设置：宽border-width:10px 、形状border-style：solid / dashed（虚线）/dotted（点线）、颜色border-color：green

扩展：用css控制边框画一个三角形

推荐：http://www.cnblogs.com/blosaa/p/3823695.html

                   <div class="one"></div>

                   .one{                       width: 0px;                       height: 0px;                       border-bottom: 100px solid red;                       border-left:100px solid transparent;                       border-right:100px solid transparent;                     }

Why？让我们做个代码实验，看效果图！！

              <div class="two"></div>

              .two{                  width: 100px;                  height: 100px;                  border-top: 30px solid red;                  border-left:30px solid green;                  border-right:30px solid yellow;                  border-bottom: 30px solid blue;               }

试着画画圣诞树吧。。。。。。。

（3）padding设置：

内边距padding：10px；//表示边框和文字之间的距离值

书写方式同margin

PS：父div与子div保持距离，优先用margin（盒与盒）、其次为padding（文字与盒）

父子div也会发生margin重叠吗？

答：会！注意父div有无float时的区别。

a. 有：子div在父div中margin

b. 无：子margin与父margin中选最大

0 0