一.元素显示模式一.元素显示模式
1.块级元素:独占一行,可以改变宽高.例如div,p,ul,li等
2.行内块元素:一行内可以有多个,可以改变行宽高.例如input,textarea等
3.行内元素:一行内可以有多个,不可以改变行宽高.例如a,span等
4.可以通过display:(元素显示模式)的方式对其进行更改
二.盒子模型
1.由外而内依次是:margin,border,padding,content
2.如果对模型的大小进行赋值,赋值次序依次是:
(1).只有一个那就大家共享
(2).只有两个那就对半分,不过上下的优先级高
(3).有三个的话,上的优先级最高,那他先拿第一个,下再先拿就有些过意不去了,那就先让给左右,自己最后拿
(4).有4个的话就上右下左挨个分
三.伪元素和伪类
1.伪类是在元素被选中时,选中元素表现出特殊状态,例如鼠标悬停时化为按键的模样等
一般格式为:类名:hover{}
2.伪元素常用来创建不属于文档的元素,在文本前后使用分隔块等
一般格式为:类名::(特定作用名(关键词)){}
四.定位
1.相对定位:相较于自己原本所处位置的定位方式,移位后原位置所占用的空间依旧存在
一般格式为:position:relative;top,bottom,left,right中选2个,遵循取上不取下,取左不取右的原则
2.绝对定位:相较于位于自身最近的父类进行定位的方式,移位后原位置所占用的空间不存在
一般格式为:position:absolute;top,bottom,left,right中选2个,遵循取上不取下,取左不取右的原则
3.固定:固定于网页整体的定位方式,会随着网页的变化进行相应的移动,所有的定位都与网页的本体相关
一般格式为:position:fixed;top,bottom,left,right中选2个,遵循取上不取下,取左不取右的原则
4.浮动:让文本盘旋于某个字符或是图片等周边的定位方式,可以取消,不过位置也会相应下移
5.弹性:尝试了许久还没用明白的定位方式,在此总结一下错误经验
(1).一定得在上级的地方使用flex才会生效,在子集中使用flex不会起定位效果
(2).flex的定位优先级高,会顶替掉文字,图片的居中定位等
(3).flex的主轴,交叉轴不能在子集当中修改
(4).如果块中的预想排版模式很复杂,千万不要上来就规定主轴和交叉轴的排列方式,会变得不幸
五.JS
1.alert:会在浏览器上方显示提示信息,不点击确认就无法进行下一项操作.嗯.......强迫感浓浓
2.let,var均用于定义数据,数据类型基本涵盖了所有,一般用let居多
undefined:没被赋值的数据
null:空值
3.对象,数组:数组可以涵盖所有数据类型,不用单独定义,对象也可以容纳多种数据类型,可以通过属性名访问
4.function:用于定义函数,一般格式为function 函数名(){}
5.onclick:用于在点击后触发函数效果,一般格式为:onclick="函数名()"
6.getElementById(),getElementsByClassName():两者都用于获取数据,前者靠id,后者靠class,一般格式为:document.get方法名('对应的id或class')(此处单双引号皆可)后加value,innerHtml等
注意事项:此处返回的均为字符串数组,如果要获取可计算数据需要parse方法转义,此外要获取单独元素时要在get方法名()后输入其下标
7.可以通过在后面加 .方法体=___ 来进行数据或内容的修改,
innerHtml用于修改文本内容,value用于数据
