css复习以及js初学

Xinxin Xiangrong

已于 2022-02-13 19:59:38 修改

阅读量418

点赞数

文章标签： css3 html

于 2022-02-13 19:59:00 首次发布

本文链接：https://blog.csdn.net/m0_63195227/article/details/122912394

版权

这篇博客主要涵盖了CSS的基础知识，包括盒子模型、边框、内边距和外边距的详细讲解，以及浮动布局的应用。在JS部分，介绍了标识符规则、数据类型、运算符、输入输出及变量声明等基础概念，并通过实例展示了条件判断和对象操作。

摘要由CSDN通过智能技术生成

一css主要复习盒子与浮动部分

1.盒子
在这里插入图片描述 (1)border：粗细，边框样式，边框颜色

<style>
   div {
        width: 300px;
        height: 200px;
        border-width: 5px;
        border-style: solide;
       }
</style>

默认颜色为黑色
复合写法–border： 1px solid red；没有顺序
边框分开写法–border-top：----/*其余同理

<style>
        #div
        {
            width:100px;
            height:30px;
            border:1px solid red;
        }
        #span
        {
            width:100px;
            height:30px;
            border:1px solid blue;
        }
    </style>

在这里插入图片描述
(2)padding

padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;

简便写法：（顺时针方向）
eg：padding:20px;”表示四个方向的内边距都是20px；

“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。

“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px
（3）margin
语法基本与padding相同，简便写法也是顺时针。
2.浮动布局
(1)两个属性取值 left right
…ps:可以设置浮动的盒子要有一定的宽度
这里引用一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ppp</title>
        <style>
        /*定义父元素样式*/
        #father
        {
            width:400px;
            background-color:#0C6A9D;
            border:1px solid silver;
        }
        /*定义子元素样式*/
        #father div
        {
            padding:10px;
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
        /*定义文本样式*/
        #father p
        {
            margin:15px;
            border:2px dashed red;
            background-color:#FCD568;
        }
        #son1
        {
            float: left;
        }
        #son2
        {
            float: left;
        }
        #son3
        {
            float: right;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
        <p>这里是浮动框外围的文字</p>
    </div>
</body>
</html>

(2)clear
clear取值
left–清除左浮动
right–清除右浮动
both–同时清除
2.初学JS-语法
1.标识符
第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
其它字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
标识符不能是关键字和保留字符。
2.数据类型
字符串型（String）
数值型（Number）
布尔型（Boolean）
undefined型（Undefined）
null型（Null）
3.运算符–基本与c语言相近
4.输入输出语句
在这里插入图片描述
5.变量 var-申明变量
var age-声明age变量
var age；
age=70；
类比c语言int
学习过程中经典例子：
if else：

var age = 18;
if (age < 18) {
    console.log("小于18岁了");
} else if (age == 18) {
    console.log("已经18岁了");
} else {
    console.log("大于18岁了")
}

遍历

var person = {
    name: "zhangsan",
    age: 18
}

for (var personKey in person) {
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}

创建对象

var person1 = {
    name: "孙悟空",
    age: 18,
    sayName: function () {
        console.log(this.name);
    }
};

var person2 = {
    name: "猪八戒",
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
};

var person3 = {
    name: "沙和尚",
    age: 20,
    sayName: function () {
        console.log(this.name);
    }
};

console.log(person1);
console.log(person2);
console.log(person3);