【2022.8.24】前端开发（3）

2022-08-24 23:32:06 阅读：203 来源： 互联网

标签：24 定位 name 标签 age 2022.8 var margin 前端开发

学习内容概要

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

内容详细

盒子模型

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

需要掌握的操作
        margin-top: 20px;
        margin-left: 100px;
        margin-right: 100px;
        margin-bottom: 100px;
        
body标签自带8px的外边距
      margin:0;   简写形式 作用于上下左右
  		margin: 10px 20px;  上下  左右
      margin: 10px 20px 30px;  上 左右	下
      margin: 10px 20px 30px 40px; 上 右 下 左
margin还可以让内部标签居中展示
		margin:100px auto  仅限于水平方向
     
padding使用方式与margin一致

浮动布局

float:left\right  页面布局必不可少的操作

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

.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
提前写好上述的css操作 遇到标签塌陷就给标签加clearfix类值即可

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

溢出属性

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


div {
            height: 50px;
            width: 50px;
            border: 5px solid gold;
            border-radius: 50%;
            overflow: hidden;
        }
div img {
    max-width: 100%;
}

定位

static(静态)
	所有的标签默认都不能直接通过定位修改位置 必须要切换成下面三种之一
relative(相对定位)
	相对于标签原来的位置做定位
absolute(绝对定位)
	基于已经定位过的父标签做定位(如果没有父标签则以body为参照)
fixed(固定定位)
	相对于浏览器窗口做定位

z-index

1. 浏览器界面其实是一个三维坐标系 z轴指向用户
1. z-index 值表示谁压着谁，数值大的压盖住数值小的
1. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

JavaScript简介

1.跟java没有关系 蹭热度
2.JavaScript与ECMAScript区别
3.版本迭代
4.JavaScript是一门编程语言(NodeJS)  
5.html页面两种引入js的方式
6.两种注释语法
	//
	/**/
7.建议的结束符号是分号

JS变量与常量

"""
支持编写js代码的地方
	1.pycharm
	2.浏览器(Console下编写)
"""
在JS中声明变量和常量都需要使用关键字
	var:全局有效
 	let:如果在局部名称空间中使用 那么仅在局部名称空间有效
 	const:定义常量

JS也是动态类型:变量名绑定的数据值类型不固定
   var name = 'make'
	name = 123
   	name = [11, 22, 33, 44]

JS数据类型之数值类型

"""
在js中查看数据类型可以使用 typeof
"""
在js中整型浮点型统称为数值类型number
    parseInt()  # 转整数
    parseFloat()  # 转小数
NaN:Not A Number 不是一个数字

JS数据类型之字符串类型个

字符串string
var name = 'jason'
var name = "jason"
var name = `jason`  模板字符串

内置方法
	1.js中涉及到字符串拼接 推荐使用+
# 字符串的拼接
var name = 'make'
var age = 24
name+age  # 'make24'

# 字付串的分割方法    
var s1 = 'holle|23|make|'
undefined
s1.split('|')
['holle', '23', 'make', '']
# 字符串的切片方法
var s2 = 'holle world'
undefined
s2.slice(0,3)  # 'hol'

# 文本输入方法
var name_list = `
张三
李四
王五
`
name_list  # '\n张三\n李四\n王五\n'

# 模板字符串
var name = 'make'
var age = 24
var s1 = `my name is $(name) my age is $(age)`
s1
'my name is $(name) my age is $(age)'

标签：24,定位,name,标签,age,2022.8,var,margin,前端开发
来源： https://www.cnblogs.com/55wym/p/16622665.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9