前端 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;
博客园页面搭建
在书写html的时候，class，id等属性最好写顾名思义
blog-left，blog-right
-
先写html，把大致写好
-
写外部css，引入
-
split ver 可以分屏
-
页面背景颜色 #EEE，暗一点，页面自带的margin，padding设置为0
-
a标签的text-decoration设置为none
-
去掉列表标签的点：ul：list-style-type：none，设置ul自带的padding
-
左右使用百分号布局，左边使用固定定位
-
头像框：图片头像，边界宽度，solid，颜色，overflow，设置图片的width:100%
-
调整头像框位置
-
设置左边信息的字体颜色灰色，大小18px，位置居中
-
设置左侧标题的 hover，改颜色
-
设置右侧的文章列表
-
div的阴影效果
box-shadow: 5px 5px 5p rgb(0,0,0,0.5) -
文章列表标题的字体，字体大小，粗细
-
日期靠右，float:right，调margin
-
设置大div的padding，1em
-
设置文字大小，布局
JavaScript简介
跟java没有任何关系，js是一门编程语言，也可以写后端：nodejs，支持js代码跑在后端服务器上，但是并没有被广泛使用
js版本主要用5.1和6.0
注释
//js注释
/*
多行
注释
*/
JavaScript引入方式
- script标签内部直接书写
- script标签 src属性引入外部js代码
JavaScript语法结构
- 以分号作为语句的结束，但是如果不写问题也不大，也能执行，但是运行不会结束
学习流程
- 变量
- 数据类型
- 流程控制
- 函数
- 对象
- 内置方法
变量
首次顶一个变量名的时候需要用关键字声明
-
var
var name = ‘deimos’
-
es6推出的新语法 let
let name = ‘deimos’
区别：var作用于全局，let作用于局部
可以在浏览器调出console窗口写js代码
常量
python中没有真正意义上的常量，以默认全大写表示常量，js中是有真正意义常量的
const pi = 3.14
