position
1)relative 相对定位相对自身,不脱离标准流
2)absolute 绝对定位相对非静态定位的父级元素,脱离标准流
3) fixed固定定位相对浏览器,脱离标准流
怎样清除浮动?1)额外标签法 给父元素最后添加一个 块级子元素, 给这个子元素, 设置 clear: both;
2)overflow:hidden 给父元素设置overflow:hidden (触发BFC)
3)伪元素清除浮动
.clearfix:after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
4)直接给父元素设置高度。
yen nbsp
解决塌陷问题
1) 给父盒子加边框 (上边框)
2) 给父盒子加padding-top
3) overflow: hidden; (触发了BFC, 块级格式化上下文)
4) 利用浮动, 给子元素加 float: left;
box-shadow: px px px red;盒子阴影
text-shadow: px px px red;字体阴影
text-align; left center right
text-inden: px // em
text-decoration:underline//none//line-through
input【type=“text”】属性选择器
box-sizing:border-box;自动减去盒子加上的padding和border数值 让盒子一直保持原本大小
form <input type 取值 text 文本输入框
password 密码输入框
radio 单选框 name设置为同样的值 value取值
checkbox 复选框 checked默认被选中
file 文件
button 普通按钮 也可以单独使用
submit 提交按钮
select 下拉框 option value=选项
selected 默认被选中的
textarea 评价文本输入框 textarea 取值 resize:none; 不能拖拽文本框 或者row col
/form
video loop outplay controls source
audio 音频 取值同视频
ul li , ol li ,dl dt dd,
table tr th td boeder=1 cellspacing=0 cellpadding=
新增的6大语义化标签 header nva article aside section footer
块级标签:div p h1-h6 ul li ol dl dt dd ....6大新增标签
行级标签:span a b ins del i u s strong em
行内块级标签:input img
转换:display:block//inline//inlien-block//
border-radius: px 调整盒子的边角
元素的显示和隐藏:
display:none;/block;不占位置
visibility:hidden;/visible;占位置
overflow:hidden;溢出部分隐藏
行内块垂直居中:img input display:
vertical-align:middle;/baseline/top;/bottom;
javascript部分;运行在客户端的脚本语言;
script/alert警告框 confirm确认框 prompt输入框 document.write()在页面中显示内容 console.log在后台显示
声明一个变量var 变量名=赋值;
赋值的类型:number。string。boolean。undefined。unll。
类型转换;num=num.tostring(); /num=string(num);/ num=num+"";
Number(); true=1; false=0; NaN;
parseInt();转换成整数,parseFloat();一个小数点
分支结构:
1,if(条件){条件为true执行};
2, if(){}else{};
3,条件?表达式1:表达式2;
4, switch(变量){case 值1;语句;break;};
循环结构:
1,while(条件){循环体};
2,do{循环体}while(条件);不知道循环次数用这个
3,for(初始条件;条件;i++){循环体};
break:结束整个for循环
continue:结束当前的循环,进入下一次循环
数组:一个有序的集合,可以存储多个数据
var arr=new Array();/var arr=[];创建一个新的空数组
var arr=[值1,值2,]用逗号隔开
通过下标来存值arr[0]=‘’,取值。下标从0开始 最大下标=arr.length-1;
数组的遍历for(var i=0;i<arr.length;i++){console.log(i);}
倒着遍历for(var i=arr.length-1; i>=0; i--){};
函数:用function封装一些重复发代码
function 函数名(形参,形参){函数体,重复发代码}; 函数的调用: 函数名(实参,实参);
return 返回值,返回函数里的一个结果。声明一个变量来接收这个返回值 var 变量名a=函数名(实参,实参);
函数表达式 var 变量=function(){};调用:变量(实参);
函数的内部还可以调用其他函数,也可以调用函数自己,不过要留有出口,需要一个结束条件if(){};
函数也是一种数据类型,可以当做参数,也可以当成返回值
匿名函数,没有函数名的函数,可以赋值给一个变量var fn=function(){};
防止全局变量污染 ,匿名函数自执行(function(){})();
对象:一个无序的键值对的集合
var obj=new Object();/var obj={键:值,键:值,方法:function(形参){},};
对象的存取 obj.键=值; obj.方法(实参);获取:obj.键;/ obj[‘键’];
工厂函数:批量创建多个对象;
function 函数名(){
var obj={键:值,键:值,方法:function(形参){},};
return obj;
}
var 变量名=函数名(实参);console.log(变量名); 变量名.方法();
构造函数;先创建一个函数
function 函数名1(形参){
this.属性名=属性值; //this是给新创建的这个对象增加属性
this.方法=function(){};
};
var 变量1=new 函数名1(实参);console.log(变量1); 变量1.方法();
遍历对象:for(var 变量 in 对象){console.log(变量);-打印属性名。console.log(对象[变量]);-打印属性值。}
删除对象的属性:delete 对象.属性名; /delete 对象[‘属性名’];
博客介绍了CSS的定位方式,如相对、绝对、固定定位,还提及清除浮动和解决塌陷问题的方法,以及盒子阴影、文本样式等。同时介绍了表单元素、语义化标签等。此外,详细阐述了JavaScript的变量、类型转换、分支和循环结构,以及数组、函数、对象的使用。
176万+

被折叠的 条评论
为什么被折叠?



