web系列

web前端学习笔记整理之

HTML+CSS（1）

一.CSS书写规范
1、定位（position,top,right,z-index,display,float）
position：absolute；
top:0;
right:0;
bottom:0;
left:0;
z-index：100；
display:block;
float:right;
2.大小(width,height,padding,margin)
margin:10%;
padding:2%;
width:100px;
height:100px;
3.文字系列(font,line-height,letter-spacing,color-text-align等)
font:normal 13px “Microsoft YaHei”,sans-serif;
line-height:1.5;
color:#333;
text-align:center;
4.背景（background，border等）
background-color:#f3f3f3;
border:1px solid #e3e3e3;
border-radius:3px;
5.其他（animation，transition,透明度等）
opacity:1;
二、背景样式设置
1.背景颜色
background：#fff;
background:rgb(0,0,0,0.5);（rgb（红绿蓝 透明度）最后一位越接近1 透明度越低）
2.背景图片
background：url（images/1.png） no-repeat；
3.背景颜色渐变
background：linear-gradient（60deg,red,blue）;沿60度方向由红向蓝变色
background：linear-gradient(80deg,red 30px,blue 60px,red 90px,blue 120px);每个颜色都有自己的位置，而且是以像素为单位，位置从渐变线的开始位置处开始计算。
background：
repeating-linear-gradient（red,yellow 10%,green 20%）;重复线性渐变
径向渐变：（颜色结点均匀分布）
background：radial-gradient（red，green，blue）从圆心向外从red变到blue
径向渐变：（颜色结点不均匀分布）
background：radial-gradient (red 5%,green 15%,blue 60%)
设置形状：（形状为圆的径向渐变）
background：radial-gradient(circle,red,yellow,green)
重复径向渐变：
background：repeating-radial-gradient();
4.图片尺寸
background-size:400px 350px;设置图片尺寸
5.图片位置
background：url（images/1.png） 10px center no-repeat；（距左10px，居中）
background-position：10px 5px；（X Y）
background-position:right bottom;设置图片在div中的位置，如右下角
三、位置样式设置
1.外边距
margin（顺时针）上 右 下 左
左无则从右，右无则从上，下无则从上；
margin：5px 6px；上下5px 左右6px
margin：5px 7px 6px；上5px 左右 7px 下6px
margin：5px 6px 5px 6px ；上5 右6 下5 左 6
2.内边距
padding：同margin
3.position定位
position：static；默认值，没有定位；
position：relative；相对元素static定位时的位置进行偏移，如果指定static元素top=50px时，那么指定relative元素top=10px时就是60px；
position：absolute；绝对定位，直接指定top、left、right、bottom，坐标是相对于离元素最近的一个使用了定位元素的“祖先”即容器，如果没有则使用浏览器初始的，也就是body或HTML元素
position：fixed；绝对定位，相对于浏览器，滚动页面，元素也能相对于浏览为保持不变。
在对元素使用position：absolute时，其父元素要使用定位（position：relative；）
四、行内元素与块状元素
1、行内元素
常见：span、b、i、sub、sup
特点：1）设置宽高无效，2)对margin仅设置左右方向有效，上下无效、padding设置上下左右都有效，会撑大空间；3)不会自动换行
2、块状元素
常见：div、p、nav、aside、header、footer、section、article、ul-li、address
特点：1）能够识别宽高；2）margin和padding的上下左右均对其有效；3）可以自动换行，多个块状元素标签写在一起，默认排列方式为从上至下
3.行内块元素
特点：1）不能自动换行2）能识别宽高3)默认排列方式从左到右
4.三类元素间的相互转化
display：inline；转换为行内元素
display：block；转换为块状元素
display：inline-block；转换为行内块元素