知识点整理：box-sizing/clear/overhidden/box-flex/animation/replace(RegExp,'')/this/parseInt(num1,base)

最新推荐文章于 2023-08-15 09:30:54 发布

孤岛浅滩

最新推荐文章于 2023-08-15 09:30:54 发布

阅读量335

点赞数

分类专栏： notes 文章标签： box-sizing box-flex parseInt animation replace

本文链接：https://blog.csdn.net/m0_37851778/article/details/76701848

版权

notes 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

1.CSS box-sizing属性

div{
    width:60px;
    padding:20px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

作用：width:60px,而不是100px

2.三种方式清除浮动。
【参考内容：http://www.divcss5.com/jiqiao/j406.shtml】
①给父元素设置适合高度。

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
        div.parent{
            width:400px;
            border:solid 2px teal;
            background-color: orange;
        }
        div.parent .child1{
            width: 180px;
            height: 100px;
            border:1px solid orange;
            float:left;
            background-color: #afb;
        }
        div.parent .child2{
            width: 180px;
            height: 100px;
            border:1px solid orange;
            float:right;
            background-color: #afb;
        }
    </style>
</head>
<body>
    <div class="parent"> 
        <div class="child1">left浮动</div> 
        <div class="child2">right浮动</div> 
    </div> 
</body>
</html>

这里写图片描述

//改进
div.parent{
    height:102px;
}

这里写图片描述

②

这里写图片描述

③ 这里写图片描述


<!doctype html>
<html>
<head>
    <title></title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
       div{
        display: box;
        display:-moz-box;
        display:-webkit-box;
        border:1px solid orange;
        width:600px;
       }
       #p1{
        -webkit-box-flex:1.0;
        -moz-box-flex:1.0;
        box-flex:1.0;
        background-color: #afb;
       }
       #p2{
        -webkit-box-flex:2.0;
        -moz-box-flex:2.0;
        box-flex:2.0;
        background-color: #8a9;
       }
    </style>
</head>
<body>
   <div>
       <p id='p1'>Hello</p>
       <p id='p2'>yyc</p>
   </div>
   <p><b>*</b>IE 不支持box-flex属性</p>
</body>
</html>

这里写图片描述

4.CSS：使一个div元素在5秒内向右平移500px，并不断重复该过程。

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
        div#yyc{
            border: 2px solid orange;
            width: 100px;
            height: 50px;
            animation:mymove 5s infinite;
            -webkit-animation:mymove 5s infinite;
        }
        @keyframes mymove{   //关键帧
            form{
                transform:translateX(0);
            }
            to{
                transform:translateX(500px);
            }
        }
    </style>
</head>
<body>
   <div id='yyc'>yyc</div>
</body>
</html>

这里写图片描述

//提取字符串中的数字
var string = "yyc1234.567yyc";

var string = "yyc1234.567yyc";
function getNum(string){
    var value = string.replace(/[^0-9.]/ig,'');
    return value;
}
getNum(string);//"1234.567"

//作为对象的一个方法
var onePerson={
    name:'yyc',
    age:21,
    person:function(){
        return this.name;
    }
};
onePerson.person();//"yyc"

7.编写一个函数，实现：calculate(“11”, “111”) // => 10

function calculate(num1,num2){
    var a = parseInt(num1,2);//第二个参数代表基数，即几进制
    var b = parseInt(num2,2);
    return a+b;
}
calculate('11','111');//10