从0开始学编程(11)--(131)---每天要记住一些小概念,padding,line-height

line-height是行高，一行文字的高度；

padding是留白距离
padding:0px 8px;等价于 padding:0px 8px 0px 8px;
padding:8px; 这样单个属性值表示上下左右各留白8px
padding:8px 0 6px;这样表示为上边留白8px，左右不留白，底部留白6px

评论

11 楼 Jennycn 2011-10-25  

把链接改为 按钮时, 我就不明白,为啥设置了height 还要设置line-height,还一样的数字

a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; }

10 楼 Jennycn 2011-10-24  

链接在默认状态下是内联元素，转换为块级元素后可以获得更大的点击区域，可以设置宽度和高度，将链接转换为块状，只需增加一个display:block的css属性即可。

9 楼 Jennycn 2011-10-24  

a:link { color: #06F; text-decoration: none; }
a:visited { color: #999; text-decoration: line-through; }
a:hover { color: #F00; text-decoration: underline; }
a:active { color: #F0F; }

顺序都不能颠倒,唉

我还是记住吧

8 楼 Jennycn 2011-10-24  

我发现有时,要是用汉语写注释,也会出问题

7 楼 Jennycn 2011-10-24  

哎,刚刚依样画葫芦地,做了一个竖着的导航栏,加鼠标点上去,可以显示二级菜单的

6 楼 Jennycn 2011-10-24  

·定位标签：position
·包含属性：relative（相对） absolute（绝对）

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

5 楼 Jennycn 2011-10-24  

display:block;
是让对象成为块级元素(比如a，span等)

display有很多对象，具体可以参考http://www.w3school.com.cn/css/pr_class_display.asp

一般都是用display:none和display:block来控制层的显示

display=none 控制对象的隐藏
display=block控制对象的显示



block :  CSS1 块对象的默认值。用该值为对象之后添加新行
none :  CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

4 楼 Jennycn 2011-10-24  

我准备把一些常用的做一些模板

一些常规要记住的,做一些小条子,或者直接就在模板里设置好.

比如这些,是每一个都要做的,就一次记住,写上

大多数标签都有自己的默认样式，比如第二天课程中遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地把全局的样式给统一起来。另外页面中的图片添加链接后会默认添加个边框，ul默认情况下会在列表前添加圆点，这些都是需要去掉的。

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }

3 楼 Jennycn 2011-10-24  

刚刚学会了做垂直的导航栏,鼠标经过时,链接还可以变颜色

2 楼 Jennycn 2011-10-24  

Jennycn 写道

min-height就是你的层的最小高度，如果该层中的元素内容高度小于这个高度，就将层显示为min-height的值，超过的话，就撑破层，使层的高度与元素内容高度一样。
max-height就是和这个相反了，不超出的话，层高度就和层中内容元素高度一样，否则就截断内容，显示max-height的高度。
line-height是行高，就是针对文本的，即一行文字的行高，是以该标签中文字大小font-size做比较的，例如line-height=200%；就是让行高是文字大小的两倍。

我照着一个例子,用line-height 1.5px,font-size12,就挤成一团了,做导航栏,竖着的时候

用这种文字的几倍高,比较好,我用了200%

1 楼 Jennycn 2011-10-24  

min-height就是你的层的最小高度，如果该层中的元素内容高度小于这个高度，就将层显示为min-height的值，超过的话，就撑破层，使层的高度与元素内容高度一样。
max-height就是和这个相反了，不超出的话，层高度就和层中内容元素高度一样，否则就截断内容，显示max-height的高度。
line-height是行高，就是针对文本的，即一行文字的行高，是以该标签中文字大小font-size做比较的，例如line-height=200%；就是让行高是文字大小的两倍。