学习html&css&JavaScript记录

最新推荐文章于 2022-11-24 21:37:50 发布

放风筝的小小马

最新推荐文章于 2022-11-24 21:37:50 发布

阅读量790

点赞数

分类专栏： HTML+CSS+JScprit

本文链接：https://blog.csdn.net/hexon804/article/details/50684478

版权

HTML+CSS+JScprit 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

注：以下问题只是学习的总结，不一定正确

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>

这段代码中，实现的功能是当点击”Coffee“这个链接时，执行showPic()函数，那么return false的作用是什么呢？

return false的作用涉及到JavaScript中的事件处理机制，可以简单的理解为：一般当我们使用<a>标签去打开一个页面时，默认情况会脱离当前页面而跳转到一个新页面去打开该<a>标签中包含的网页地址，而添加return false是改变网页的默认工作方式，使它不脱离当前页面，如果对事件处理机制还不是很了解，可以先这么理解这段代码中的表现形式

3. JavaScript的事件处理机制——点击操作onclick

2.设置背景图片

当需要在页面上添加一个LOGO时，可以在HTML相应的位置添加一个空的div标签，然后在CSS中卫该DIV添加背景图片；

如果需要调整该LOGO的位置，如需要将该背景图片向下拉20px，则需要将该背景图片的宽度设置为图片的宽度+20px；然后通过background-position:0 20px;实现；

如：

#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. 设计两列布局

设计两列布局的步骤：

1.设置两列布局的总宽度

2.设置左列布局的宽度，并将其左浮动

3.设置右列布局的宽度，并将其右浮动

4.em字体尺寸

使用em定义标签字体尺寸时，如果该标签的父元素指定了字体尺寸，那么1em=父元素的字体尺寸；也就是使用em时，会继承父元素的font-size

如：设定dl的font-size为0.8em；那么dt的font-size中1em字体大小等于dl的0.8em；

5.什么是CSS

CSS是一门指定网页该如何呈现给用户的语言

CSS将文档信息的内容和如何展示它的细节分离开来，使得内容与样式相分离

5.1CSS如何工作

浏览器处理文档的过程：

1. 先将标记语言和CSS转换为DOM（文档对象模型）结构

2. 浏览器将DOM内容展示出来

6.用户代理

将文档呈现给用户的程序称为用户代理；浏览器只是其中的一种

7. 浮动双边距问题

8. 自适应居中

方法一：使用margin:0 auto;

方法二：使用position

	#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.百分比是相对于包含块的计量单位

10. 清除浮动更好的方法：

.clearfix:after{content:''; display:table;clear:both;}
.clearfix{*zoom:1;}

.clearfix应该被用于包含有浮动子元素的父元素上

10. 浮动可以让元素block化，以及去空格化；浮动设计之初是用于实现流体布局的

11. BFC(Block Formatting Context)：“块级格式化范围”

详细了解：http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

11.1. 什么是BFC?

是W3C CSS2.1规范中中的一个概念；它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用；

简单理解为：生成了BFC的元素就形成了一个与外界隔离的容器，该容器内的子元素不会影响容器外元素的布局。

11.2. BFC的产生

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

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可以居中

详细解释可以查看： http://www.cnblogs.com/dolphinX/p/3236686.html

简单的说就是：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边；正是因为内容区域的上下两边相等，所以元素中的内容会居中

注意：1. padding对于行高是没有影响的，添加padding虽然可以使内容区增大，但是对行高没有影响

13. 缩小浏览器窗口，出现滚动条；继续缩小浏览器窗口，将滚动条拉动到右边，会出现白边

注意：其实这个问题稍微分析下便可知道答案，但是由于刚刚接触一个新行业，代码量少，当面对问题时，总是不知道从哪儿开始分析；但是这种分析能力又是极其重要的，所以，最好在刚开始学习时，就有意识的去培养良好的分析问题、解决问题的能力，这点很重要！

问题：

HTML部分：

	<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; */
}

注意两点：一：header元素设置了width:100%，也就是说占用浏览器的整个页面宽度（不包括拉动滚动条）；

二：header的后代元素中有一个设置了width:980px宽度的div

为什么出现滚动条？因为当浏览器窗口缩小到980px以下时，已经不足以容纳下类名为auto的div元素，是这个div元素将页面撑开，所以出现了滚动条

为什么会有白边？因为header的宽度是100%，假如当浏览器的宽度缩小到800px时，header的宽度是800px，作用于header上的样式也只有800px的宽度有效，而header里面的后代元素为980px，所以白边宽度=980px-800px；

解决办法：一：不让滚动条产生； 去掉.auto样式中的width:980px;

二：习惯方法：给header元素设置min-width=980px；这样他们两个宽度保持一样了，就不会出现空白了；但是min-width不支持ie6以下；

14. CSS3 @media媒体查询

具体内容：http://www.runoob.com/cssref/css3-pr-mediaquery.html

作用： 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

实例：

如果文档宽度小于 300 像素则修改背景演示(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

15.设置背景图片的方法有哪些？

要求：图片不能失真。

16. DIV中的文字实现自动换行，不超出div的范围

可以使用： word-wrap和 word-break实现；

详细查看： http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

word-wrap：决定是否断句

word-break：决定怎样进行断句

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;
}

18. 实现三列等高布局

详细查看： http://www.cnblogs.com/jes_shaw/archive/2013/05/20/3089618.html

http://blog.sina.com.cn/s/blog_493fe5fa0100zulj.html

了解什么是圣杯布局？

<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如何去除边框的默认样式

使用outline属性；outline:none;

21.为什么table布局不被推荐？

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包裹问题

当子元素使用了float时，经常遇到其父元素的高度塌陷问题，因为子元素浮动导致其无法撑开父元素，因此对父元素设置样式时会达不到预期效果

详细介绍查看：

http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/

如下：

.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;}

24.IE下的zoom介绍、作用、用法?

放风筝的小小马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习html&css&JavaScript记录

1. window.onload()函数作用：等待html文档加载完毕后就执行..例如我们要初始化一些东西..比如说我们要把文档中的div的颜色都改变了那么在文档加载完毕后在这个onload调用的函数里面我们就可以操作文档结构了..如果不是在onload 里面调用的话。那么在文档还没有加载完毕我们就调用文档元素师不可以的...换句话说东西要先存在我才拿来用.onload
复制链接

扫一扫