41CSS 进阶

1.css的三种引入方式

1.行内样式 权重最高

<div style = 'width:200px;color: red;'>
    alex
</div>

2.内接式

<head>
    <style>
        div{
            color:red;
        }
    
    </style>
</head>

3.外接式

​
<head>
    <link href='./index.css'/>
</head>

2选择器

  • 基本选择器

    种类语法作用
    标签选择器 div{} 选中页面中所有的div标签，选的共性
    类选择器 .box{} 找的是''共性''的元素，class可以重复，又可以设置多个
    id选择器 #box{} 找的是特性的元素，唯一的，通常与接下来学的js有关
    统配符选择器 *{} 不建议在工作中使用，可以做测试，重置样式库:https://meyerweb.com/eric/tools/css/reset/

  • 高级选择器

    种类语法作用
    后代选择器 div p{} 选中后代（所有孩子）的元素
    子代选择器 div>p{} 选取亲儿子的元素
    组合选择器 div，p,a,span 多个标签选择器组合，构成了组合选择器
    交集选择器 div.active 前面的是标签选择器，第二个是类选择器

  • 伪类选择器 爱恨准则'LoVe HAte'

    种类作用 
    a:link{} 没有被访问过的样式  
    a:visited{} 访问过后的样式  
    a:hover{} 悬浮时的样式  
    a:active 摁住时候的样式  

权重的问题

数id 类 标签的数量

行内样式1000>id 100> 类10>标签1

 

 

今日内容

盒模型

属性

width 内容的宽度

height 内容的高度

padding 内边距内容到边框之间的距离

border边框

margin外边距

需求 做一个302*302的盒子

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*有多种方法*/
        .box{
            width: 200px;
            height: 200px;
            /*四个方向全部设置*/
            padding: 50px;
            border: 1px solid red;
            
        }
    </style>
</head>
<body>
<!--做一个302*302的盒子-->
<div class="box"></div>
​
</body>
</html>

盒模型的计算

如果保证盒模型不变，加padding就要对盒模型的宽或者高减保证盒模型不变

通过padding能调整子内容的位置，对于padding来说通常描述的是父子之间的距离

width

定义:内容的宽度

height

定义:内容的高度

padding

定义:内边距 内容到边框之间的距离

  .container{
            width: 200px;
            height: 200px;
            
            /*一个值  四个方向都有值*/
            /*padding: 30px;*/
            /*两个值:上下  左右*/
            /*padding: 20px 30px;*/
            /*三个值: 上 左右  下 */
            /*padding: 30px 20px 40px;*/
            /*四个值: 上 右 下 左 顺时针*/
            padding: 20px 30px 40px 50px;
  }

四个方向单独设置

padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;

border

定义:盒子的边框

.box{
            width: 300px;
            height: 300px;
            
            /*border: 1px solid darkred;*/
​
            /*根据方向来设置属性*/
            /*border-left: 1px solid darkred;*/
            /*border-right: 5px dotted darkgoldenrod;*/
            /*border-top: 10px double darkblue;*/
            /*border-bottom: 1px solid greenyellow;*/
            /*根据三要素*/
            /*border-width: 5px 10px 1px;*/
            /*border-style: solid double dashed;*/
            /*border-color: red yellow darkcyan darkgray;*/
            /*border: 0;*/
            border-radius: 50%;
        }

 

制作小三角

 .sanjiao{
            width: 0px;
            height: 0px;
            border-left: 50px solid transparent;
            border-bottom: 50px solid green;
            border-right: 50px solid transparent;
        }

margin

外边距:一个盒子到另一个盒子的距离

前提条件:标准文档流下

1.水平方向 不会出现任何问题

2.垂直方向上，会出现塌陷问题，我们以后再设置页面布局的时候，只设置一个方向，不能设置两个方向

 

让标准文档流下的盒子居中

/*让盒子居中*/
            /*margin-right: auto;*/
            /*margin-left: auto;*/
            margin: 0 auto;

浮动

要浮动一起浮动，另外，有浮动，清除浮动

浮动的好处

浮动实现元素并排

浮动的现象

1.投标

2.字围效果

3.如果标签一旦浮动，就不区分行内标签还是块级标签，可以任意设置宽高

4.贴边现象

浮动带来的问题

如果父盒子没有设置高度，子盒子都设置浮动(脱标了，不在文档中占位置)撑不起父盒子的高度

 

清除浮动

1.给父盒子设置固定高度

2.内墙法

1.在最后一个浮动元素后面添加一个空的块级标签，给这个标签取类名clearfix

 

.clearfix{
    clear:both;
    
}

代码多了，显得冗余

3.伪元素清除法

给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

.clearfix{
    content:'.';
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

4.overflow:hidd

值描述
visible 默认值，内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其他内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其他内容
inherit 规定从父元素继承overflow的值

逐渐演变成overflow：hidden清除法。

其实它是一个BFC区域: https://blog.csdn.net/riddle1981/article/details/52126522

到此为止。关于浮动的实现并排、清除浮动的四个用法已经介绍完毕，大家一定要熟记于心。

https://www.cnblogs.com/majj/p/9040408.html

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:20px;
            height:200px;
            padding:50px;
            background-color: darkblue;
            border:20px solid yellow;
            margin-left: 30px;

        }
    </style>
</head>
<body>
    <div class="box">yang</div>
    <div class="box">ting</div>




</body>
</html>
盒模型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 250px;
            height: 250px;
            /*padding: 25px;*/
            padding-left:50px ;
            padding-top: 50px;
            border:1px solid red;
            background-color: yellow;
            margin-bottom: 30px;

        }
        span{
            background-color: darkblue;
            font-size:12px;
            padding:20px;
        }
    </style>
</head>
<body>
<div class="box">yang</div>
<span>小米商城</span>
</body>
</html>
盒模型的计算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: lawngreen;
            /*四个方向都有值*/
            /*padding: 30px;*/
            /*默认第一个参数上下  第二个参数左右*/
            /*padding: 20px 30px;*/
            /*上   左右 下*/
            /*padding: 20px 30px 40px;*/
            /*四个值*/
            /*padding: 20px 30px 40px 50px*/
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 40px;
            padding-left:50px;
        }




    </style>
</head>
<body>
<div class="box1">yang</div>

</body>
</html>
padding
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            /*background-color: indigo;*/
            /*根据方向来设置属性*/
            /*!*border: 20px solid gold;*!*/
            /*!*dashed 虚线*!*/
            /*border-left:10px dashed darkgoldenrod;*/
            /*!*double 双实现*!*/
            /*border-right:15px double brown;*/
            /*!*dotted 点线*!*/
            /*border-bottom: 16px dotted gold;*/
            /*!*solid实线*!*/
            /*border-top: 18px solid seagreen;*/
            /*根据三要素*/
            border-width: 5px 10px 2px ;
            border-style: solid double dashed;
            border-color:red yellow darkcyan blue;
            /*设置圆角边框   radius 半径*/
            border-radius: 5%;


        }
    </style>
</head>
<body>
<!--border三要素  粗细 样式  颜色-->
    <div class="box"></div>

</body>
</html>
border
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*--设置三个方向   改宽高的值一步步看结果自己
        构造三角形*/
        .sanjiao{
            width:0px;
            height: 0px;
            /*transparent   透明色*/
            border-left:50px solid transparent;
            /*没设透明色的是指向反方向的*/
            border-bottom:50px solid green;
            border-right:50px solid transparent;
        }
    </style>
</head>
<body>
    <div class="sanjiao"></div>
</body>
</html>
三角形的创建
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标准文档流下水平方向不会出现任何问题*/
        /*<!--span宽高不好使 看不见  display
        改成块 在行内  还可以设置标签-->*/
        .top{
            display:inline-block;
            width:200px;
            height:200px;
            background-color: red;
            margin-right: 30px;
        }
        .header{
            display:inline-block;
            width: 300px;
            height: 300px;
            background-color: yellow;
            margin-left:50px;
        }
    </style>
</head>
<body>
    <span class="top"></span><span class="header"></span>
</body>
</html>
margin水平方向不会出现任何问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            margin-bottom: 80px;
            width:200px;
            height:200px;
            background-color: red;

        }
        .header{
            /*margin-top: 30px;*/
            width: 300px;
            height: 300px;
            background-color: yellow;

        }
    </style>
</head>
<body>
<!--css奇淫技巧 margin垂直方向塌陷
    如何避免 只要设置一个方向
    margin 描述的是兄弟标签之间的距离
    两个盒子之间
    padding 描述的是父子标签


-->
    <div class="top"></div>
    <div class="header"></div>
</body>
</html>
margin垂直方向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--一个盒子在一个盒子上面显示-->
    <style>
        /*前提都是在标准文档流下*/
        .father{
            width:400px;
            height:400px;
            background:green;
            border: 2px solid darkblue;
        }
        .xiongdi{
            width: 200px;
            height:200px;
            background-color: yellow;
            margin-left: 50px;
            /*调子盒子 如果上面不设置父盒子边框会把父框一起推进*/
            /*如果设置则不会*/
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="xiongdi"></div>
    </div>
</body>
</html>
padding 与 margin 的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*清除默认样式*/
        *{
            padding:0;
            margin:0;
        }
        /*设置字体*/
        body{
            font-size: 14px;
            color: #fff;
        }
        /*默认清除网页所有内容下划线*/
        a{
            text-decoration:none;
        }

        #top{
            width: 100%;
            background: #000;
            height:40px;
            /*文本垂直居中*/
            line-height: 40px;

        }
        .container{
            width: 1226px;
            /*让盒子居中*/
            /*margin-right: auto;*/
            /*margin-left: auto;*/
            /*简单写法的居中*/
            margin: 0 auto;
        }
        /*设置顶部标题的字体大小和颜色*/
        #top a{
            font-size: 12px;
            color: #b0b0b0;
        }
        /*鼠标悬浮的时候改颜色*/
        #top a:hover{
            color:#fff
        }
    </style>
</head>
<body>
<div id="top">
    <div class="container">
        <div class="top-l">
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="https://iot.mi.com/index.html"target="_self">LOT</a>
            <span class="sep">|</span>
        </div>



    </div>
</div>
</body>
</html>
版心设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#">百度一下</a>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=
b9999_10000&sec=1542715171889&di=3d4a14f033341d5df477f23c4175
fb2e&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-fo3dSag_xI4
khGko9WTAnF6hhy%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D9872e9
f5c21b9d168a929265c6ee98b9%2Fbf096b63f6246b60e287c95ee7f81a4c510fa20b.jpg"
     alt="">

</body>
</html>
标准文档流下的微观现象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: red;
            /*设置行内显示
            display:inline-block*/
            /*display: inline-block;*/
            /*给盒子设置浮动，就脱离了标准文档流*/
            float: left;
        }
        .box2{
            width: 300px;
            height:300px;
            background-color: yellow;
            /*display: inline-block;*/
            /*手动的调挨近边界*/
            /*margin-left:600px;*/
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.box{*/
            /*background-color: red;*/
            /*!*设置浮动。这个盒子会有收缩现象*!*/
            /*float:left;*/
            /*width: 400px;*/
            /*height:50px;*/
            /*padding-top: 50px;*/

        /*}*/
        span{
            float: left;
            width: 100px;
            height:100px;
            background-color: yellow;

        }
    </style>
</head>
<body>
<!--<div class="box">yang</div>-->
    <span>LAL</span>
<!--<div>啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦-->
    <!--啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>-->

</body>
</html>
浮动带来的影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            /*width: 500px;*/
            /*height:500px;*/
            /*border: 1px solid darkblue;*/


        }
        .box{
            width: 200px;
            height: 600px;
            background-color: darkblue;
            float:left;
        }
        .wrap{
            width: 300px;
            height: 300px;
            background-color: green;
            float:left;
        }
        .box2{
            width:400px;
            height:300px;
            background-color: seagreen;
            float:left;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
        <div class="wrap"></div>
        <div class="box2"></div>
    </div>
</body>
</html>
浮动带来的影响2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            /*清除浮动的时候使用的方式，给父盒子设定固定高度*/
            /*height: 40px;*/
            background-color:red;
        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color:lawngreen;
            
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: hotpink;

        }
        .header{
            width:500px;
            height: 100px;
            background-color: darkblue;

        }



    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="header"></div>

</body>
</html>
浮动带来的问题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*1.给父盒子设置高度*/
            /*height: 40px;*/


        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix{
            /*表示清除左边盒子和右边盒子给*/
            clear: both;
        }
    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clearfix"></div>
</div>
<div class="header"></div>

</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:before{
            content: '乐乐乐';
        }
        div:after{
            /*行内的元素*/
            content:'鸡汤';
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>alex</div>

</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;

        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }
        .clearfix:after{
            content: '.';
            display: block;
            /*隐藏，元素不占位置*/
            /*display: none;*/
            visibility: hidden;
            clear: both;
        }

    </style>
</head>
<body>
<div class="top clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="header"></div>

</body>
</html>
伪元素清除法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            overflow: scroll;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /*继承*/
            /*overflow: inherit;*/
            /*超出部分可见*/
            /*overflow: visible;*/
            /*超出部分隐藏*/
            /*overflow: hidden;*/
            /*超出部分有滚动条*/
            /*overflow: scroll;*/
            /*overflow: auto;*/
        }
    </style>
</head>
<body>
    <div class="box">
        导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
        导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

    </div>
</body>
</html>
overflow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            width: 100%;
            background-color: darkorange;
            /*BFC*/
            /*但是不要忘了它本来的一层的意思*/
            overflow: hidden;



        }
        .top .left{
            width: 500px;
            height: 40px;
            float: left;
            background-color: darkgreen;
        }
        .top .right{
            width: 100px;
            height: 40px;
            float: right;
            background-color: darkmagenta;
        }
        .header{
            width: 500px;
            height: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class="top">
    <div class="left"></div>
    <div class="right"></div>

</div>
<div class="header"></div>

</body>
</html>
overflow 清除浮动

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

posted on 2018-11-25 10:51  小王子QAQ  阅读(54)  评论(0)    收藏  举报