css样式三

隐藏标签

display: none;/* 完全隐藏不占空间*/
/*visibility: hidden; 隐藏站空间*/

css盒子模型

100*100 div{
width:100 #div标签的宽度
height:100 #div标签的高度
}
padding: content内容和边框的距离
border:1px border边框宽度1px
 div{
            width: 100px;
            height: 200px;
            /*padding-top: 5px;*/
            /*padding-bottom: 10px;*/
            /*padding-left: 20px;*/
            /*padding-right: 40px;*/
            /*padding: 10px 20px 30px 40px; 顺序是上右下左 没有就写0*/
            padding: 10px 0 20px 30px;
            border: 3px solid deeppink;
        }

margin top距离上面标签的距离 left bottom right

1.两个标签一个设置了margin-right 会把另一个挤走 左右距离会累加
.c1{
            /* 如果没有兄弟标签 就跟他F父标签有距离*/
            margin-left: 100px;
            margin-right: 200px;
​
        }
        .c2{
           margin-left: 100px;
            
        }
2. 两个标签一个设置了margin-bottom 一个设置了margin-top 取两个之间最大的
.d1{
            width: 100px;
            height: 200px;
            /* div 独占一行 设置了margin 后 会默认你旁边有标签*/
            margin-left: 100px;
            margin-top: 200px;
            border: 2px solid red;
            /* 如果两个边框都设置了margin 区最大的*/
            margin-bottom: 200px;
        }
        .d2{
            /*margin-left: 400px;*/
            border: 2px solid blue;
            height: 400px;
            margin-top: 100px;
        }
3.简写方式
margin: 10px 20px 上下10 左右20
margin: 10px 5px 20px 30px 上右下左

float 浮动

.c1{
            
            width: 100px;
            height: 100px;
            /* 浮动 就具有display: inline-block效果 并且会把文字挤走*/
            /*display: inline-block;*/
            float: left;
        }
        .c2{
            
            width: 100px;
            height: 100px;
            float: right;
        }
浮动会造成父级标签塌陷:
解决问题:
给父级标签设置高度
clear:both
最标准的写法:伪元素选择器清除浮动,给父级标签加上下面这个类值
 .cc:after{
            /*height: 100px;*/
            content: '';
            display: block;
            clear: bot
            h;
​
​
        }
​
​
​
​