07-22
1.margin-top的bug
.wrapper{
width:300px;
height:300px;
background-color:red;
overflow:hidden;
}
.box{
width:150px;
height:150px;
background-color:aqua;
margin-top:50px;
}
/*
在顶层边距合并时,子元素设置margin-top时会带动父元素设置margin-top,只要在父元素设置overflow:hidden就可以
让子元素想对于父级进行设置上边距
*/
2.浮动
/*
浮动float
左浮float:left;
右浮float:right;
浮动的用法
1、全部设置一种浮动
2、分别设置左浮和右浮
浮动会脱离文档流
*/
div{
width:200px;
height:200px;
background-color:aqua;
float:left;
}
div:nth-of-type(2){
background-color:red;
}
div:nth-of-type(3){
background-color:blue;
}
div:nth-of-type(4){
background-color:green;
}
3.清理浮动
/*
由于前面的两个盒子浮动脱离了文档流,下面的.three盒子会顶上去,被浮动的两个div覆盖了一部分内容
清除浮动：清除浮动带来的影响
1.在被影响的标签(.three)前添加一个空白的div标签(.four)，并设置类名为clear 设置属性clear:both;
2.直接给被影响的标签(.three)添加overflow:hidden
浮动注意
1、浮动会脱离文档流
2、如果同时使用左浮和右浮，必须一起设置
3、浮动只有左浮和右浮，布局时就只有左右结构
*/
.wrapper{
width:100%;
height:300px;
background-color:red;
}
.one{width:40%;height:100px;background:blue;float:left;}
.two{width:40%;height:100px;background:green;float:right;}
.three{width:100%;height:200px;background:yellow;}
.four{
clear:both;
}
4.显示隐藏
/*
display
隐藏display:none; 不占位隐藏
显示display:block;
占位隐藏visibility:hidden;
显示visibility:visible;
*/
/* visibility: hidden前面隐藏元素,但是大小位置还有
display:none 隐藏元素并且去掉该元素的大小和位置
*/
.a{width:200px;height:200px;background:blue;}
.one{width:200px;height:200px;background:red;}
.two{width:200px;height:200px;background:green;}
5.转换标签类型
/*
标签分类
1、块级标签 可以设置宽高，可以自动换行
2、行级标签 不可以设置宽高，不能自动换行
3、行间块状标签 可以设置宽高，不能自动换行 img input
display
将行级标签转换为块级标签 display:block;
将块级标签转换为行级标签 display:inline;
将标签转换为行间块状标签 display:inline-block;
*/
div{width:100px;height:100px;background:red;}
span{width:100px;height:100px;background:red;}
img{display:block;}
网友评论