4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介

浮动

# ps:html代码时没有缩进一说的 全部写在一行也可以
"""浮动主要就是用于页面布局的!!!"""

# 浮动带来的负面影响
"""会造成父标签塌陷!!!"""
解决浮动的负面影响
	1.再写一个div撑场面(不可取)
	2.关键字clear(可以使用)
	3.通用解决策略(推荐使用):只要父标签塌陷就使用
		.clearfix:after {
			content: '';
			clear: both;
			display: block;
		}
# 谁塌陷就给谁加class属性

# 浏览器默认都是文本优先展示

定位

1.静态定位	static
	所有的标签默认都是静态定位即不能改变位置
2.相对定位	relative
	相对标签原来的位置做定位
3.绝对定位  absolute
	相对已经定位过的父标签做定位(没有则参考body标签)
		eg:小米官网导航条内购物车
4.固定定位  fixed
	相对浏览器窗口做定位
		eg:小米官网右边回到顶部
如何使用css完成定位
	定位关键字position
	位置关键字left、right、top、bottom

是否脱离文档流

# 标签位置改变之后 原来的位置是否会空出来
	如果空出来了被其他标签自动占有 那么表示脱离否则不脱离

浮动、定位
	脱离文档流
		浮动、绝对定位、固定定位
	不脱离文档流
		相对定位

溢出属性

# 圆形头像
#d1 {
	width: 200px;
	height: 200px;
	border: 3px solid darkgray;
	border-radius: 50%;
	overflow: hidden;
}
#d1 img {
	/*
    1 宽
    max-width: 100%;
    1.1 简写
    width: 100%;
    2 高
    max-height:100%;
    2.1 简写
    height:100%;
    */
}

z-index属性

# 浏览器平面不是一个二维坐标系而是一个三维坐标系
eg:百度登录或者退出界面>>>:三明治结构(模态框)

透明度

rgba(124,124,124,0.5)
	只影响颜色
opacity:0.5
	影响颜色和字体

JavaScript

# JavaScript简称JS 与Java一点关系都没有!!!
	完全是为了蹭Java的热度
# JS也是一门编程语言
	IT行业鄙视链>>>前端意淫着想摆脱后端的约束
	写出了使用JS编写后端代码的方案>>>NodeJs
# JS虽然是一门编程语言但是逻辑非常的不严谨
	据传该语言最初的版本是由一个程序员花了七天时间写出来的
# JS很容易学习

JavaScript补充

类中引入方式
	1.script标签内部直接编写(学习的时候使用)
	2.script标签src属性导入外部js文件(最正规)

注释语法
	html:<!--注释语法-->
	css:/**/
	JS://单行注释  /*多行注释*/
	# 模板语法注释 {##}

结束符号
	分号作为结束符号(;)  但是不用写问题也不大

页面布局

基本步骤
	1.先使用div和span占位(主要是div)
	2.再添加文本内容
	3.最好再考虑样式
# 在给标签添加id、class的时候最好是见名知意