html5和css基础知识——第二节_main区域将背景撑开-CSDN博客

本文链接：https://blog.csdn.net/weixin_42597880/article/details/103070918

iframe

在这个页面嵌入另一个网页，iframe是一个可替代元素
可替换元素特点：

通常是行盒
通常显示的内容取决于元素的属性（src）
CSS不能完全控制其中的样式
具有行块盒的特点
通常用来放置别人网站的视频（嵌入代码）

（1）嵌入其他网页

iframe {
		width:500px;
		height:500px;
}

<iframe  src="https://www.baidu.com" ></iframe>

src属性添加其他网页
（2）点击链接在iframe中打开

<a href = "https://www.baidu.com" target = "myframe">百度</a>
<a href = "https://www.douyu.com" target = "myframe">斗鱼</a>
<a href = "https://www.taobao.com" target = "myframe">淘宝</a>

<iframe name="myframe" ></iframe>

给iframe添加name属性，将链接的target链接到iframe，因此点击链接在iframe中打开.

flash

以前网页中用flash做视频和音频，嵌入flash通常用object和embed，他们都是可替代元素。但是他们的兼容性不同，有的浏览器可以识别这个，有的可以识别那个。

<object data="./example.swf" type="application/x-shockwave-flash">
		<param name="quailty"  value="high传递的参数值">
</object>

datd:flash的资源地址
type:互联网能够识别的资源类型，MIME，即多用途互联网邮件类型，比如资源是一个jpg图片，MIME：image/JPEG，再比如例子中的swf的MIME:application/x-shockwave-flash
<param name="quailty（表示传入视频的质量）" value="high（高质量）">是object元素传入的参数，name是传递的参数名字，value是传递的参数值

<embed quality="high" src="./example.swf" type="application/x-shockwave-flash"></embed>

quality="high"即传入的参数，对应object中的param元素，src对应data。

兼容性写法

<object data="./example.swf" type="application/x-shockwave-flash">
		<param name="quailty"  value="high传递的参数值">
		<embed quality="high" src="./example.swf" type="application/x-shockwave-flash"></embed>
</object>

块级格式化上下文（BFC）

1.BFC全称block formatting context，它是一块独立的渲染区域，规定了在该区域中，常规流块盒的布局。

BFC渲染区域（由某个HTML元素创建）：
（1）根元素：<html>元素创建的BFC区域，覆盖了网页中的所有元素；
（2）浮动和绝对定位元素
（3）overflow不等于visible的块盒
（4）display为table的块盒和行块盒（不常用）
在这里插入图片描述

2.不同的BFC区域，进行渲染时互不干扰

3.创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

创建BFC的元素，它的自动高度需要计算浮动元素（创建BFC可以清除浮动）
（1）将父元素设为绝对定位，变为BFC
（2）将父元素设为浮动，变为BFC
（3）改变父元素的overflow（visible除外）
不推荐前两种，因为会改变盒子的排列方式（改变常规流），副作用最小的方式即设置overflow：hideen，但如果仅仅只是清除浮动，还是用clear最好
创建BFC的元素，它的边框盒不会与浮动元素重叠（改变常规流块盒忽略浮动元素，即浮动元素脱离常规流的情况）（可以做自适应多栏布局）

上图中，蓝色的块盒忽略了脱离常规流的float红色浮动元素

给蓝色块盒添加overflow：hidden属性成为BFC后，此时蓝色块盒不能忽略红色浮动元素，即浏览器自动给蓝色块盒设置了margin-left属性（且蓝色块盒自适应改变宽度，改变浏览器大小不会出现滚动条），但是要更改两元素之间的距离，不能手动给蓝色块盒设置margin-left属性，只能给红色浮动元素设置margin-right属性
创建BFC的元素，不会和它的子元素进行外边距合并（处在不同BFC的元素，外边距不会合并）
改变父子元素、兄弟元素上下外边距合并的情况，可以使用BFC

注意：浮动和绝对定位、固定定位的区别，浮动只是一部分脱离常规流（文字还是可以自动避开浮动的），而绝对固定则是完全脱离常规流。因此，固定、绝对定位的元素无法解决高度坍塌等问题。

布局

一般侧边栏定宽

两栏布局

（1）利用BFC的主区域自适应布局

<div class = "container clearfix">
	<aside class = ''aside">
		侧边栏内容
	</aside>
	<div class = "main">
		主区域内容
	</div>
</div>

.clearfix::after {
	content: "";
	display:block;
	clear:both;
}
.aside{
	float:left;
	background:red;
	color:green;
	width:300px;
	margin-left:30px;
}
.main{
	overflow:hidden;
	background:blue;
}

侧边栏左浮动，主区域BFC，设置侧边栏定宽，从而使主区域自适应改变宽度，

浮动元素适应内容宽高
注意：这种方法在HTML中一定要先写侧边栏浮动元素，不然，就会先摆放常规流主区域，主区域就会将宽度占完，不会形成两栏布局；
但是将侧边栏放到前面的写法不利于搜索引擎搜索

（2）等高两栏布局
a. css的弹性盒布局
b.JS控制
c. 利用盒模型制作伪等高
若侧边栏内容过多，这种布局就会出错（侧边栏多出来的内容无法显示），因此要尽量将侧边栏高度设的很大，

.container {
	overflow:hidden
}
.aside{
	float:left;
	background:red;
	color:green;
	width:300px;
	margin-left:30px;
	height:10000px;
	margin-bottom:-9990px;
}
.main{
	overflow:hidden;
	background:blue;
}

给侧边栏增加高度（设置的非常大），然后将下外边距设置为一个大的负数，根据盒模型的性质，此时包含元素container的高度等于主区域的自适应高度（侧边栏撑开container的高度等于侧边栏height+border+padding+margin，是一个小的正数），但是侧边栏已经设置的高度还是存在的（就像是本来父元素只给了这么多空间，但是子元素放不下撑开了一样，子元素的背景和内容依然有）。再给父元素设置溢出隐藏，将超过父元素的遮起来，这样就是伪等高布局了。
（3）绝对定位（主区域写在最前面）
侧边栏完全脱离常规流，无法等高

.container {
	padding: 30px;
	border: 3px solid;
	position:relative;
}
.left {
	width: 300px;
	background: lightblue;
	margin-right:20px;
	left:30;
	top:30;				//考虑到容器的padding
}
.right {
	width: 300px;
	background: lightblue;
	margin-right:20px;
	right:30;
	bottom:30;			
}

（4）后台页面的布局
后台页面一般是占满整个视图框的，放大缩小都不会出现滚动条，因此要用固定定位做整个页面容器（固定定位的标准是视口），设置宽高均为100%，标题设置为绝对定位（因为下面的两栏布局要占满剩下的空间，除了绝对定位没有别的解决方法），剩下的两栏布局容器要设置内边距等于标题的高度。
在这里插入图片描述

浮动扩展

在这里插入图片描述

行高的取值

（1）设置行高为固定值

line-height: 40px;

不管对于多大的字体都使用40px，会使大字体行高过小出现重叠
（2）设置行高为相对字体

line-height: 2em;

在子元素中会先计算像素值，再继承
比如父元素字体大小为16px，那么所有子元素的行高就为32px，一样会造成不同字体的行高过大过小问题
（3）设置行高为数字

line-height: 2;

在子元素中先继承再计算，因此可以自适应调整行高。

body的背景

堆叠上下文

创建堆叠上下文的元素

HTML元素（根元素）
设置了z-index（非auto）数值的定位元素

同一个堆叠上下文中元素在z轴上的排列

从底部到顶部：

创建堆叠上下文的元素的背景和边框
堆叠级别（z-index，stack-level）为负值的堆叠上下文
常规流非定位的块盒
非定位的浮动盒子
常规流非定位行盒
任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
堆叠级别为正值的追跌上下文
每个堆叠上下文，独立于其他堆叠上下文，它们之间不能互相穿插。

svg

svg:acalable vector graphics，可缩放的矢量图

该图片使用代码书写而成
缩放不会失真
内容轻量
用来做简单图片

使用

数据链接

data url
数据链接：将目标文件的数据直接书写到路径位置
语法：data:MIME;base64,数据

优点

减少了浏览器中的请求，及请求中浪费的时间。
有利于动态生成数据

缺点

增加了资源的体积
导致了传输内容增加，从而增加了单个资源的传输时间
不利于浏览器的缓存
浏览器通常会缓存图片文件、css文件、js文件。
会增加原资源的体积到原来的4/3

应用场景

请求单个图片体积较小，且该图片因为各种原因，不适合制作雪碧图，可以使用数据链接
图片由其他代码动态生成，并且图片较小，可以使用数据链接

base64

水平居中

盒子在其包含块中居中

行盒（行块盒）水平居中

父元素设置text-align:center;

常规流块盒水平居中

定宽，设置左右margin为auto

绝对定位元素水平居中

定宽，左右坐标为0（left,right:0）左右边距margin设置为auto

固定定位是绝对定位的特殊情况浮动元素暂时做不到水平居中，只能通过调整左右margin设成大概居中

垂直居中

单行文本垂直居中

设置行高（line-height）等于高度（height）

行块盒（块盒）内多行文本的垂直居中（行盒不存在垂直居中）

没有完美方案，设置盒子上下内边距相同，达到类似的效果。

行盒本来就没有高度，它的高度是被内容撑开的

绝对定位的垂直居中

与绝对定位的水平居中相同

图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高

行盒中包含行块盒或可替换元素

行盒的高度与它
解决方法：将行盒改成行块盒或块盒

text-align：justify

left

justify（word中的两边对齐）

制作一个三角形

div {
	width:0;
	height:0;
	border-width:10px;
	border-style:solid;
	border-color:red transparent transparent transparent;
}

<div>
</div>