Day51 前端开发浮动、定位、js入门

最新推荐文章于 2022-08-24 21:41:38 发布

Tao.686

最新推荐文章于 2022-08-24 21:41:38 发布

阅读量271

点赞数

分类专栏： html 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_71967396/article/details/126513013

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day51 前端开发浮动、定位、js入门

文章目录

Day51 前端开发浮动、定位、js入门

1、盒子模型

所有的标签都可以看成是一个快递盒

比喻	实际	名词
两个快递盒之间的距离	标签之间的距离	外边距（margin）
快递盒的厚度	标签的边框	边框（border）
盒子内物体距离盒子内壁	内部文本与边框的距离	内边距（padding）
物体自身的大小	标签内部的内容	内容

需要掌握的操作

margin-top: 20px; /*设置 上外边距为20px*/
margin-left: 100px;  /*设置 左外边距为100px*/
margin-right: 100px;   /*设置 右外边距为100px*/
margin-bottom: 100px;  /*设置 下外边距为100px*/

body 标签自带8px的外边距

margin:0; 简写形式 作用于上下 左右
margin: 10px 20px; 上下 左右
margin: 10px 20px 30px 40px; 上右下左（顺时针）
margin 还可以让内部标签 居中显示
margin：100px auto 仅限于水平方向 居中

padding 使用方式与margin一致

2、浮动布局

靠左或靠右浮动：float:left\right

浮动会造成父标签塌陷这是一个不好的现象因为会引起歧义
解决浮动造成的父标签塌陷

.clearfix:after{
    content: '';  /*空文本*/
    display: block;  /*让其变成块儿级*/
    clear: both;  /* 让其左右两边不能有浮动元素*/
}

提前写好上述的css操作遇到标签塌陷就给标签添加clearfix类值即可

浏览器针对文本时优先展示的（浮动的元素如果遮挡会想办法展示）

3、溢出属性

overflow 属性值	作用
`visible`	默认值，内容不会被修剪，会是呈现在元素框之外
`hidden`	内容会被修剪，并且其余内容是不可见的
`scroll`	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
`auto`	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
`inherit`	规定从父元素继承 overflow 属性的值

div {
    width: 50px;
    height: 50px;
    border: black 3px solid;
    overflow: auto; /*更好用的 滚动查看*/
}

</head>
<body>
<div>
  <span>
    哈勒可汗发过拉横幅拉回来放回去了
    哈勒可汗发过拉横幅拉回来放回去了
    哈勒可汗发过拉横幅拉回来放回去了
  </span>
</div>
</body>

圆形头像的实现

div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: black solid 2px;
    overflow: hidden;
}
div img {
    max-width: 110%;
}

<div>
  <img src="788438d06ffb10e478ea837cf1598ca.jpg" alt="" >
</div>

4、定位

static（静态）
所有的标签默认都不能直接通过定位修改位置必须切换成下面三种之一

relative（相对定位）
相对于标签原来的位置昨定位

absolute（绝对定位）
基于已经定位过的父标签左定位（如果没有父表则以body为参照）

fixed（固定定位）
相对于浏览器窗口做定位

绝对定位用法

<style>
#a {
    height: 100px;
    width: 150px;
    background-color: burlywood;
    position: relative;  /*父类 不能是static*/
    left: 200px;  /*左边往右移动200px */
}
#b {
    height: 50px;
    width: 200px;
    background-color: antiquewhite;
    position: absolute;    /*利用绝对定位 必须要基于已经定位过的父类*/
    top: 100px; 
    left: -50px;


}

<div id="a">
  <div id="b"></div>
</div>

4.1、z-index

浏览器界面其实是一个三维坐标 z轴指向用户

5、纯手搭页面练习

线分析页面结构
1. 然后使用div和span构建出基本骨架
给标签起id和class便于后续查找并修改样式
1. id与class的命名也要做到见名知意
正儿八经的写不同的语言因该存储不同的文件

html 文件、css文件、js文件

6、JavaScript

跟java没有关系主要是为了蹭热度
JavaScript 与ECMASript的区别

前者是后者的规格，后者是前者的一种实现
EcmaScript不是JavaScript唯一的部分也不是唯一被标准化的部分
完整的JavaScript 由以下三个不同的部分组成
- 核心（ECMAScript）
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）

JavaScript 是一门编程语言（NodeJS 是能够执行js在后端服务器运行的工具）

6.1、html引入js的方式

通过script标签间直接编写js代码

<script>
	在这里写js代码
</script>

引入 js文件通过 script标签中 src属性导入js文件

<script src="js文件"></script>

6.2、js两种注释语法

//
/**/

js 代码编写建议结束符号是分号

7、js变量与常量

支持编写js代码的地方

pycharm
浏览器

在js中声明变量和常量都需要使用关键字

var： 全局有效
let： 如果在局部名称空间中使用那么仅在局部名称空间有效
const： 定义常量

JS也是动态类型：变量名绑定的数据值类型不固定

var name = 'jason'
name = 123
name = [11,22,33,44]  //列表在js中称之为数组

8、js数据类型之数值类型

在js中常看数据类型可以使用 typef

在js中整型浮点型称为数值类型number

parseInt()  //装为整数
parse Float()  // 转为小数

NaN : Not a Number 不是一个数字

9、JS数据类型之字符串类型

字符串 string

// 字符串 定义 有三种方法
var name = 'kk' //单引号
var name = "kk" //双引号
//模板字符串
var s1 = `你好啊${name}` //格式化输出

字符串方法	功能
`.length`	返回长度
`.trim()`	溢出空白
`.trimLeft()`	移除左边的空白
`.trimRight()`	移除右边的空白
`.charAt(n)`	返回第n个字符
`.concat(value)`	拼接 js中最好使用+号拼接
`.indexOf(from,to)`	子序列位置
`.substring(from,to)`	根据索引获取序列
`.slice(start,end)`	切片
`.toLowerCase()`	小写
`.toUpperCase()`	大写
`.split(delimiter,limit)`	分割