/* 1.按照标准划分: 块元素 和 行内元素
延伸类: 行内块元素 内联块元素
块元素特点::
1.默认宽度 是父元素的百分百
2.霸占一行
3.支持全部样式
块标签 form p h1-h6 ul li dl
body,p,ul,ol,li,dl,dt,dd,form,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
<!-- 初始化原因:系统自带的标签有很多有margin或者padding,影响后期的布局 -->
/* 行内元素的特点 a image span
1.元素排列一行, 遇到边界自动换行
2.宽高由内容决定
3.不支持宽高,不支持margin上下,
支持padding上下有问题
*/
解决行内元素间隔问题
1.代码不换行 <br/>
2.设置父元素的font-size:0; 单独设置子元素font-size 常用
*/
<!-- em emphasis 语义表示 强调语气 斜体-->
<!-- i italic 语义表示 专业名词 斜体-->
<!-- b bold 语义表示 关键词和产品名称 加粗-->
<!-- strong 语义表示 重要的内容 加粗-->
/* 1.将块元素改变成行内元素 */
display: inline;
/* 2.将块元素改变成行内块元素 */
display: inline-block;
/* 3.隐藏元素 不占位置 */
display: none;
/* 浮动的特点
1. left right
2.碰到边界就停止,如果不够自动换行
3.元素之间没有间隔
4.不占位置(如果有文字, 文字显示是绕过浮动元素的)
*/
<style>
/* 2.1设置外面的盒子 */
.box{
width: 210px;
border: 1px solid black;
/* 清除浮动
产生的原因:父元素没有设置高度, 子元素浮动，父元素就被撑不起来
1.设置overflow:hidden;\
2.新增一个空的div标签,设置clear:both;
3.使用伪类, 一般都使用这种
*/
/* 如果元素浮动了, 垂直外边不会合并 */
/* overflow: hidden; */
}
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
/* 适配低版本的IE浏览器 */
zoom: 1; 缩放，拉远拉近
}
.last{
/* clear: both; */
}
/* 2.2设置里面的小盒子 */
.smallbox{
width: 50px;
height: 50px;
background-color: gold;
margin:10px;
/* 浮动 */
float:left;
}
</style>
/* 文档流 标准流
按照html的标签的特点:从左到右,或从上到下, 块元素占一行;
行内元素并排一行,
*/
/* 定位 position
相对定位:relative: 以自身位置为基准,移动之后原先的位置还在，不脱标
绝对定位:absolute 以父元素为基准.,如果父元素没有设置相对定位(以body为准)，
不占位置,脱离文档流;
固定定位:fixed: 以body为基准;不占位置,脱离文档流
默认没有:static
/* 修改定位的层级关系 */
position: fixed;
z-index: 1; 谁的数大谁在上面
/* 设置圆角 */
border-radius: 10px;
/* //2.设置透明度 */
opacity: 0.3;
/* 兼容IE浏览器 */
filter:alpha(opacity=30);
/* 固定定位 */ 居中提示框 ，为了适配各种浏览器
position: fixed;
left: 50%;
top: 50%;
margin-left:-100px;
margin-top:-100px;