当前位置:Gxlcms > html代码 > 《十天学会web标准(div+css)》学习笔记_html/css_WEB-ITnose

《十天学会web标准(div+css)》学习笔记_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

第一天 XHTML CSS基础知识 http://www.aa25.cn/div_css/902.shtml

1.整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成,而css样式中width所定义的宽度仅仅是内容部分的宽度。

第二天 一列布局 http://www.aa25.cn/div_css/903.shtml

1. css手册中说:块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心(有关块级元素和行内元素的概念在下一节讲到)。

所以上下两个div如果均指定margin:5px, 则两个div相距5px,而不是10px,因为块级元素的垂直相邻外边距会合并。

2. 内联(display:inline;)元素不能设置宽高,因为内联属于行布局,其特性是在一行里进行布局,所以不能被设定宽高, 解决方案参考:http://www.gxlcms.com/article/21829.htm

第三天 二列和三列布局 http://www.aa25.cn/div_css/904.shtml

1.在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。

2.IE 3像素bug

2.1现象: 3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现。即两者之间会出现3像素的间隔。

2.2解决: 在#side上加上_margin-right:-3px;记住,前边加上一下划线,这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

2.3建议: 当两列固定宽度时,最好把#main也固定宽度且向右浮动,这样就可以避免IE6的3像素bug了。

第四天 纵向导航菜单及二级弹出菜单

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

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

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

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

人气教程排行