2021-03-08

第一次测验错题总结

1.<marquee> 标签——文字滚动

2.预定义格式化标签<pre></pre>: 可定义预格式化的文本，包在其中的文本常会保留空格，换行符。

3有继承性和无继承性

有：

	字体系列：font，font-family（字体）/weight（粗细）/size(字号）/style（字体样式）
	文本属性系列：text-indent(文本缩进）/text-align/line-height
    元素可见性：visibility

visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。

4:表格布局属性
5:列表布局属性

英文字母大写

text-transform: uppercase;

6.块级元素与行内元素

块级元素：
1.独占一行
2.高，宽，内外边距均可控制（若未给宽，则和body宽度一致，占满）
3.容器及盒子：可放行内/块级元素
4.<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>

行内元素：
1.一行可放多个
2.高宽直接设置为无效果
3.默认宽度=本身内容宽度
4.只能容纳文本/其它行内元素
4.<a>,<strong>,<b>,<em>,<i>,<span>

7.外边距重叠

两个或多个块级盒子的垂直相邻边界会重合。

防止外边距重叠解决方案：
虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位postion:absolute:
外层元素 overflow:hidden;
内层元素加float:left;或display:inline-block;
内层元素padding:1px;

8.iframe

iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性。

Details

**

1、iframe 定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。 提示和注释：
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
iframe标签是成对出现的,以<iframe>开始,</iframe>结束
iframe标签内的内容可以做为浏览器不支持iframe标签时显示

**

3、示例 1、iframe框架 代码如下: <iframe src="https://www.test.net" width="200"
height=“500”> 该网站使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问。 </iframe>

4.基本语法：<iframe src="文件路径"></iframe>

5.<iframe> 标签常用属性介绍:

height可以设置框架显示的高度
width可以设置框架显示的宽度
name可以定义框架的名称
frameborder用来定义是否需要显示边框，取值为1表示需要边框
scrolling用来设置框架是否需要滚动条，取值可以是yes,no,auto
src用于设置框架的地址，可以使页面地址，也可以是图片地址
align用于设置元素对齐方式，取值可以是left，right，top，middle，bottom

9.让div水平居中

1、使用定位加margin-left和margin-top

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid pink;
	position: relative;
}

.son {
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	left: 50%;
	margin-left: -50px;
}

2.使用定位加transform

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid pink;
	position: relative;
}

.son {
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

3、使用定位加margin:auto

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid pink;
	position: relative;
}

.son {
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

4、使用flex布局+margin:auto

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid pink;
	display: flex;
}

.son {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: auto;
}

5、使用flex布局+justify-content和align-items

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid pink;
	display: flex;
	justify-content: center;
	align-items: center;
}

.son {
	width: 100px;
	height: 100px;
	background-color: red;
}

6、使用grid布局

.parent {
	width: 300px;
	height: 300px;
	border: 1px solid pink;
	display: grid;
}

.son {
	width: 100px;
	height: 100px;
	background-color: red;
	justify-self: center;
	align-self: center;
}