盒子模型、 浮动布局、定位属性、 z-index、JavaScript基础语法

今日内容概要

  • 盒子模型
  • 浮动布局
  • 定位属性
  • z-index
  • JavaScript基础语法

今日内容详细

盒子模型

img

所有的标签都可以看成是一个快递盒
1.外边距(margin):指标签之间的距离(两个快递盒之间的距离)
2.边框(border):标签的边框(快递盒的厚度)
3.内边距(padding):内部文本与边框的距离(盒子内物体距离盒子内壁)
4.内容(content):标签内部的内容(物体自身的大小)

margin

需要掌握的操作：margin-top、margin-left、margin-right、margin-bottom

margin-top: 20px;
margin-left: 40px;
margin-right: 100px;
margin-bottom: 100px;

body标签子弟啊8px的外边框 (margin:8px;)

margin: 10px;    /* 上下左右距离10px*/
margin:10px 20px;  /* 上下距离10px 左右距离20px*/
margin: 10px 20px 30px;  /* 上距离10px 左右距离20px 下距离30px*/
margin:10px 20px 30px 40px; /* 上距离10px 右距离20px 下距离30px 左距离40px*/

margin还可以让内部标签居中显示(仅限于左右居中)

margin: 10px auto;

padding

需要掌握的操作：padding-top、padding-right、padding-bottom、padding-left

  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;

/*简写*/
  padding: 5px 10px 15px 20px; /*上右下左*/

浮动布局(float)

float:left 向左浮动，float:right 向右浮动

        .c1 {
            height: 80px;
            width: 80px;
            background-color: coral;
            float: left;
        }
        .c2 {
            height: 80px;
            width: 80px;
            background-color:palevioletred;
            float: right;
        }

父标签塌陷

浮动会造成父标签塌陷，这是一个不好的现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style>
        .c1 {
            height: 80px;
            width: 80px;
            background-color: coral;
            float: left;
        }
        .c2 {
            height: 80px;
            width: 80px;
            background-color:palevioletred;
            float: right;
        }
        .c3 {
            border: black solid 3px;
        }
    </style>
</head>
<body>
    <div class="c3">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

解决方式

1.填充,固定高度

<body>
    <div class="c3">
        <div class="c1"></div>
        <div class="c2"></div>
        <div style="height: 80px"></div>
        
    </div>
</body>

2.clear不允许有浮动的元素

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。 
<body>
    <div class="c3">
        <div class="c1"></div>
        <div class="c2"></div>
        <div style="clear: left;"></div>
        
    </div>
</body>

3.伪元素清除法：提前写好.clearfix:after选择器css操作，遇到标签塌陷就给标签加clearfix类值即可

.clearfix:after {
    content:'';
    display: block;
    clear: both;
}

<body>
    <div class="c3 clearfix">
        <div class="c1"></div>
        <div class="c2"></div>   
    </div>
</body>

注意：浏览器针对文本是优先展示(浮动的元素如果遮挡会像办法展示)

溢出属性(overflow)

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 
  <style>
    div {
      width: 80px;
      height: 80px;
      border: 3px palevioletred solid;
      overflow: auto;
    }
  </style>

制作圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形头像</title>
  <style>
    div {
      width: 150px;
      height: 150px;
      border: 3px cadetblue solid;
      border-radius:50% ;
      overflow:hidden;
    }
    div img {
        max-width: 100%;
    }
  </style>
</head>
<body>
<div>
  <img src="https://img1.baidu.com/it/u=2256101692,1163743645&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=633" alt="加载失败">
</div>

</body>
</html>

定位属性-position

定位属性的值有:static、relative、absolute、fixed

satatic

static(静态、默认)：所有标签默认都不能直接通过定位修改位置，必须要切换(relative、absolute、fixed)

  <style>
    div {
      width: 80px;
      height: 80px;
      border: cadetblue 3px solid;
      left: 20px;  /*移动不了*/
    }
  </style>

relative

relative(相对定位)：相对于标签原来的位置做定位

       #d2 {
      width: 80px;
      height: 80px;
      border: rebeccapurple 3px solid;
      position: relative;
      left: 20px;
    }

absolute

absolute(绝对定位)：基于已经定位过的父标签做定位(如果没有父标签则以body为参照)

<head>
    <meta charset="UTF-8">
    <title>定位</title>
  <style>
    #d1 {
      width: 80px;
      height: 80px;
      border: cadetblue 3px solid;
      position: relative;

    }
       #d2 {
      width: 80px;
      height: 80px;

      border: rebeccapurple 3px solid;
      position: absolute;
      top:100px;
      left: 20px;
    }
  </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>

</body>
</html>

fixed

fixed(固定定位)：相对于浏览器窗口做定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
  <style>
       #d3 {
           width: 80px;
           height: 200px;
           border: rebeccapurple 3px solid;
           position: fixed;
           right:20px ;
           bottom: 30px;
       }
  </style>
</head>
<body>
<div id="d3"></div>
<div style="height: 1000px;width:100%;background-color: red"></div>
<div style="height: 1000px;width:100%;background-color: greenyellow"></div>
<div style="height: 1000px;width:100%;background-color: palevioletred"></div>
<div style="height: 1000px;width:100%;background-color: darkslategrey"></div>

</body>
</html>

z-index

z-index:设置对象的层叠顺序(浏览器界面其实是一个三维坐标系，z轴指向用户)

1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用

用户登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
  <style>
    .cover  {
      background-color: rgba(127,127,127,0.5);
      position: fixed;
      bottom: 0;
      top:0;
      left: 0;
      right: 0;
      z-index: 999;

    }
    .modal {
      background-color: white;
      border: darkgrey solid 2px;
      width: 300px;
      height: 150px;
      z-index: 1000;
      position: fixed;
      right: 500px;
      top: 300px;
    }
  </style>
</head>
<body>
<div>在最下面</div>
<div class="cover"></div>
<div class="modal">
  <form action="">
    <p>username:<input type="text" name="name" id=""></p>
    <p>password:<input type="password" name="pwd"></p>
  </form>

</div>

</body>
</html>

JavaScript

JavaScript简介

1.JavaScript与java的关系：他俩之间没有任何关系
2.JavaScript与ECMAScript区别
	ECMAScript其实就是JavaScript，就仅仅是名字变了而已
3.JavaScript是一门编程语言，是可插入HTML页面的编程代码
	3.1前端设计者想用用JS语言来完成后端的代码编程，设计出了NodeJS，但是NodeJS使用对于后端程序员说逻辑不严密，也效率低
4.JavaScript引入方式：
 	4.1 Script标签内写代码
    4.2 通过script标签引入额外的js文件
5.注释
	5.1 单行注释: //
    5.2 多行注释: /*注释*/
6.结束符：分号
ps:支持编写js代码的地方：pycharm、浏览器

JavaScript的语法

变量与常量

在JS中声明变量和常量都需要使用关键字(var、let、const)

变量

var 变量名=数据值 var是全局有效的

let 变量名=数据值 let是局部有效，如果在名称空间中使用，那么仅在局部名称空间有效

var name = 'jason'
let n=1
常量

const 变量名=数据值 const是定义常量的

const pi=3.14

变量名

1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2.变量名是区分大小写的；推荐使用驼峰式命名规则；保留字不能用做变量名.
3.JS也是动态类型:变量名绑定的数据值类型不固定

数据类型

查看数据类型用：typeof

数值类型Number

JavaScript不区分整型和浮点型，就只有一种数字类型。

还有一种NaN，表示不是一个数字（Not a Number）。

var x=1
typeof x  //'number'

var y=1.1
typeof x  //'number'
内置方法
parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN
parseFloat("123.456")  // 返回123.456
字符串类型(String)
var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld
内置方法
方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft() 移除左边的空白
.trimRight() 移除右边的空白
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割
posted @   DRAMA-娜娜  阅读(73)  评论(0)  编辑  收藏  举报
相关博文：
·  前端简介、HTTP、 HTML
·  表单标签补充知识、CSS层叠样式表、CSS选择器、CSS属性相关
·  【2022.8.24】前端开发（3）
·  前端学习笔记
·  css盒子模型、定位于JavaScript简介
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae