一、css继承样式

  1. <style>
  2.         body{
  3.             text-align: center;
  4.             color: red;
  5.             font-size: 14px;
  6.             font-family: "微软雅黑"；
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     /* 文本和字体相关样式都是可以继承
  12.     1、html标签的分类
  13.     2、如何实现元素垂直水平居中
  14.     3、css的请求
  15.     4、盒子模型
  16.     5、你如何理解web标签及w3c的规范
  17.     6、说一下css3的功率-->*/
  18.     <div>
  19.         <p>
  20.             hello world
  21.         </p>
  22.     </div>
  23. </body>
  24. </html>

二、width、height的继承

<style>
        *{margin: 0;padding: 0}
        /*子元素不设置width，它会继承父元素的width*/
        .one{
            height: 50px;
            background: aqua;
        }
        /*height特殊 父元素不设置height，它会获取子元素的高*/
    </style>
</head>
<body>
    <div class="one">
    </div>
</body>
</html>

三、jquery

<style>
        .one{
            width:100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    /* jquery选择器 ojax*/
    <div class="one">
    </div>
    <button class="btn">toggle</button>
    <script>
        var $one=$(".one");
        console.log($one)
        $(".btn").click(function(){
            //$(".one").hide();
            if($('.one').is(":visible")){
                $(".one").hide(300)
            }else{
                $(".one").show(300)
            }
        })
    </script>
</body>
</html>

四、盒子模型

 <style>
        div{
            width:100px;
            height: 100px;
            background-color: blueviolet;
            margin-top:100px;
            padding-left:20px;
            border:10px solid black;
            /* box-sizing:content-box/border-box给border padding,不会改变它的高和宽*/
            box-sizing: border-box；
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

五、float

<style>
        /*浮动就是元素相对于整个页面漂浮起来了*/
        .one{
            width: 100px;
            height: 100px;
            background: red;

            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
    /* float的原理*/
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

六、float的目的

<style>
        li{
            float: left;
            list-style: none;
            line-height: 50px;
        }
        ul{
            background: pink;
            /*子元素float父元素的高度会坍塌
            如何让父元素重新获取高度 overflow：hidden；*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    /*就是为了让元素去并排显示*/
    <ul>
        <li>鹿晗</li>
        <li>魏无羡</li>
        <li>鹿晗</li>
    </ul>
</body>
</html>

七、float的问题

<style>
        /*子元素float,父元素的高度会坍塌
        怎么样让父元素的高度回来*/
        .parent{
            width: 200px;
            background: red;
            overflow: hidden;
        }
        .child{
            width: 100px;
            height: 100px;
            float: left;
            background: blue;
        }
        .two{
            width: 200px;
            height: 200px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
    <div class="two">

    </div>
</body>
</html>

八、清除float

<style>
        /*
        1、给受到float影响的元素clear:both;
        2、给他爹*/
        .parent{
            width: 200px;
            background: red;
            overflow: hidden;
        }
        .two{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .three{
            /*clear: both;*/
            width: 300px;
            height: 300px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="two">
        </div>
    </div>
    <div class="three"></div>
</body>
</html>

九、外部样式表

<link rel="stylesheet" href="css/index.css">