css盒子模型
盒子成分分析:
margin:盒子的外边距
margin-top:上边距
margin-bottom:下边距
margin-left:左边距
margin-right:右边距
padding:盒子的内边距
padding-top:上边距
padding-bottom:下边距
padding-left:左边距
padding-right:右边距
注意:从上开始,顺时针进行赋值 对边相等
border:盒子的边框
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
border-width:边框宽度
border-style:边框样式
border-color:边框颜色
盒子总大小计算:
margin+border+padding+content
css标准文档流
行内元素、行内块:依次从左到右进行排布
块级元素:依次从上到下进行排布
三种方式进行脱流:
1.浮动
2.绝对定位
3.固定定位
css浮动
浮动的性质
1.浮动的元素脱流
2.浮动的文字会出现字体围绕的效果
3.浮动的元素相互依靠
注意:浮动后不再区分行内、块级等,可以设置宽高
css定位
1.静态定位,默认为静态定位,position:static,无法通过top、bottom、left、right进行定位
2.相对定位,position:relative,参照原本的位置进行移动,通过top、bottom、left、right进行定
位,并且保留原本的位置
3.绝对定位,position:absolute,参照有定位属性的父级标签,如果没有,则参照body,通过
top、bottom、left、right进行定位,并且不会保留原本的位置
4.固定定位,position:fixed,参照浏览器进行移动,通过top、bottom、left、right进行定位
JavaScript介绍
JavaScript是一种基于对象和事件,并且有安全性的脚本语言,是一门弱类型语言
注意:js严格区分大小写
js的三种写法
1.行内js
只作用于当前行
2.页面js
作用于当前页面
3.外部js
作用于当前项目
js基本语法
js基本数据类型
1.number:数字
2.string:字符串
3.boolean:true&false
4.null:空
5.undefined:未定义
js变量:
var 变量名 = 变量值;
查询变量属于什么类型
typeof()