CSS入门3(0722)

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;}