position定位、盒子模型、js基础

最新推荐文章于 2022-02-24 17:56:11 发布

鸽了一路

最新推荐文章于 2022-02-24 17:56:11 发布

阅读量411

点赞数

文章标签： css js

本文链接：https://blog.csdn.net/weixin_45575912/article/details/114801643

版权

1.css定位——position

position的定位需要配合方向值一起使用（top、left、right、bottom）,上左优先。

定位方式	功能
relative	该方法不脱离文档流，相对于元素原本本身位置进行定位，文档流位置不动。
absolute	完全脱离文档流，相对于浏览器进行定位。当父级元素没有设置position.relative，子元素相对于浏览器定位，因为是绝对定位，所以把元素位置放在文档某一个位置，跟随文档的滚动而滚动；当父级元素设置position.relative子级元素设置absolute相对父级元素定位。
fixed	固定定位，相对于浏览器进行定位，跟随滚动条一起滚动。

以下是运用相对定位和绝对定位做的轮播效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播定位</title>
    <style>
        #f{/*设置背景图片，块宽高，定位方式选择relative*/
            height: 1500px;
            width: 729px;
            background-image: url("轮播.png");
            background-repeat: no-repeat;
            position: relative;
            left: 600px;
        }
        #ff{/*因为父级元素定位方式是relative，所以子元素选择absolute方式，相对父级元素进行定位*/
            padding: 0;
            margin: 0;
            height: 50px;
            width: 300px;
            position: absolute;
            left: 300px;
            top: 425px;
        }
        .class{/*设置轮播块元素*/
            height: 20px;
            width: 20px;
            background-color: blue;
            border-radius:10px ;
            text-align: center;
            display: inline-block;
        }
        .d1{
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="ff">
            <div class="class d1">1</div>
            <div class="class d2">2</div>
            <div class="class d3">3</div>
            <div class="class d4">4</div>
            <div class="class d5">5</div>
            <div class="class d6">6</div>
        </div>
    </div>
</body>
</html>

以下是运用fixed做的跟随滚动效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #f{
/*            width: 3000px;*/
            height: 3000px;
        }
        .class{
            /*            height: 100px;
            width: 100px;*/
        }
        .div1{
            background-color: pink;
            position: fixed ;
            right: 0;
            top: 350px;
        }
        .div2{
            background-color: lightskyblue;
            position: fixed;
            left: 0;
            top: 350px;
        }
        #im1{height: 150px;
        }
        #im2{
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="f">
        <div class="class div1"><a href="http://baidu.com" target="_blank"><img src="iamge/派大星.jpg" alt="" id="im1"></a></div>
        <div class="class div2"><a href="http://taobao.com" target="_blank"><img src="iamge/123.jfif" alt="" id="im2"></a></div>
    </div>
</body>
</html>

2.盒子模型

盒子模型由内容、内边距、边框及外边距组成，其中我们可以看到的元素大小由内容、内边距及边框组成。

内容：宽高的设置就是内容额大小，元素中的子元素内容就显示在内容区域。

内边距：不能显示内容，背景的样式会自动延申到内边距上。

边框：

border	边框，三要素：宽度、样式、颜色
border-top/left/bottom/right	宽度，颜色，样式
border-color	可以分别设置四边的颜色
border-style	可以分别设置四边样式
border-width	可以分别设置四边的宽度

内外边距的给值方式：

margin:100px 四周的外边距为100px

margin:50px 100px 上下为50px，左右为100px

margin:10px 50px 100px 上10px 左右50px 下100px

需要注意的是行内元素不可设置。

3.JavaScript

JavaScript是用来验证发送服务器端的数据，是一种脚本语言。

3.1标签使用方式

方式	解释
行内	js代码定义在html标签上
内部	在html的head中定义一对script标签对，在标签对中定义js代码
外部	在外部定义一个js文件，使用script标签引入外部的js文件，src定义外部文件路径

注意：一个script标签不能同时定义js代码与引入外部js文件

3.2script标签位置

script标签可以写在任意位置，但是为了便于后期维护，推荐写在head中，但是html页面是从上至下执行，head中script标签对中会获取不到元素，因此把script标签写在body结束之前相对好一点，即加载完所有页面中的元素标签之后再去执行js代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <!--内部标签对-->
    <script>
        /*window.onload可以解决script标签对获取不到元素的问题*/
        window.onload=function(){
            console.log("阿松大阿松大");
        }
    </script>
    <script>
        function anniu(a,b){
            alert('asd');
        }
    </script>
</head>
<body>
    <div>
        块元素
    </div>
    <button type="button" onclick="anniu()">按钮</button>
</body>
</html>

3.3调试方式

名称	功能
console	控制台输出，主要有：console.log()-日志输出；console.info()-信息输出；console.error()-错误信息输出；console.warn()-警告信息输出；
alert()	表示弹出框
document.write()	页面文档中写出内容，当页面加载完成之后，再触发document.write的执行，会覆盖原页面。

3.4js中的注释

单行注释：//

多行注释：/**/

文档注释：/***/，文档注释再注释函数时会自动提示参数的说明

3.5js中的标识符

组成：字母、数字、下划线及美元符号任意组合而成，数字不能作为开头。

驼峰命名：

大驼峰：一般指系统给提供的对象名，Math,String

小驼峰：第一个单词全部小写，第二个单词开始首字母大写

注意：关键字及保留字不能作为标识符使用。

3.6变量

语法：使用var关键字定义变量，var关键字可以省略，代表一个全局变量

注意：一个变量只声明不赋值存在默认值，undefined，未定义。

变量作用域提升：会把通过var定义的变量声明提升到当前作用域最上面，而没有通过var定义的变量，不存在作用域提升问题；js中作用域只看函数，{}在js中只是语句块，不是作用域。

/*运行时不会报错，会提示undefined，但undefined时数据的一种类型,a的作用域提升*/
console.log(a);
var a=1;

3.7数据类型

名称	类型
String	字符串类型，由""或’'中包含任意字符
Number	数值型，表示整数或小数
NaN	not a number；当运算无法得到一个正常结果，结果会显示为NaN
undrfined	未定义类型
Null	空；无法获取元素时得到null
Function	函数
复杂数据类型	var 变量名={key:name,…}
Boolean	布尔类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
</head>
<body>
    <script>
        var i=1;
        /*var可以省略*/
        j =2;
        k =3;
        l ="数字";
        /*输出时，可以同时显示多个变量*/
        console.log(i,j,k);
        console.log(i+j,k);
        x="艾克斯adasdasda\n",y=24;
        console.log(x+"是第"+y+"个字母");
        console.log(x,y);
        console.log(x+y);
        console.log(j+k+"\n"+l);
        /*复杂数据类型，可以嵌套*/
        var obj={
            name:"fffff",
            age:18,
            gf:aaa={
                name2:111,
                age2:17,
            }
        }
        console.log(aaa.name2);
    </script>
</body>
</html>

使用typeof 数据|变量可以返回一个小写的字符串形式的类型

3.8数据类型转换

对象类型不参与转换

其他类型都可以转换为三种类型：String()、Boolean()、Number()。

String(数据)：数据转为字符串类型。

Boolean(数据):

undefined,null——》false

字符串：空串——》false

有字符的字符串——》true

Number：0与NaN——》false

其他——》true

Number(数据):

undefined——》NaN

null——》0

Boolean:false——》0

true——》1

String:"",’’——》0

非纯数字字符串——》NaN

纯数字——》数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
    <script>
        var i=1;
        var j="abc";
        var k=false;
        console.log(String(i));
        console.log(String(j));
        console.log(String(k));
        console.log(String(null));
        console.log(Number(j));
        console.log(Number(k));
        console.log(Number(null));
        console.log(Boolean(i));
        console.log(Boolean(j));
        console.log(Boolean(null));
        console.log();
    </script>
</body>
</html>

鸽了一路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
position定位、盒子模型、js基础

1.css定位——position position的定位需要配合方向值一起使用（top、left、right、bottom）,上左优先。定位方式功能relative该方法不脱离文档流，相对于元素原本本身位置进行定位，文档流位置不动。absolute完全脱离文档流，相对于浏览器进行定位。当父级元素没有设置position.relative，子元素相对于浏览器定位，因为是绝对定位，所以把元素位置放在文档某一个位置，跟随文档的滚动而滚动；当父级元素设置position.re
复制链接

扫一扫