Day3 css属性

2018-08-18  本文已影响0人  zhazhaK丶

01.选择器的权重

02.浮动

03.文字环绕

04.清除浮动

05.display属性

06.定位

07.relative练习

08.盒子模型

09.居中


01.选择器的权重

类型选择(元素选择器):0001
class选择器:0010
id选择器:0100
伪类选择器:0001
层级(包含)选择器:多个选择器的权重之和
群组选择器:分开看每个选择器的权重
谁的权重的值大,谁的优先级就高

02.浮动

标准流:块标签一个占一行,从上往下布局。
行内标签一行可以显示多个,从左往右布局,直到遇到边界就自动换行

1.浮动:就是让竖着显示的标签横着来
float:left 和 right
注意:

#top{
                float: left;
                background-color: red;
                height: 150px;
                width: 100%;
            }
            #m1{
                float: left;
                height: 300px;
                width: 30%;
                background-color: pink;
            }
            #m2{
                float: left;
                height: 300px;
                width: 50%;
                background-color: goldenrod;
            }
            #m3{
                float: right;
                height: 300px;
                width: 20%;
                background-color: gold;
            }
            #bottom{
                float: left;
                height: 100px;
                width: 100%;
                background-color: blue;
            }
            
            #top1{
                float: left;
                background-color: darkblue;
                height: 150px;
                width: 100%;
            }
            #mm1{
                float: left;
                background-color: deeppink;
                height: 300px;
                width: 25%;
            }
            #mm2{
                float: left;
                height: 100px;
                width: 75%;
                background-color: blueviolet;
            }
            #mm3{
                float: left;
                height: 200px;
                width: 50%;
                background-color: black;
            }
            #mm4{
                float: left;
                height: 100px;
                width: 25%;
                background-color: darkgreen;
            }
            #mm5{
                float: left;
                height: 200px;
                width: 25%;
                background-color: palegreen;
            }
        </style>
    </head>
    <body>
        
        
        <!--<div id="red" style="width: 100px; height: 80px; background-color: red;">
                <a href="">百度一下</a>
        </div>
        <div id="green" style="width: 200px; height: 180px; background-color: greenyellow;">
            
        </div>-->
        
        
        <div id="top" align="center" >壹</div>
        <div id="m1" align="center">贰</div>
        <div id="m2" align="center">叁</div>
        <div id="m3" align="center">肆</div>
        <div id="bottom" align="center">伍</div>
        
        <div id="top1"></div>
        <div id="mm1"></div>
        <div id="mm2"></div>
        <div id="mm3"></div>
        <div id="mm4"></div>
        <div id="mm5"></div>

03.文字环绕

文字环绕:被文字环绕的标签浮动,文字标签不浮动

/*被环绕的对象浮动*/
            #d1{
                float: left;
                width: 60px;
                height: 60px;
                background-color: royalblue;
            }
            #d2{
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或
        </div>

04.清除浮动

1.清除浮动:是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的

2.怎么清除浮动?

/*清除浮动方案2*/
        .clear{
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div style="height: 100px; background-color: red;"></div>
        <div style="background-color: aqua;"class="clear">
            <div style="width: 30%; background-color: black; height: 200px; float: left;"></div>
            <div style="width: 30%; background-color: brown; height: 200px; float: left;"></div>
            
            <!--1.清除浮动方案-->
            <!--<div id="" style="clear: both;"></div>-->
        </div>
        <div style="height: 100px; background-color: green;"></div>
    </body>
</html>

05.display属性

1.HTML中标签分为块和行内
2.css中标签分为三类:块、行内块、行内(display)

通过改变标签的display值,可以让一个标签在块、行内块和行内之间任意切换
注意:inline-block标签的右边默认都有一个间隙,不能和其他标签无缝连接(这个问题目前无法解决)

06.定位

1.距离:

top:标签顶部距离其它标签的位置
bottom:标签的底部到距离其他标签的位置
left:标签的左边到距离其他标签的位置
right:标签的右边到距离其他标签的位置

2.position

想要设置标签的top,bottom,left,right的值有效,必须设置标签的参考方式
initial:(默认值) 没有参考对象
absolute:相对第一个position的值是非static的父标签进行定位
relative:正常位置定位(按标准流定位)
fixed:相对于浏览器定位
sticky:不滚动的时候按标准流定位,滚动的时候相对浏览器定位

#d1{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: cadetblue;
                /*margin-top: 320px;*/
                top: 200px;
            }
            #d2{
                position: fixed;
                width: 100px;
                height: 100px;
                background-color: gold;
                top: 100px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            
        </div>
        <div id="d2">
            
        </div>

07.relative练习

div div{
                float: left;
                position: relative;
                height: 100px;
                width: 100px;
                background-color: green;
                margin-left: 20px;
                margin-top: 20px;
            }
            #d1{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="d1" style="width: 500px; background-color: gold;">
            <div background-color: gray></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

08.盒子模型

每一个标签都是由四个部分组成:

/*注意:在写网页的时候,在样式表的最前面关闭自带的margin和padding*/
        *{
            margin: 0;
            padding: 0;
        }
            div{
                background-color: sandybrown;
                /*1.设置内容大小*/
                width: 100px;
                height: 100px;
                
                /*2.padding的值有四个
                 可以单独设
                 */
                /*padding-left: 20px;
                padding-top: 10px;*/
                padding: 10px 40px;  /*上下是20,左右是40*/
                
                /*3.边框
                    可以单独设,也可以一起设
                    格式:宽度 样式 颜色
                    a.样式 solid-实线  dotted-点状线 double-双线 dashed-虚线
                    */
                    /*同时设置4条边*/
                border: 3px solid black;
                
                 /*单独设置某一边*/    
                border-left-color: blue;
                
                /*4.外边距*/
                /*单独设置每个外边距*/
                margin-top: 100px;
                margin-left: 50px;
                margin-right: 100px;
                
                /*同时设置4个外边距*/
                /*margin: 上 右  下 左*/
                margin: 20px;
                
                /*5.设置圆角*/
                /*设置边框圆角的弧度*/
                border-top-left-radius: 50px;
                border-bottom-right-radius: 50px;
            }
        </style>
    </head>
    <body>
        <div id="">
            Zzz
        </div>

09.居中

1.垂直居中

*{
            margin: 0;
            padding: 0;
        }
            div{
                height: 100px;
                width: 100%;
                line-height: 100px;
                background-color: gold;
                text-align: center;
                }
                p{
                    display: inline-block;
                    /*垂直居中*/
                    line-height: 50px;
                    height: 50px;
                    width: 200px;
                    background-color: hotpink;
                    /*水平居中*/
                    text-align: center;
                    
                }
        </style>
    </head>
    <body>
        <div>
            <p>你说你马呢???</p>
        </div>
上一篇 下一篇

猜你喜欢

热点阅读