html+css+javascript学习总结
html⽤来写页⾯的结构和内容，css写样式和呈现效果，javascript写⾏为和动作
1.html常⽤标签
a 超链接
div 盒⼦，常⽤来控制样式的
ul，ol ⽆序列表和有序列表
img 图⽚标签
button 按钮
form 表单
input 输⼊框标签，type属性不同，功能也不同。例如：text⽂本输⼊框，button按钮，submit提交按钮，checkbox复选框，radio单选按钮，password密码输⼊框
label 定义 input 元素的标注。
2.css
2.1.常⽤选择器
class属性选择器 .class属性名
id选择器 #id名
标签选择器 标签名
选择下级元素⽤空格隔开，同级元素⽤逗号’,'隔开。
选择⼦元素中指定的第⼏个⽤nth-child，例: div:nth-child(2)，选择div元素下的第⼆个⼦元素
2.2.常⽤属性
background 设置背景相关属性
color 设置元素中⽂字颜⾊
font 设置字体相关元素
text-indent 设置⾸⾏缩进
text-align 设置元素对其⽅式
text-decoration 设置a元素的下划线css 属性选择器
line-height 设置⽂字⾏⾼
list-style:none 取消列表前⾯默认的数字或⼩圆点
a:hove hove属性设置当⿏标移动到元素上时显⽰的样式
margin 设置元素的外边距
padding 设置元素的内边距
border 设置元素边框
border-radius 设置圆⾓
outline 设置元素被选中时的边框
transition 设置动画
transform 设置动画属性，这个属性要和transition配合使⽤，例如rotate(90deg)旋转90度，translate(20px,20px)元素在x轴移动20像素在y轴移动20像素
animation 使⽤这个动画要先⽤@keyframes定义
2.3.浮动相关
float 设置浮动，left左浮动，right右浮动
.clearfix:after,.clearfix:before{ content: “”;display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
清除浮动或者解决塌陷问题
overflow:hidden 设置当元素超出⽗元素时的显⽰模式，hidden为隐藏，scroll显⽰滚动条，auto如果超出则⾃动显⽰滚动条
2.4.移动端布局
移动端布局⾸先要⽤下列⽅式在html头部声明视⼝问题,（在sublime text3编辑器⾥输⼊ meta:vp再按tab键即可出来）
⽤rem可以解决移动端缩放的问题，其原理是把⽂档内元素的尺⼨换算成基于html根标签定义的font-size尺⼨，随着屏幕尺⼨的变化改变根标签的font-size尺⼨就可改变⽂档整体的尺⼨。
2.4.1 ⾸先在⽂档⾥加⼊以下javascript代码
(function(){
var calc = function(){
var docElement = document.documentElement;
var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
docElement.style.fontSize = 20*(clientWidthValue/375) + ‘px’;
}
calc();
window.addEventListener(‘resize’,calc);
})();
2.4.2
然后把⽂档⾥所有元素的尺⼨换算成rem就好。例如：200px等于200/40=5rem。为什么要除以40⽽不是20，是因为要解决移动端视⽹膜屏（retina屏）的问题

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。