暑期web实训two day

最新推荐文章于 2020-09-07 03:14:43 发布

WindSearcher

最新推荐文章于 2020-09-07 03:14:43 发布

阅读量294

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/qq_40511966/article/details/95235429

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.css选择器

这篇博文容纳了大部分的选择器

https://blog.csdn.net/qq_40511966/article/details/81038050

2.层叠与继承

<!--同优先级后定义的覆盖前面定义，没覆盖的可以继承（内部样式与外部样式，引入的外部样式如果在内部样式，则表现为外部样式）
标签<类< ID<后代<复杂后代-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠与继承</title>
    <style>
        body #box h2{
            color:pink;
        }
        #box h2{
            color:gray;
        }
        #h2{
            color:orange;
        }
        .h2{
            color:green;
        }
        h2{
            color:red;
        }

        a{
            width:140px;
            height:30px;
            text-align:center;
            line-height:30px;
            background-color:#c00;
            color:#fff;
            text-decoration: none;
            display:block;
            float:left;
        }
        /*float可以自动把其变成层级标签*/

        a:link{}
        a:visited{
            color:#fff;
        }
        a:hover{
            font-weight:bold;
            background:#00f;
        }
        a:active{
            text-decoration: line-through;
        }
    </style>
    <!--同优先级后定义的覆盖前面定义，没覆盖的可以继承（内部样式与外部样式）
    标签<类< ID<后代<复杂后代-->
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div id="box">
        <h2 class="h2" id="h2">
            我是什么颜色？
        </h2>
    </div>
    <a href="#">伪类</a>

</body>
</html>

3.框模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框模型box model</title>
    <style>
        #a{
            width:300px;
            height:300px;
            border:1px solid #c00;
            padding:60px 50px 40px 30px;
            margin:30px auto;
        }

        #b{
           width:300px;
            height:300px;
            border:1px solid #c00;
            padding:10px 20px 30px;/*上左右下*/
            margin:40px auto;
        }
        /*width是盒子内容的宽度，不是盒子的宽度，a的高度462px,上下内边距+上下外边距+上下边框*/
        /*margin的叠加：两个盒子上下之间的距离是两者的margin-bottom和marign-top之间的最大值*/
    </style>
</head>
<body>
    <div id="a">
        框模型
    </div>
    <div id="b">
        距离
    </div>
</body>
</html>

4.清除浮动

第一种给父元素加高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        /*清除浮动第一种方法父元素加宽度和高度，缺点：无法知道内容有多高*/
        .parent{
             height:230px;

        }

       .f{
            width:200px;
            height:200px;
            border:1px solid #c00;
            font-size:50px;
            float:left;
        }
       
    </style>
</head>
<body>
   <div class="clearfix  parent">
       <div class="f">1</div>
       <div class="f">2</div>
       <div class="f">3</div>
       <div class="f">4</div>
       <!--<div class="clear"></div>-->

   </div>
   <h2>浮动之后</h2>
</body>
</html>

第二种和第三种：给父元素加overflow:auto或者overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        /*清除浮动第一种方法父元素加宽度和高度，缺点：无法知道内容有多高*/
        .parent{
          
             overflow:auto; /*清除第二种方法：给父元素加overflow*/
             /*overflow:hidden;*/
        }

        .f{
            width:200px;
            height:200px;
            border:1px solid #c00;
            font-size:50px;
            float:left;
        }

       
    </style>
</head>
<body>
   <div class="clearfix  parent">
       <div class="f">1</div>
       <div class="f">2</div>
       <div class="f">3</div>
       <div class="f">4</div>
       <!--<div class="clear"></div>-->

   </div>
   <h2>浮动之后</h2>
</body>
</html>

第四种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
     

        .f{
            width:200px;
            height:200px;
            border:1px solid #c00;
            font-size:50px;
            float:left;
        }

        /*清除浮动第四种，给浮动后面出现的元素增加clear属性，其margin-top可能不起作用
          将h2放在.parent里面margin-top不起作用，放外面会起作用
        */
        h2{
            clear: both;
            margin-top:130px;
        }
        .clearfix{
            zoom:1;
        }
        /*!*建立clearfix类，给浮动父元素使用*!*/
        .clearfix::after{
            content:"";
            clear:both;
            font-size:0;
            height:0;
            display:block;
            visibility: hidden;
        }

     

    </style>
</head>
<body>
   <div class="clearfix  parent">
       <div class="f">1</div>
       <div class="f">2</div>
       <div class="f">3</div>
       <div class="f">4</div>
       <!--<div class="clear"></div>-->

   </div>
   <h2>浮动之后</h2>
</body>
</html>

第五种：给父元素加一个空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
     
        .f{
            width:200px;
            height:200px;
            border:1px solid #c00;
            font-size:50px;
            float:left;
        }


        .clear{
            clear:both;
        }

    </style>
</head>
<body>
   <div class="clearfix  parent">
       <div class="f">1</div>
       <div class="f">2</div>
       <div class="f">3</div>
       <div class="f">4</div>
       <div class="clear"></div>

   </div>
   <h2>浮动之后</h2>
</body>
</html>

5.规范化css写法

        ul,h3,p{
            padding:0;margin:0;
        }
        ul{list-style:none;}
        a{text-decoration:none;}
        img{border:none;display:block;}

WindSearcher

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
暑期web实训two day

1.css选择器这篇博文容纳了大部分的选择器https://blog.csdn.net/qq_40511966/article/details/810380502.层叠与继承&...
复制链接

扫一扫