注:以下问题只是学习的总结,不一定正确
1. window.onload()函数
作用:等待html文档加载完毕后就执行..
例如我们要初始化一些东西..比如说我们要把文档中的div的颜色都改变了
那么在文档加载完毕后 在这个onload调用的函数里面我们就可以操作文档结构了..
如果不是在onload 里面调用的话。那么在文档还没有加载完毕 我们就调用文档元素师不可以的...换句话说 东西要先存在 我才拿来用.
onload就是在文档存在之后所有干的事..
2. <a href="images/coffee.jpg" onclick = "showPic(this);return false;" title="A cup of black coffee">Coffee</a>
2.设置背景图片
#header #logo{
background: url('../images/logo.png') no-repeat;
width:291px;
height:62px;<span style="white-space:pre"> </span>//背景图片的实际宽度为42px
background-position:0 20px;<span style="white-space:pre"> </span>//需要将背景图片向下移动20px;
float:left;
}
3. 设计两列布局
4.em字体尺寸
5.什么是CSS
5.1CSS如何工作
6.用户代理
7. 浮动双边距问题
8. 自适应居中
#ife6-1-1-ver02{
width: 960px;
background: blue;
position: absolute;<span> </span>//因为没有父级元素使用了relative的定位,所以以html文档位置进行绝对定位
left: 50%;<span> </span>//该标签元素的左边缘位置相对在其包含块的50%位置
margin-left: -480px;<span> </span>//将其左外边距设定为-480px(width的一半),这样便实现了居中
}
9.百分比是相对于包含块的计量单位
.clearfix:after{content:''; display:table;clear:both;}
.clearfix{*zoom:1;}
.clearfix应该被用于包含有浮动子元素的父元素上
10. 浮动可以让元素block化,以及去空格化;浮动设计之初是用于实现流体布局的
11. BFC(Block Formatting Context):“块级格式化范围”
11.1. 什么是BFC?
11.2. BFC的产生
- float的值不为none。
- overflow的值不为visible。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
11.3. BFC的作用
1、在创建了 Block Formatting Context 的元素中,其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。
根据 CSS 2.1 8.3.1 Collapsing margins 第一条,两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。
根据 CSS 2.1 8.3.1 Collapsing margins 第三条,生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器。
2、在 Block Formatting Context 中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。
3、Block Formatting Context就是页面上的一个隔离的独立容器,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。
4、根据 CSS 2.1 9.5 Floats 中的描述,创建了 Block Formatting Context 的元素不能与浮动元素重叠。
表格的 border-box、块级的替换元素、或是在普通流中创建了新的 block formatting context(如元素的 'overflow' 特性不为 'visible' 时)的元素不可以与位于相同的block formatting context 中的浮动元素相重叠。
5 、当容器有足够的剩余空间容纳 BFC 的宽度时,所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。
6、 在 IE6 IE7 IE8 Chrome Opera 中,当 BFC 的宽度介于 "容器剩余宽度" 与 "容器宽度" 之间时,BFC 会显示在浮动元素的下一行;在 Safari 中,BFC 则仍然保持显示在浮动元素所在行,并且 BFC 溢出容器;在 Firefox 中,当容器本身也创建了 BFC 或者容器的 'padding-top'、'border-top-width' 这些特性不都为 0 时表现与IE8(S)、Chrome 类似,否则表现与 Safari 类似。
经验证,最新版本的浏览中只有firefox会在同一行显示,其它浏览器均换行。
7、 在 IE6 IE7 IE8 Opera 中,当 BFC 的宽度大于 "容器宽度" 时,BFC 会显示在浮动元素的下一行;在 Chrome Safari 中,BFC 则仍然保持显示在浮动元素所在行,并且 BFC 溢出容器;在 Firefox 中,当容器本身也创建了 BFC 或者容器的 'padding- top'、'border-top-width' 这些特性不都为 0 时表现与IE8(S) 类似,否则表现与Chrome 类似。
经验证,最新版本的浏览中只有firefox会在同一行显示,其它浏览器均换行。
8、根据CSS2.1 规范第10.6.7部分的高度计算规则,在计算生成了 block formatting context 的元素的高度时,其浮动子元素应该参与计算。
12. 为什么line-height可以居中
13. 缩小浏览器窗口,出现滚动条;继续缩小浏览器窗口,将滚动条拉动到右边,会出现白边
<div id="header">
<div class="navwrap <span style="color:#ff0000;">auto</span>">
<div class="logo">
<a href="#">YourLOGO</a>
</div>
<div class="nav">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <a href="blog.html">文章</a> </li>
<li> <a href="gallery.html">作品</a> </li>
<li> <a href="about.html">关于</a> </li>
</ul>
</div>
</div>
<div class="icon">
<a href="https://github.com"></a>
</div>
</div>
CSS部分:
.auto{
margin: 0 auto;
width: 980px;
}
#header{
width: 100%;
height: 80px;
background-color: #8d4bbb;
position:relative;
/* min-width:980px; */
}
14. CSS3 @media媒体查询
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
实例:
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
15.设置背景图片的方法有哪些?
要求:图片不能失真。
16. DIV中的文字实现自动换行,不超出div的范围
word-wrap:break-word;
word-break:break-all;
17 . 关于元素框模型
HTML部分:
div id="mid">
<div class="top">
<div class="wrap">
<div class="word">
<h2>标题1</h2>
<p class="content">
这里是正文,这里是正文,这里是正文,这里是正文,这里是正文,这里是正文,
<span style="white-space:pre"> </span>这里是正文,这里是正文,这里是正文,这里是正文,这里是正文,这里是正文
</p>
</div>
</div>
</div>
</div>
CSS部分:
#mid .top{
background:url('../img/banner-bg2.jpg') no-repeat;
width:100%;
height:525px;
min-width:980px;
}
#mid .top div.wrap{
/* height:525px; */ 如果不添加这一句那么wrap的高度为0px,会导致div.word以紫色条纹的下边偏移
width:980px;
margin:0 auto;
position:relative;
background:black;
}
#mid .top .word{
width:345px;
height:110px;
/* 实现渐变 */
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
position:absolute;
right:0px;
bottom:0px;
}
div id="mid">
<div class="top">
<div class="wrap">
<div class="word">
<h2>标题1</h2>
<p class="content">
这里是正文,这里是正文,这里是正文,这里是正文,这里是正文,这里是正文,
<span style="white-space:pre"> </span>这里是正文,这里是正文,这里是正文,这里是正文,这里是正文,这里是正文
</p>
</div>
</div>
</div>
</div>
CSS部分:
#mid .top{
background:url('../img/banner-bg2.jpg') no-repeat;
width:100%;
height:525px;
min-width:980px;
}
#mid .top div.wrap{
/* height:525px; */ 如果不添加这一句那么wrap的高度为0px,会导致div.word以紫色条纹的下边偏移
width:980px;
margin:0 auto;
position:relative;
background:black;
}
#mid .top .word{
width:345px;
height:110px;
/* 实现渐变 */
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8
background:red; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
position:absolute;
right:0px;
bottom:0px;
}
18. 实现三列等高布局
<span style="font-weight: bold;">1.三列等高布局
</span><strong><span style="font-size:24px;color:#ff0000;">html code:</span>
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div></strong>
<span style="color:#ff0000;"><strong><span style="font-size:24px;">css code:</span></strong><span style="font-size:18px;">
</span></span><strong>
#wrap
{
width: 1000px;
margin: 0 auto; /*key code:*/
overflow: hidden;
}
#left, #center, #right
{
/*key code:*/
margin-bottom: -10000px;
padding-bottom: 10000px;
}
#left
{
background: #00FFFF;
float: left;
width: 250px;
}
#center
{
background: #FF0000;
float: left;
width: 500px;
}
#right
{
background: #00FF00;
float: right;
width: 250px;
}
</strong>
19. div元素float对其父元素及其父元素的相邻元素的影响
如果一个div元素float了,那么对其父元素也会有影响,脱离普通文档流;同时,对其父元素的相邻元素也有影响;可以通过为其父元素设置高度height:;或者使用overflow: hidden;清除影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="div1" style="width: 980px; margin:0 auto">
<div class="div-top" style="background: pink; overflow: hidden;">
<div class="div2" style="/* margin-top:10px; */ float: left; background: yellow;">
101111111111111111
</div>
</div>
<div class="div3"; style=" background: blue; margin-top: 100px;">
adfasdfasdf
</div>
</div>
</body>
</html>
20.CSS如何去除边框的默认样式
22. 垂直水平居中
<!DOCTYPE html>
<html>
<head>
<title>我的页面</title>
<meta charset=utf-8>
</head>
<body>
<div style="position: relative; width: 1000px; height: 500px; background: pink">
<div style="background: #6699ff; width: 200px; height: 200px; position: absolute;top: 50%;left: 50%; margin-top: -100px; margin-left: -100px;">
</div>
</div>
</body>
</html>
23. 清除浮动和DIV包裹问题
.box{padding:10px; background:gray;}
.l{float:left;}
<div class="box">
<img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}