HTML+CSS入门常见问题解析-职坐标

HTML+CSS入门常见问题解析

沉沙 2018-10-19 来源：阅读 1015 评论 0

摘要：本篇教程介绍了HTML+CSS入门常见问题解析，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门常见问题解析，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

1)当一个父div中包含了几个子div，同时几个子div设置为浮动，那么父div的高度不能被子div撑起来。须手动设置父div的宽高，然后才可以设置例如 margin：auto的居中属性。

2)设置几个连续div的间隔：首先把这几个div的属性设置为左浮，然后这几个div就是并排显示了，此时每个div之间没有间距，通过设定每个margin-left的值来调整他们之间的间距。

3)水平居中：行内元素：text-align：center；只对行内元素起作用，如div中的字，则字居中而div不居中，块级元素： margin：0 auto；

4)垂直居中：行内元素：line-height：盒子高度,    块级元素：position top margin-top

5)当一个父div包含了数个子div的时候，如果要调整父div的位置，须设定父div的宽属性，因为默认div  独占一行。

6) 当div中要放入背景图片时，一定要设定div的宽和高才会出现背景图片。

7){ text-align: center }这项属性只用于整块的内容，如<P>、 <H1>-<H6>、<BLOCKQUOTE>和 <UL>  。

8)建立不滚动的背景图象:BODY { background-attachment: fixed; background-image: url    (15/stuff3a/background.gif) }你可以看到页面滚动时，背景仍保持固定。

9)相对定位和绝对定位:

  第一，不管是什么，既然要定位，就需要有一个参照物,相对定位的参照物是本身。绝对定位的参照物就是父级元素，当父级元素中不存在相对定位，那么它的参照物就是body，
  第二，产生的影响相对定位，设置后，原来的位置始终保留着绝对定位，设置后，原来的位置会被后面的内容占据。

10）css样式初始化：
技术分享

/*css reset code */

/****  文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */

/*字体边框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
img {
display:block;
}
address,caption,cite,code,dfn,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:‘‘;
}
abbr,acronym { border: 0;
}

a {
text-decoration:none;
}

View Code

11）div自动出现滚动条：

<style type="text/css">
    #aa {
    width:160px;
    height:100px;
    background:#ccc;
    word-wrap:break-word;
   overflow:auto;
}
</style>
<div id="aa"></div>

12）document.body.clientHeight取值：

　　    有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720.

    可是在XHTML中, 如果body 体中只有一行, 则document.body.clientHeight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要document.documentElement.clientHeight 来获取了.
    原因是: 在HTML 中, body 是整个DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.
    区别新旧标准的行是:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    前者指明该页面使用旧标准, 后者指明该页面使用新标准.

    总结:
    XHTML中用 document.documentElement.clientHeight  代替document.body.clientHeight

    javaScript窗口属性：
    网页可见区域宽：document.body.clientWidth
    网页可见区域高：document.body.clientHeight
    网页可见区域宽：document.body.offsetWidth (包括边线的宽)
    网页可见区域高：document.body.offsetHeight (包括边线的宽)
    网页正文全文宽：document.body.scrollWidth
    网页正文全文高：document.body.scrollHeight
    网页被卷去的高：document.body.scrollTop
    网页被卷去的左：document.body.scrollLeft
    网页正文部分上：window.screenTop
    网页正文部分左：window.screenLeft
    屏幕分辨率的高：window.screen.height
    屏幕分辨率的宽：window.screen.width
    屏幕可用工作区高度：window.screen.availHeight
    屏幕可用工作区宽度：window.screen.availWidth

    在IE、FireFox、Opera下都可以使用
    document.body.clientWidth
    document.body.clientHeight
    即可获得，很简单，很方便。
    而在公司项目当中：
    Opera仍然使用
    document.body.clientWidth
    document.body.clientHeight
    可是IE和FireFox则使用
    document.documentElement.clientWidth
    document.documentElement.clientHeight

13）html元素类别：

    块级元素(block element)
　　* div - 常用块级容易，也是css layout的主要标签
　　* dl - 定义列表
　　* h1 - 大标题
　　* h2 - 副标题
　　* h3 - 3级标题
　　* h4 - 4级标题
　　* h5 - 5级标题
　　* h6 - 6级标题
　　* hr - 水平分隔线
　　* menu - 菜单列表
　　* ol - 排序表单
　　* p - 段落
　　* table - 表格
　　* ul - 非排序列表

   行内元素(inline element)
　　* a - 锚点
　　* b - 粗体(不推荐)
　　* br - 换行
　　* em - 强调
　　* i - 斜体
　　* img - 图片
　　* input - 输入框
　　* label - 表格标签
　　* select - 项目选择
　　* span - 常用内联容器，定义文本内区块
　　* strong - 粗体强调
　　* sub - 下标
　　* sup - 上标
　　* textarea - 多行文本输入框
　　* u - 下划线

   可变元素
　　* button - 按钮
　　* del - 删除文本
　　* iframe - inline frame
　　* ins - 插入的文本
　　* map - 图片区块(map)
　　* object - object对象

14）设置css编码：

　　@charset "utf-8";

15）网页顶部莫名其妙出现白边：

    在谷歌和360下奇怪的出现了白边，火狐浏览器正常，应该是火狐的兼容性比较好，代码没有问题，看了下代码，编码是 utf-8 bom+编码，所以马上猜到是编码引起的，另存为utf-8，页面正常。