随手记四——一些课堂笔记和小技巧、总结

利用边框画一个三角形：

用div做一个块模型，并将他的宽高设置为0px，这样我们看到的色块都是边框，每一条边都是一个小三角形，将右和下边框设置为红色，再将左上边框设置为透明色，于是就可以得到以上三角形。以上为两种写法，第二种更简洁。

 

一些特性：

border: 1px solid black；  边框宽度、形式、颜色

 

text-align:left;  对齐方式：向左对齐

 

text-indent: 2em;   首行缩进，1em是一个文本单位。

 

单行文本居中可以让单行文本所占高度等于容器高度，即height=line-height；

 

单位分绝对单位和相对单位，m/cm/dm/km这些是绝对单位，不可改变的；px/em是相对单位。font-size是字体的高度  1em=1 font-size

 

原则上，HTML和CSS各司其职，HTML中不能过多地掺杂CSS。比如说<del>这个标签，我们可以在CSS中实现，所以在开发时我们不用<del>这个标签。text-decoration : line-through; = <del></del>

 

text-decoration : line-through/underline/none/overline；中划线/下划线/无线/上划线；

 

cursor：pointer；光标触碰该部件后的变化，有很多，不用记，可以查字典。

 

一些总结：

标签有行级元素和块级元素。

1、行级元素/内联元素 inline

feature：内容决定元素所占的位置，不可以通过CSS改变宽高

如span/strong/em/a/del

2、块级元素 block

feature：独占一行，可以通过CSS改变宽高

如div/p/ul/ol/li/form/address

3、行级块元素  inline-block

feature : 内容决定大小、可以改宽高

如img

有意思的是，span可以被css代码改成块级元素，使用的是display:block;这个属性，同样，块级元素也可以被改成行级元素，display:inline;

还有一个小知识，凡是带有inline的元素，都有文字特性，所以说<img>元素，因为它是行级块元素，所以使用时，如果两个<img>标签之间有空格或者回车，会使两张图片之间有缝隙，如果想让缝隙消失，那就不用有空格和回车就可以了。

从这个例子可以看出来啦~~

 

关于一些实用的开发经验：

一般来说，我们都是先写html再写css，但是在实际开发中，我们可以先写css，也就是说，先用css写出一些功能，再给html套上去，这样更适合团队开发，团队开发注重效率，同样的功能写两遍没有意义，可以建立一个css库，在需要的时候把已经写好的css放上去，节省时间和精力。