2021-05-26 Day-08元素选择器 高度塌陷

回顾

透明度
	background:rgba(255,255,255,0.4);
	opacity:0.4;有继承性
	filter:alpha(opacity=40);
锚点
	<a href="页面路径#box">点击的位置</a>
	<div id="box"></div>
定位
	相对定位position:relative;
		- 参考物：元素本身
		- 不脱离文档流
		- 偏移距离
		- 元素位置微调
	绝对定位position:absolute;
		- 参考物：外层具有position属性的元素,一层层向上查找,如果找不到则最终参考浏览器空白文档区域定位
		- 脱离文档流
		- 偏移距离
		- 叠加效果
	固定定位position:fixed;
		- 参考物：浏览器空白文档区域定位
		- 脱离文档流
		- 偏移距离
		- 不随页面滚动
	粘性定位position:sticky;
		- 参考物：浏览器空白文档区域顶部
		- 不脱离文档流
		- 偏移距离
		- 吸顶效果

你所了解居中都有哪些

1.文本和图片的水平居中text-align:center;
2.单行文本的垂直居中line-height
3.表格内容的垂直居中vertical-align:middle;
4.块级元素的水平居中margin:0 auto;
5.定位(两种方法)
6.背景图片的居中background-position:center center;

宽高默认值

width:auto;
height:auto;

最大最小宽高

最小宽度min-width
最大宽度max-width
最小高度min-height
最大高度max-height

平分body高度

html,body{
	height:100%;
}

伪元素选择器、伪对象选择器

:first-letter第一个字符
:first-line第一行
:before在元素前面追加文字、图片或者元素
	.box:before{
		content: "小明说："; 追加文字
	}
	.box:before{
		content: url(img/zuiku_71.png); 追加图片
	}
	.wrap:after{ 追加元素
		content: "";
		display: block; 默认元素为行内
		width: 100px;
		height: 100px;
		background: green;
	}
:after在元素后面追加文字、图片或者元素

隐藏属性

display:none;消失
visibility:hidden;隐藏
opacity:0;

body{
	min-width: 1240px;防止左右拖拽滚动条右侧无板块颜色问题
}

***浮动元素的父容器高度塌陷问题

1.给父元素加overflow: hidden;
	父元素触发BFC,子元素高度参与计算
2.清除浮动
	clear:left清除左浮动、right清除右浮动、both清除二者
3.万能清除浮动法
	.clr:after{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		overflow:hidden;
		visibility:hidden;
	}
	.clr{
		zoom:1; IE6和7才生效
	}