前端 day 04 5.14 CSS定位，浮动，JavaScript

5.14

昨日内容

• 分组与嵌套

  多个选择器可以并列用一套CSS样式

  div,p,span {}
  #d1,.c1>p{}
  

• 伪类选择器

  link,hover,active,visited

  input：focus ，input框获取交点

• 伪元素选择器

  p:first-letter {} /*给p标签的第一个字母加属性*/
  p:before {}
  p:after {}
  /*多用于清除浮动的影响*/
  

• 选择器优先级

  行内 > id > class > 标签；选用精确度最高的那个

  选择器相同，就近原则

• 宽高

  width，height，块级标签才能改长宽

  块级标签默认不修改，占浏览器一整行，高是文本的大小，如果没有文本，也是0

• 字体属性

  font-family
  font-size
  font-weight
  color：
  	直接写英文
  	颜色编号#EEEEEE
  	rgb(255,255,255)
  	rgba() 多一个透明度参数
  

• 文字属性

  text-align 对齐
  text-decoration 装饰
  text-indent 缩进
  

• 背景属性

  background-color
  background: #fff url("") no-repeat 
  background-image: url();
  background-position: 0 0;
  

  在调样式的时候可以借助浏览器快速微调，然后将调整好的参数，修改到CSS中

• 边框

  width,style,color...
  birder: 2px solid black
  

• 画圆

  border-radius: 50%
  

• display

  修改标签，能够让标签有块级和行内的特征

  block，inline，inline-block

• 盒子模型

  margin：外边距，标签与标签之间的距离

  border：边框

  padding：内边距

  content：内容

• body标签自带8px的margin

  body,html {
  	margin:0;
  	padding:0;
  }
  

• float：用于前期页面布局，能够让标签脱离文档流，漂浮到空中（距离用户更近）

  浮动的元素没有块级和行内一说

今日内容

• CSS结束
• 解决浮动的影响
• 溢出属性
• 定位
• 验证浮动和定位是否脱离文档流
• z-index
• opacity
• 简单博客园首页搭建
• JavaScript开始

浮动带来的影响

div内的内容浮动之后，脱离了div：造成父标签塌陷的问题

如何解决

利用clear属性，把父标签撑开

#d4{
	clear:left; /*该标签的左边，地面和空中不能有浮动的元素*/
}

通用的解决方法

在html也面前先提前处理好浮动带来影响的css代码：clearfix

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

只要谁塌陷了，就给谁加这个class

溢出属性

内容超出标签的边界，针对这种现象应该加一个参数，不让他显示

overflow:hidden;
/*默认为visible：显示
hidden：超出的隐藏
scroll：超出的可以滚动
auto：滚动
auto只会在任何内容被剪辑时显示滚动条。
但是，滚动将始终显示滚动条，即使所有内容都适合并且不能滚动它。

溢出可以用于显示圆形头像

#d1>img{
	width:100%;
}

定位

• 相对定位

  相对于原来的位置做移动的，relative

• 绝对定位

  相对于已经定位过的父标签，absolute

  如果没有父标签，就以body为参照

• 固定定位

  相对于浏览器窗口。固定在某个位置 fixed

• 静态

  所有的标签默认都是静态的，static 无法改变位置

#d1{
	height: 100px;
	width: 100px;
	background-color: red;
	/*改成相对定位*/
	position: relative;
	/*移动div，从左往右移50，从上往下移50*/
	left: 50px;
	top: 50px;
}

ps：浏览器优先展示文本内容，如果发现文本内容被挡住了，会想办法找个位置展示出来

绝对定位

在父标签加一个 position: relative; 在子标签加 position: absolute; 再移动就可以相对父标签移动了

什么时候用绝对定位：

不知道页面其他标签的位置和参数，只有一个父标签的位置

固定定位

fixed：相对于浏览器：右下角回到顶部，客服按钮

验证浮动和定位是否脱离文档流

• 浮动
• 相对定位
• 绝对定位
• 固定定位

看这四个改变标签位置的方法，原来的位置是还在，还是会被别的div标签顶掉

• 不脱离文档流：相对定位
• 脱离文档流：浮动，绝对定位，固定定位

z-index 模态框

这波，你在第二层，而你把我只想成了第一层，实际上我在第五层

登陆的界面弹出一个小窗，供你输入。离用户最近的是登陆窗口，下一层是一个透明的挡住用户点击的背景，最下层是网页

设置z-index 给div设置层级

cover层

.cover {
	position:fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
	z-index:9;
}

模态框 modal

.modal {
	background-color: white;
	width: 300px;
	height: 200px;
	left: 50%;
	z-index: 10;
	margin-left: 150px;
	margin-top: 100px;
}

透明度 opacity

不单可以修改颜色透明，也可以设置文字透明

opacity: 0.5;

博客园页面搭建

http://emoboy.club

在书写html的时候，class，id等属性最好写顾名思义

blog-left，blog-right

1. 先写html，把大致写好

2. 写外部css，引入

3. split ver 可以分屏

4. 页面背景颜色 #EEE，暗一点，页面自带的margin，padding设置为0

5. a标签的text-decoration设置为none

6. 去掉列表标签的点：ul：list-style-type：none，设置ul自带的padding

7. 左右使用百分号布局，左边使用固定定位

8. 头像框：图片头像，边界宽度，solid，颜色，overflow，设置图片的width:100%

9. 调整头像框位置

10. 设置左边信息的字体颜色灰色，大小18px，位置居中

11. 设置左侧标题的 hover，改颜色

12. 设置右侧的文章列表

13. div的阴影效果

    box-shadow: 5px 5px 5p rgb(0,0,0,0.5)
    

14. 文章列表标题的字体，字体大小，粗细

15. 日期靠右，float:right，调margin

16. 设置大div的padding，1em

17. 设置文字大小，布局

JavaScript简介

跟java没有任何关系，js是一门编程语言，也可以写后端：nodejs，支持js代码跑在后端服务器上，但是并没有被广泛使用

js版本主要用5.1和6.0

注释

//js注释
/*
多行
注释
*/

JavaScript引入方式

1. script标签内部直接书写
2. script标签 src属性引入外部js代码

JavaScript语法结构

• 以分号作为语句的结束，但是如果不写问题也不大，也能执行，但是运行不会结束

学习流程

1. 变量
2. 数据类型
3. 流程控制
4. 函数
5. 对象
6. 内置方法

变量

首次顶一个变量名的时候需要用关键字声明

1. var

   var name = ‘deimos’

2. es6推出的新语法 let

   let name = ‘deimos’

区别：var作用于全局，let作用于局部

可以在浏览器调出console窗口写js代码

常量

python中没有真正意义上的常量，以默认全大写表示常量，js中是有真正意义常量的

const pi = 3.14