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

luona
197 阅读5分钟

盒子模型

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)分割
avatar
文章
阅读
粉丝