0
点赞
收藏
分享

微信扫一扫

React@16.x（50）路由v5.x（15）源码（7）- 实现 Link 和 NavLink

草原小黄河 2024-07-24 阅读 19
前端css

定位属性

  • position 设定元素的定位方式

static 静态定位(默认)

relative 相对定位

（1）以当前元素为参照物，移动指定距离的定位方式

（2）相对定位的元素会占据原有的物理位置

（3）案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相对定位</title>
        <style>
            .one,.two,.three{
                width:100px;
                height:100px;
            }
            .one{
                background:blue;
            }
            .two{
                background:tomato;
                /*相对定位*/
                position:relative;
                /*移动指定的距离*/
                left:100px;
                top:100px;
            }
            .three{
                background:green
            }
            .other{
                width:200px;
                height:200px;
                background:red;
                position:relative;
                left:200px;
            }
            .inner{
                width: 100px;
                height: 100px;
                background: purple;
                position:relative;
                left:100px;
                top:100px;
            }
            .grand{
                width:300px;
                height:300px;
                background:yellow;
                position: relative;
                left:400px;
            }
            .fahter{
                width: 200px;
                height:200px;
                background:beige;
            }
            .son{
                width:100px;
                height: 100px;
                background:tomato;
                position: relative;
                left:100px;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="other">
            <div class="inner"></div>
        </div>
        <div class="grand">
            <div class="fahter">
                <div class="son"></div>
            </div>
        </div>
    </body>
</html>
  • absolute 绝对定位

以其它元素为参照物，移动指定距离的定位方式

在绝对定位的时候，被定位的元素不会占据原有物理位置

关于绝对定位参考点

（1）如果该元素的外层元素中没有任何一个元素采用position定位，那么此时定位的参考元素变为body或者说是页面
案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .one,.two,.three{
            width:100px;
            height:100px;
        }
        .one{
            background:blue;
        }
        .two{
            background:tomato;
            position: absolute;
            left:100px;
            top:100px;

        }
        .three{
            background:green
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
 </html>

（2）如果元素的外层元素有定位设置，那么这个外层元素就成为该元素的定位参考点

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .other{
            width:200px;
            height:200px;
            background:red;
            position: relative;
            left:200px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: purple;
            position: absolute;
            left:100px;
            top:100px;

        }
    </style>
</head>
<body>
    <div class="other">
        <div class="inner"></div>
  </div>
</body>
 </html>

（3）如果元素的外层元素没有设置position的值，那么该元素将寻找距离自己最近的其它设定过position的外层元素作为参照物(多层嵌套)
案例

 <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>绝对定位</title>
         <style>
             .grand{
                 width:300px;
                 height:300px;
                 background:yellow;
                 /*position:relative;*/
                 /*left:400px;*/

             }
             .fahter{
                 width: 200px;
                 height:200px;
                 background:beige;
                 /*margin-left:20px;*/
                 position: relative;
                 left:200px;
             }
             .son{
                 width:100px;
                 height: 100px;
                 background:brown;
                 position: absolute;
                 left:100px;
                 top:100px;

             }
         </style>
     </head>
     <body>
         <div class="grand">
             <div class="fahter">
                 <div class="son"></div>
             </div>
         </div>
     </body>
  • 实战百度登录
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度一下-你就知道</title>
        <style>
            /*头部区域*/
           header>div:first-child{
               position:absolute;
               left:8px;
               top:8px;
           }
           header>span:last-child{
               position: absolute;
               right:10px;
               top:8px;
           }
           /*搜索区域*/
           .center{
                width: 500px;
                height:300px;
                background: tomato;
                position: relative;
                top:100px;
               /*计算属性*/
                left:calc(50% - 250px);
           }
           .list>div:first-child{
               position: absolute;
               top:50px;
               left:0px;
               background: beige;
               width: 250px;
           }
           .list>div:last-child{
               position: absolute;
               top:50px;
               left:250px;
               width: 250px;
               background: cyan;
           }
           /*底部区域*/
            footer{
                width:100%;
                background: tomato;
                position: absolute;
                bottom:10px;
            }
            /*侧边栏*/
            aside{
                width: 30px;
                height: 100px;
                background: purple;
                position: absolute;
                right:10px;
                bottom:80px;
            }
            /*遮罩层*/
            .mask{
                position: absolute;
                background: #ccc;
                opacity: 0.3;
                left:0px;
                right:0px;
                top:0px;
                bottom:0px;
            }
            /*登录*/
            .login{
                width: 600px;
                height: 300px;
                background: white;
                position: absolute;
                top:calc(50% - 150px);
                left:calc(50% - 300px);
            }
        </style>
    </head>
    <body>
        <div id="content">
            <header>
                <span><a href="http://news.baidu.com">新闻</a> hao123 地图 贴吧 视频 图片 网盘 更多</span>
                <span>设置 登录</span>
            </header>
            <div class="center">
                <form action="">
                    <input type="search" name="search" id="">
                    <input type="submit" value="百度一下">
                </form>
                <div class="list">
                    <div class="list_left">左边列表</div>
                    <div class="list_right">右边列表</div>
                </div>
            </div>
            <aside>侧边栏</aside>
            <footer>
                关于百度About Baidu使用百度前必读帮助中心企业推广京公网安备11000002000001号京ICP证030173号信息网络传播视听节目许可证 0110516互联网宗教信息服务许可证编号：京（2022）0000043药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号
                医疗器械网络交易服务第三方平台备案凭证（京）网械平台备字（2020）第00002号
                ©2023 Baidu
            </footer>
        </div>
        <div class="mask"></div>
        <div class="login">
            <form action="">
                登录
            </form>
        </div>
    </body>
  • fixed 根据窗口定位

案例

 <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>固定定位</title>
          <style>
              header{
                  width: 100%;
                  height: 80px;
                  background: tomato;
                  position: fixed;
                  top:0px;
              }
              footer{
                  width: 100%;
                  height: 50px;
                  background: cyan;
                  position: fixed;
                  bottom: 0px;
              }
              .main{
                  width: 100%;
                  height: 1800px;
                  position: absolute;
                  top:80px;
                  background: antiquewhite;
              }
          </style>
      </head>
      <body>
          <header>
              我是头部内容，我是固定定位到头部
          </header>
          <section class="main">
              我是中间的内容
          </section>
          <footer>
              我是底部内容，我是固定到底部的
          </footer>
      </body>
  • z-index 设定定位元素Z轴的距离
    案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>固定定位</title>
        <style>
            header{
                width: 100%;
                height: 80px;
                background: tomato;
                position: fixed;
                top:0px;
                /*调整Z轴的距离*/
                z-index: 2;
            }
            footer{
                width: 100%;
                height: 50px;
                background: cyan;
                position: fixed;
                bottom: 0px;
            }
            .main{
                width: 100%;
                height: 1800px;
                position: absolute;
                top:80px;
                background: antiquewhite;
            }
        </style>
    </head>
    <body>
        <header>
            我是头部内容，我是固定定位到头部
        </header>
        <section class="main">
            我是中间的内容
        </section>
        <footer>
            我是底部内容，我是固定到底部的
        </footer>
    </body>
  • 定位取值

left:设定定位元素的水平移动位置(距离左边的距离)

top:设定定位元素的垂直移动位置(距离顶部的距离)

right:设定定位元素的水平移动位置(距离右边的距离)

bottom:设定定位元素的垂直移动位置(距离底部的距离)

calc 计算属性

  • calc()是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

  • calc(）语法：

（1）加 （+）、减（-）、乘（*）、除（/），注意的是：乘数中至少要有一个是 类型的、被除数（/右面的数）必须是 类型的

（2）calc()使用通用的数学运算规则，但是也提供更智能的功能：

	使用“+”、“-”、“*” 和 “/”四则运算

	可以使用百分比、px、em、rem等单位

	可以混合使用各种单位进行计算
	表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(100% + 5px)”
	表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                /*width: calc(50% - 100px);*/
                /*width: calc(100% / 4);*/
                width: calc(20% * 4);
                height: 100px;
                background:red;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>

布局属性

  • 块状元素与行内元素的特点

  • 块状元素：独占一行，具有宽高属性

  • 在这里插入代码片行内元素：不会独占一行，没有宽高属性

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>块状元素和行内元素</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                background: tomato;
            }
            span{
                background: cyan;
                width: 100px;
                height: 100px;
            }
            a{
                background: antiquewhite;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div>我是块状元素，我独占一行</div>
        <span>我是行内元素，我不会独占一行</span>
        <a href="">是不是也是行内元素</a>
    </body>
  • display 设置元素的显示方式

inline 将元素作为行内元素样式显示

block 将元素作为块状元素显示

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            div{
                width:100px;
                height:100px;
                background:tomato;
                display: inline;
            }
            span{
                width: 100px;
                height: 100px;
                background: cyan;
                display: block;
            }
        </style>
    </head>
    <body>
        <div>我是快转个元素</div>
        <span>我是行内元素</span>
    </body>
  • inline-block 设定一个元素既可以设定宽高属性，也可以在一行显示。

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            div{
                width:100px;
                height:100px;
                background:tomato;
                display: inline;
            }
            span{
                width: 100px;
                height: 100px;
                background: cyan;
                display: block;
            }
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div>我是快转个元素</div>
        <span>我是行内元素</span>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./o.webp" width="350" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>
  • none 设置元素不显示(隐藏元素)

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }

            /*设置元素隐藏*/
            .one{
                display: none;
                /*display: inline-block;*/
            }
            .two{
                display: inline-block;
            }
            .two:hover>.one{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <div class="two">
            aaa
            <section class="one">
                <img src="./o.webp" width="350" alt="">
                我也是块状元素
            </section>
        </div>

        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>
  • visibility 设置元素是否显示

visible 显示

hidden 隐藏

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>布局属性</title>
        <style>
            section{
                width: 350px;
                height: 450px;
                background: purple;
                display: inline-block;
            }
            /*使用visibility设置元素的隐藏和显示*/
            .one{
                visibility: hidden;

            }
            .two{
                display: inline-block;
            }
            .two:hover>.one{
                /*显示*/
                visibility: visible;
            }
        </style>
    </head>
    <body>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <div class="two">
            aaa
            <section class="one">
                <img src="./o.webp" width="350" alt="">
                我也是块状元素
            </section>
        </div>
        <section>
            <img src="./b.webp" alt="">
            我也是块状元素我是另外一张图片
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>
        <section>
            <img src="./a.webp" alt="">
            我也是块状元素
        </section>

    </body>

浮动属性

  • float 浮动属性

left 设置元素向左浮动

right 设置元素向右浮动

none 设置元素不浮动(默认值)

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动属性一</title>
        <style>
            .father{
                width: 620px;
                height: 220px;
                background: pink;
            }
            /*元素一旦浮动不会占据原有的物理位置 会到浮动层*/
            .one{
                width: 200px;
                height: 200px;
                background: purple;
                float:right;
            }
            .two{
                width: 200px;
                height: 200px;
                background: cyan;
                /*float:left;*/
                float:right;
            }
            .three{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </body>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动属性一</title>
        <style>
            .father{
                width: 620px;
                height: 220px;
                background: pink;
            }
            /*元素一旦浮动不会占据原有的物理位置 会到浮动层*/
            .one1{
                width: 200px;
                height: 200px;
                background: purple;
                float:left;
            }
            .two1{
                width:200px;
                height:200px;
                background:cyan;
                float:left;
            }
            .three1{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <span class="one1">1</span>
            <span class="two1">2</span>
            <span class="three1">3</span>
        </div>
    </body>
</html>
  • clear 用于清除其他元素的浮动属性对当前元素的影响

left 用于抵消float:left效果

right 用于抵消float:right效果

both 用于清除float效果

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .father{
                width: 620px;
                height: 420px;
                background: antiquewhite;
            }
            .one{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
            }
            .two{
                width:200px;
                height: 200px;
                background: cyan;
                float:left;
            }
            .three{
                width: 200px;
                height: 200px;
                background: purple;
                float:right;
            }
            .four{
                width: 610px;
                height: 210px;
                background: brown;
                /*float:left;*/
                /*clear:right;*/
                /*clear:left*/
                /*推荐使用  清楚两端浮动*/
                clear:both;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
    </body>
</html>
  • 注意：

任何元素一旦使用float属性，那么他的display属性将失效，均可以设置宽高。效果类似于inline-block

当子类浮动后父类感知不到子类高度时，可以给父类设置overflow:hidden，此时父类可以感知到子类高度并且父类没有失去display的特性

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动后对父类的影响</title>
        <style>
            .father{
                width: 620px;
                background: antiquewhite;
                /*父类依然时快转元素*/
                overflow: hidden;
                    /*设置块状元素居中*/
                margin:0 auto;
            }
            .father>div:first-child{
                width: 200px;
                height: 200px;
                background: red;
                float:left;
            }
            .father>div:nth-child(2){
                width: 200px;
                height: 200px;
                background: deeppink;
                float:left;
            }
            .father>div:last-child{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>
  • 当子类浮动后父类感知不到子类高度时，也可以设置父类浮动，让父类跟子类同时到达浮动层感知子类高度，但是此时父类会失去display的特点

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动后对父类的影响</title>
        <style>
            .father{
                width: 620px;
                background: antiquewhite;
                /*设置父类浮动也能感知高度 但是不能使用margin进行居中*/
                float:left;
                /*margin:0 auto;*/
            }
            .father>div:first-child{
                width: 200px;
                height: 200px;
                background: red;
                float:left;
            }
            .father>div:nth-child(2){
                width: 200px;
                height: 200px;
                background: deeppink;
                float:left;
            }
            .father>div:last-child{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>
</html>

当子类浮动后父类感知不到子类高度时，也可以设置父类的宽高，子类浮动不会超过父类宽高

浮动布局实战

  • 参考页面：http://shop2.eduwork.cn
    案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>仿制ewshop布局</title>
        <style>
            /* header style start */
            header{
                width: 100%;
                height: 30px;
                background: #ccc;
            }
            .top{
                width: 980px;
                height: 100%;
                background: antiquewhite;
                margin:0 auto;
            }
            .top_left{
                width: 200px;
                height: 100%;
                background: tomato;
                float:left;
            }
            .top_right{
                width: 500px;
                height: 100%;
                background: deeppink;
                float:right;
            }
            /* header style end */

            /*search style start*/
            .search{
                width:980px;
                height: 100px;
                background: antiquewhite;
                margin:0 auto;
            }
            .logo{
                width:150px;
                height:100%;
                background:blueviolet;
                float:left;
            }
            .search_form{
                width:600px;
                height: 100%;
                background: cyan;
                float:left
            }
            .phone{
                width: 200px;
                height: 100%;
                background:sienna;
                float:right;
            }
            /*search style end*/
            /*nav style start */
            nav{
                width:980px;
                height: 40px;
                background: red;
                margin:0 auto;
            }
            li{
                list-style:none;
                float:left;
            }
            a{
                text-decoration: none;
                float:left;
                width: 85px;
                text-align: center;
                color:#fff;
                font-size:14px;
                font-weight: bold;
                line-height: 40px;
            }
            a:hover{
                background: #fff;
                color:red;
            }
            /*nav style end  */
            /*ad style start*/
            .ad{
                width:980px;
                height: 120px;
                background:#ff1;
                margin:0 auto;
            }
            /*ad style end*/
            /*banner style start*/
            .banner{
                width: 980px;
                height: 300px;
                margin:0 auto;
                background:navajowhite;
            }
            .banner_left{
                width: 200px;
                height: 100%;
                background: sienna;
                float:left;
            }
            .banner_left_top{
                width: 200px;
                height: 30px;
                background: aliceblue;
                float:left;
            }
            .banner_left_bottom{
                width: 200px;
                height: 270px;
                background: blue;
                float:left;
            }
            .banner_conter{
                width: 530px;
                height: 100%;
                background: aqua;
                float:left;
            }
            .banner_right{
                width:240px;
                height:100%;
                background: blueviolet;
                float:right;
            }
            .banner_right_top{
                width: 100%;
                height: 30px;
                background: #cccccc;
                float:left;
            }
            .banner_right_bottom{
                width: 100%;
                height: 270px;
                background: deeppink;
                float:left;
            }
            /*banner style end*/
        </style>
    </head>
    <body>
        <!--header tagName start-->
        <header>
            <div class="top">
                <div class="top_left"></div>
                <div class="top_right"></div>
            </div>
        </header>
        <!--header tagName end-->
<!--        search  tagName start-->
        <section class="search">
            <div class="logo"></div>
            <div class="search_form"></div>
            <div class="phone"></div>
        </section>
<!--            search tagName end-->
<!--        nav tagName start-->
        <nav>
            <li><a href="">首页</a></li>
            <li><a href="">前端</a></li>
            <li><a href="">后端</a></li>
            <li><a href="">云计算</a></li>
            <li><a href="">产品设计</a></li>
            <li><a href="">前沿</a></li>
            <li><a href="">关于我们</a></li>
        </nav>
<!--        nav tagName end-->
<!--        ad tagName start-->
        <div class="ad"></div>
<!--            ad tagName end-->
<!--        banner tagName start-->
        <section class="banner">
            <div class="banner_left">
                <div class="banner_left_top"></div>
                <div class="banner_left_bottom"></div>
            </div>
            <div class="banner_conter"></div>
            <div class="banner_right">
                <div class="banner_right_top"></div>
                <div class="banner_right_bottom"></div>
            </div>
        </section>
<!--            banner tagName end-->
    </body>
</html>

盒子模型

  • 标准盒模型

margin 外边距

派生类
margin-left : 设置距离左边的距离
margin-top：设置距离顶部的距离
margin-right：设置距离右边的距离
margin-bottom：设置距离底部的距离
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外间距</title>
        <style>
            .father{
                width: 640px;
                height: 640px;
                background: pink;
            }
            .top{
                width: 600px;
                height: 200px;
                background: #ffff11;
                float:left;
            }
            .left{
                width: 200px;
                height: 200px;
                background: blue;
                float:left;
            }
            .self{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
                margin-top:10px;
                margin-right:10px;
                margin-left:10px;
                margin-bottom:10px;
            }
            .right{
                width: 200px;
                height: 200px;
                background: deeppink;
                float:left;
            }
            .bottom{
                width: 600px;
                height:200px;
                background: indianred;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="top">顶部元素</div>
            <div class="left">左侧元素</div>
            <div class="self">当前元素</div>
            <div class="right">右侧元素</div>
            <div class="bottom">底部元素</div>
        </div>
    </body>
</html>
  • margin 简写属性

四个参数设置四个边的距离 上、右、下、左
三个参数设置四个边的距离 上、右左、下
两个参数设置四个边的距离 上下、右左
一个参数设置四个边的距离(设置设置上右下左)
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外间距</title>
        <style>
            .father{
                width: 640px;
                height: 640px;
                background: pink;
            }
            .top{
                width: 600px;
                height: 200px;
                background: #ffff11;
                float:left;
            }
            .left{
                width: 200px;
                height: 200px;
                background: blue;
                float:left;
            }
            .self{
                width: 200px;
                height: 200px;
                background: tomato;
                float:left;
                /*- 四个参数设置四个边的距离 上、右、下、左*/
                /*margin:10px 15px 20px 25px;*/
                /*- 三个参数设置四个边的距离 上、右左、下*/
                /*margin:10px 20px 15px;*/
                /*- 两个参数设置四个边的距离 上下、右左*/
                /*margin:10px 20px;*/
                /*- 一个参数设置四个边的距离(设置设置上右下左)*/
                margin:10px;
            }
            .right{
                width: 200px;
                height: 200px;
                background: deeppink;
                float:left;
            }
            .bottom{
                width: 600px;
                height:200px;
                background: indianred;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="top">顶部元素</div>
            <div class="left">左侧元素</div>
            <div class="self">当前元素</div>
            <div class="right">右侧元素</div>
            <div class="bottom">底部元素</div>
        </div>
    </body>
</html>
  • margin上下会右合并问题(垂直方向)

取最大的值
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外间距</title>
        <style>
            /*margin 合并问题 只有垂直会有合并问题 取最大值*/
            .one{
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 50px;
            }
            .two{
                width: 100px;
                height: 100px;
                background: blue;
                margin-top:100px;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two"></div>
    </body>
</html>
  • margin可以设置块状元素居中

取值

margin-left:auto
margin-right:auto

简写

margin:0 auto

上下为零，左右自动
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>外间距</title>
        <style>
            .three{
                width: 300px;
                height: 300px;
                background: tomato;
                /*margin-left: auto;*/
                /*margin-right: auto;*/
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="three"></div>
    </body>
</html>

border 边框

  • 边框样式取值
    none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
    hidden： 隐藏边框。
    dotted： 点状轮廓。
    dashed： 虚线轮廓。
    solid： 实线轮廓
    double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
    groove： 3D凹槽轮廓。
    ridge： 3D凸槽轮廓。
    inset： 3D凹边轮廓。
    outset： 3D凸边轮廓。
    border-top 设置顶部边框颜色、样式、宽度
    border-left 设置左侧边框颜色、样式、宽度
    border-right 设置右侧边框颜色、样式、宽度
    border-bottom 设置底部边框颜色、样式、宽度
    案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border-top:1px solid red;
                border-bottom: 5px double blue;
                border-left:1px solid tomato;
                border-right:tomato 5px dashed;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
    </body>
</html>
  • 派生类

border-top-style 设置顶部边框样式
border-top-color 设置顶部边框颜色
border-top-width 设置顶部边框宽度
border-left-style 设置左侧边框样式
border-left-color 设置左侧边框颜色
border-left-width 设置左侧边框宽度
border-right-style 设置右侧边框样式
border-right-color 设置右侧边框颜色
border-right-width 设置右侧边框宽度
border-bottom-style 设置底部边框样式
border-bottom-color 设置底部边框颜色
border-bottom-width 设置底部边框宽度
border-style:设置四个边的边框样式
border-width:设置四个边的边框宽度
border-color:设置四个边的边框颜色
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
             /*单独设定每条边的 样式  颜色   宽度*/
            .two{
                margin-top:10px;
                width: 100px;
                height: 100px;
                border-top-style: solid;
                border-top-color: #000;
                border-top-width: 5px;
                border-left-style:solid;
                border-left-width: 5px;
            }
            /*同时设置四个边的样式 颜色  宽度*/
            .three{
                width: 100px;
                height: 100px;
                margin-top: 20px;
                border-style:solid;
                border-color:tomato;
                border-width: 10px;
            }
        </style>
    </head>
    <body>
        <div class="two"></div>
        <div class="three"></div>
    </body>
</html>
  • border 简写属性

border:同时设置四个边框的边框样式、颜色、宽度
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>边框</title>
        <style>
            /*同时设置四条边的边框颜色 样式 宽度*/
            .four{
                width: 100px;
                height: 100px;
                border:1px solid red;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="four"></div>
    </body>
</html>
  • padding 内边距

派生类
padding-left : 设置距离左边的距离

padding-top：设置距离顶部的距离
padding-right：设置距离右边的距离
padding-bottom：设置距离底部的距离
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内间距</title>
        <style>
            .one{
                width:100px;
                height:100px;
                border:1px solid tomato;
                padding-top:20px;
                padding-left:20px;
                padding-bottom:20px;
                padding-right:20px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
    </body>
</html>

padding简写属性

四个参数设置四个边的距离 上、右、下、左
三个参数设置四个边的距离 上、右左、下
两个参数设置四个边的距离 上下、右左
一个参数设置四个边的距离(设置设置上右下左)
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>内间距</title>
        <style>
            .two{
                width: 100px;
                height: 100px;
                border:1px solid red;
                /*四个参数设置四个边的距离 上、右、下、左*/
                /*padding:10px 20px 30px 40px;*/
                /*三个参数设置四个边的距离 上、右左、下*/
                /*padding:10px 20px 10px*/
                /*两个参数设置四个边的距离 上下、右左*/
                /*padding:10px 20px;*/
                /*一个参数设置四个边的距离(设置设置上右下左)*/
                padding:10px;
                margin-bottom: 20px;
            }
            span{
                border:1px solid red;
                margin:20px 20px;
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
        <div class="two">我是内容</div>
        <span>我是行内元素</span>
    </body>
</html>

关于标准盒模型

padding + border 在标准盒模型中会算入元素大小范围内
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one{
                width: 100px;
                height: 100px;
                background: tomato;
                border:10px solid red;
                padding: 50px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
    </body>
</html>
  • 怪异盒模型

box-sizing 定义当前元素使用哪种盒模型

border-box（怪异）
content-box (标准)
案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*标准盒模型 需要减去对应的边框和内间距*/
            .one{
                width: 40px;
                height: 40px;
                background: tomato;
                border:10px solid red;
                padding: 20px;
            }
            /*怪异盒模型*/
            .two{
                margin-top: 10px;
                width: 100px;
                height: 100px;
                background: tomato;
                /*设置成怪异盒 怪异的边框和内间距不会占据元素大小*/
                box-sizing: border-box;
                border:5px solid red;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="one">我是内容</div>
        <div class="two">怪异盒</div>
    </body>
</html>
举报

相关推荐

React@16.x（29）useRef

tensorflow人工智能python

React@16.x（34）动画（中）

大数据mapreduce

React@16.x（12）ref 转发-forwardRef

ubuntulinux

React@16.x（53）Redux@4.x（2）- action

排序算法算法数据结构

React-router5.x配置路由模块化及嵌套路由

react.jsgithub懒加载html前端开发

springmvc5.x-mvc实现原理及源码实现

数据结构算法java

1+2+4+7+11+16+..x(和不超过3000)，求x与式子的和

前端

What is the difference between NPO and x7r, X5R, y5v, z5u god horse

idesedIT业界

React16源码: React中requestCurrentTime和expirationTime的源码实现补充

vue.js前端javascript

React16源码: React中的reconcileChildIterator和reconcileChildrenArray的源码实现

vue.jsreact.js前端
0 条评论