CSS属性

作者: pubalabala | 来源:发表于2018-08-16 19:16 被阅读0次

    选择器的权重

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <!--
                类型选择(元素选择器)0001
                class选择器:0010
                id选择器:0100
                伪类选择器:0001
                层级(包含)选择器: 多个选择器的权重之和
                群组选择器: 分开看每个选择器的权重
                
                谁的权重大, 谁的优先级就高
            -->
        </body>
    </html>
    
    

    浮动

    <!--
        标准流:块标签一个占一行,从上往下布局。默认宽度是100%
               行内标签一行可以显示多个,从左往右布局,知道遇到边界就自动换行  
               
        脱流:浮动、定位  
        1.浮动:就是让竖着显示的标签横着来,块的默认宽度是内容的宽度
        float: left和right
        
        注意:1.如果要使用浮动,那么同一级的所有的标签都要浮动
             2.如果父标签浮动,那么子标签的位置会跟着一起动
             3.布局基本顺序:从上往下,从左往右
            
        
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #top{
                    float: left;
                    background-color: red;
                    /*background-color: rgba(0,0,0,0);*/
                    height: 150px;
                    width: 100%;  
                    
                }
                #m1{
                    float: left;
                    
                    height: 500px;
                    width: 20%;
                    background-color: deeppink;
                    /*background-color: rgba(0,0,0,0);*/
                }
                #m2{
                    float: left;
                    height: 500px;
                    width: 70%;
                    background-color: goldenrod;
                    /*background-color: rgba(0,0,0,0);*/
                }
                #m3{
                    /*float: right;*/
                    height: 500px;
                    /*width: 10%;*/
                    background-color: green;
                }
                #bottom{
                    float: left;
                    width: 100%;
                    height: 100px;
                    background: yellowgreen;
                }
                
            </style>
        </head>
        <body>
            
            <div id="top"></div>
            <div id="m1"></div>
            <div id="m2">
                <p>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私</p>
            </div>
            <div id="m3">
                阿是否可江安河上的发
            </div>
            <div id="bottom"></div>
        </body>
    </html>
    
    

    文字环绕

    <!--
        文字环绕: 被文字环绕的标签浮动,文字标签不浮动
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                /*被环绕的对象浮动*/
                #d1{
                    float: left;
                    width: 60px;
                    height: 60px;
                    /*background-color: yellow;*/
                }
                #d2{
                    width: 400px;
                }
                
            </style>
        </head>
        <body>
            <img id="d1" src="img/luffy3.png"/>
                
            <p id="d2">
                方递费加哈萨克货到付款撒都<br />分开哈萨克东方航<br />空撒货到付款阿士大夫<br />看撒谎快递费开始浇返回
            </p>
        </body>
    </html>
    
    

    清除浮动

    <!--
        1.清除浮动:是指清除因为浮动而产生的问题(高度塌陷) --- 问题不是什么时候都会产生的
        
        2.怎么清除浮动?
        a.添加空的div:
            在父标签(高度塌陷的标签)的最后添加一个空的div,并且设置这div的样式表: clear:both
            
            (可能会产生大量的额外的代码)
        b.设置overflow:
            在父标签中设置样式表的overflow的值为hidden  
            
        c.after{display:block;clear:both;content:".";visibility:hidden;height:0;} clear{zoom:1;}
        
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                
                /*2.清除浮动方案2*/
                /*.clear{
                    overflow: hidden;
                }*/
                
                /*3.清除浮动方案3*/
                .clear:after{
                    display: block;
                    clear: both;
                    content: "";
                    visibility: hidden;
                    height: 0;
                }
                .clear{
                    zoom: 1;
                }
            </style>
        </head>
        <body>
            
            <div style="height: 100px; background-color: red;"></div>
            <div style="background-color: royalblue;" class="clear">
                <div style="width: 30%; background-color: peru; float: left;">
                    <img src="img/luffy3.png" alt="" />
                </div>
                <div style="width: 30%; background-color: plum; height: 200px; float: left;"></div>
                
                <!--1.清除浮动方案1-->
                <!--<div id="" style="clear: both;"></div>-->
            </div>
            <div style="height: 100px; background-color: green;"></div>
        </body>
    </html>
    
    

    display属性

    <!--
        1.HTML中标签分为块和行内
        2.CSS中中标签分为3类:块、行内块、行内(display)
        (在标准流中)
        block:块(一个占一行,默认宽度是100%,高度默认根据内容来确定;直接设置宽高有效)
        inline-block:行内块(一行可以有多个,默认宽高是内容的宽高;直接设置宽高有效)
        inline:行内(一行可以有多个,默认宽高是内容的宽高;设置宽高无效)
        
        通过改变标签的display的值,可以让一个标签在块、行内块个行内之间任意切换
        
        
        注意:inline-block标签的右边默认都有一个间隙,不能和其他标签无缝连接(这个间隙目前没有办法清除)
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                p{
                    /*display: block;*/
                    background-color: hotpink;
                    width: 200px;
                    height: 100px;
                }
                
            </style>
        </head>
        <body>
            <input type="text" name="" id="" value=""  style="width: 100px;height: 100px; display: block;"/>
            <span id="" style="background-color: wheat; width: 300px; height: 100px;">
                ABC拿到的
            </span>
            <span id="" style="background-color: brown; display: inline-block;">
                ABC拿到的
            </span>
            
            <p id="" style="display: inline-block;">
                aaa     <br />
                bbb
            </p>
            <span id="">
                ajssjjdh
            </span>
            
        </body>
    </html>
    
    

    定位

    
    <!--定位
        1.距离
        top: 标签顶部距离其他标签的位置
        bottom: 标签的底部距离其他标签的位置
        left: 标签的左边距离其他标签的位置
        right: 标签的右边到其他标签的位置
        
        2.position
        想要设置标签的top,bottom,left,right的值有效,必须设置标签的参考方法
        --- initial:(默认值)没有参考对象
        absolute: 相对第一个position的值是非static,非initial的父标签进行定位
        relative: 正常位置定位(按标准流定位)
        fixed: 相对于浏览器定位
        sticky: 不滚动的时候按标准流布局,滚动的时候相对浏览器定位
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                #d1{
                    position: relative;
                    width: 500px;
                    height: 500px;
                    background-color: cadetblue;
                    /*margin-top: 320px;*/
                    /*top: 320px;*/
                    top: 20px;
                }
                #d2{
                    position: fixed;
                    width: 100px;
                    height: 100px;
                    background-color: salmon;
                    /*top: 100px;*/
                    right: 20px;
                    bottom: 50px;
                }
                #d3{
                    /*float: right;*/
                    position: sticky;
                    /*top: 120px;*/
                    width: 100px;
                    bottom: 20px;
                    /*right: 20px;*/
                    
                }
            </style>
        </head>
        <body>
            <div id="d1">
                <div id="d2">
                    
                </div>
            </div>
            
            <div id="" style="height: 20px; background-color: yellow; width: 200%;">
                
            </div>
            
            <div id="d3" style="height: 60px; background-color: purple;">
                
            </div>
            
            
            
        </body>
    </html>
    
    

    relative练习

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            <style type="text/css">
                div div{
                    float: left;
                    width: 100px;
                    height: 100px;
                    background-color: green;
                    /*position: relative;*/
                    /*left: 20px;*/
                    /*top: 20px;*/
                    margin-left: 20px;
                    margin-top: 20px;
                }
                
                #d1{
                    overflow: hidden;
                }
                
            </style>
            
        </head>
        <body>
    
            
            <div id="d1" style="width: 500px; background-color: yellow;">
                
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                
                <!--js代码-->
                <!--<script type="text/javascript">
                    
                    for (var i = 0; i < 100; i++) {
                        document.write("<div></div>")
                    }
                </script>-->
                
                
                
            </div>
            
            <div id="" style="height: 200px; background-color: salmon;">
                
            </div>
            
            
        </body>
    </html>
    
    

    盒子模型

    <!--
        每一个标签都是由4个部分组成:
        1.内容:显示标签内容的部分,可见的(设置宽和高的值,就是设置内容部分的大小)
        2.内边距(padding):可见的,不能显示内容(通过设置padding来改变其值,默认是0)
        3.边框(border):可见的,如果有内边距边框就显示在内边距上,否则显示在内容上
        4.外边距(margin):不可见的,但是会占据浏览器的空间
        
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            <style type="text/css">
                /*注意:以后在写网页的时候,在样式表的最前面关闭自带的所有的margin和padding*/
                /**{
                    margin: 0;
                    padding: 0;
                }*/
                body,p,a{
                    margin: 0;
                    padding: 0;
                }
                    
                #d1{
                    
                    
                    
                    float: left;
                    background-color: sandybrown;
                    /*1. 设置内容大小*/
                    width: 100px;
                    height: 100px;
                    
                    /*2. padding的值有四个
                     * 可以单独设,也可以一起设
                     */
                    /*padding-left:20px ;
                    padding-top: 10px;*/
                    padding: 10px;  /*上下左右的内边距都是10*/
                    padding: 20px 40px;  /*上下是20,左右是40*/
                    
                    /*3.边框
                     * 可以单独设,也可以一起设
                     * 格式: 宽度 样式 颜色
                     * a.样式 solid-实线 dotted-点状线  double-双线  dashed-虚线
                     */
                    
                    /*单独设置一条边框的宽度、样式和颜色*/
                    /*border-left:5px solid red;
                    border-bottom:8px solid green;*/
                    
                    /*同时设置4条边框的宽度、样式和颜色*/
                    border: 3px solid black;
                    
                    /*单独设置某一条边的颜色*/
                    border-left-color: royalblue;  
                    
                    /*设置边框圆角的弧度*/
                    /*border-radius: 5px;*/
                    border-top-left-radius: 30px;
                    border-bottom-right-radius: 30px;
                    
                    
                    /*4.外边距*/
                    /*单独设置每个外边距*/
                    /*margin-top: 100px;
                    margin-left: 50px;
                    margin-right: 100px;*/
                    
                    /*给所有的外边距设置成一样的值*/
                    /*margin:上 右 下 左
                     *margin: 上/下 右/左
                     */
                    margin: 20px;
                    
                    
                }
            </style>
            
        </head>
        <body>
            
            <div id="d1">
                abc
            </div>
            <div id="" style="height: 100px; width: 100px; background-color: blueviolet; float: left;">
                
            </div>
            
        </body>
    </html>
    
    

    居中

    
    <!--1.垂直居中
        a.固定标签高度
        b.设置line-height的值和高度一样
    -->
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                #d1{
        
                    height: 100px;
                    width: 100%;
                    line-height: 100px;
                    background-color: hotpink;
                    text-align: center;
                    
                }
                #p1{
            
                    display: inline-block;
                    /*垂直居中*/
                    height: 50px;
                    line-height: 50px;
                    
                    width: 300px;
                    background-color: green;
                    
                    /*水平居中*/
                    text-align: center;
                    
                }
            </style>
        </head>
        <body>
            
            <div id="d1">
                <div id="p2">
                    <p id="p1">床前明月光,疑是地上霜</p>
                </div>
                
            </div>
            
        </body>
    </html>
    
    

    homework

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                body{
                    margin: 0;
                    padding: 0;
                    background-color: rgb(241,243,240);
                }
                
                #box{
                    top: 100px;
                    position: absolute;
                }
                
                #rect{
                    width: 340px;
                    height: 420px;
                    border: 10px solid;
                    top: 30px;
                    position: relative;
                    float: left;
                    
                }
                
                #title{
                    width: 100%;
                }
                
                #box1{
                    float: left;
                }
                
                #box1 img{
                    top: 80px;
                    left: 40px;
                    position: absolute;
                    margin: 10px,10px,10px,10px;
                }
                
                #box2{
                    margin-left: 40px;
                }
                
                .box{
                    width: 380px;
                    height: 470px;
                    background-color: white;
                    float: left;
                    margin-left: 20px;
                    position: relative;
                }
                
                .box img{
                    top: 0px;
                    left: 15px;
                    position: relative;
                }
                
                
                
                .t1{
                    font-size: 30px;
                    font-weight: bold;
                    float: left;
                    margin: 20px;
                    margin-right: 0;
                }
                
                .lead{
                    height: 40px;
                    float: left;
                    margin: 20px;
                    margin-left: -10px;
                }
                .t2{
                    font-size: 20px;
                    float: left;
                    margin: 28px;
                    margin-left: 0px;
                }
                
                .btimg{
                    margin-right: 6px;
                    margin-top: 6px;
                }
                
                /*#leader{
                    position: fixed;
                    float: right;
                }
                */
            </style>
        </head>
        <body>
            
            <div id="box">
                <div id="title">
                    <h1 align="center"><b>——居家优品——</b></h1>
                </div>
                <div id="box1">
                    <div id="rect"></div>
                    <img src="img/1.jpg"/>
                </div>
                <div id="box2" class="box">
                    <p class="t1">家电馆</p>
                    <img class="lead" src="img/1_01.png"/>
                    <p class="t2">家电好物节</p>
                    <img src="img/2.jpg"/>
                    <img class="btimg" src="img/3.jpg"/>
                    <img class="btimg" src="img/4.jpg"/>
                </div>
                <div id="box3" class="box">
                    <p class="t1">我爱我家</p>
                    <img class="lead" src="img/1_01.png"/>
                    <p class="t2">品质生活馆</p>
                    <img src="img/5.jpg"/>
                    <img class="btimg" src="img/6.jpg"/>
                    <img class="btimg" src="img/7.jpg"/>
                </div>
                
                <!--<div id="leader">
                    <img src="img/1_02.png"/>
                    <img src="img/1_04.png"/>
                    <img src="img/1_05.png"/>
                    <img src="img/1_07.png"/>
                    <img src="img/1_09.png"/>
                    <img src="img/1_11.png"/>
                    <img src="img/1_13.png"/>
                </div>-->
    
                
                
                
                
                
            </div>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:CSS属性

          本文链接:https://www.haomeiwen.com/subject/qogobftx.html