css基础2-标准文档流、透明度、禁止拖动textarea、去掉input外边框、图片默认边框

• padding区域有背景颜色。给一个盒子添加背景颜色时，padding区域也有背景颜色，也就是说background-color: red;将填充所有border以内的区域。
• border边框

border: 1px solid #eee;/*综合写法*/

border-width: 10px 20px 30px 40px;/*边框粗细 上 右 下 左*/
border-style: solid dashed dotted solid;/*边框样式实线、虚线、点划线 上 右 下 左*/
border-color: red green yellow pink;/*边框颜色 上 右 下 左*/

• 标准文档流
  1.空白折叠现象：只有行内元素才有空白折叠现象 一张图片就是一个文字，两张图片之间有缝隙。除掉缝隙就要让图片标签紧密连接。（图片、表单元素看做是一个文本）
  2.高矮不齐，底边对齐。
  3.自动换行，一行写不满，会自动换到下一行。

• 块级元素和行内元素：标准文档流中，标签分为两种等级（块级元素、行内元素）
  块级元素独占一行，不与其他元素并列，可以设置宽，如果不设置宽就是父亲的100%：p、div、h系列、li、dt、dd、
  行内元素，不能设置宽高，默认是文字宽度：span、a

• 脱离标准文档流方法：
  1.浮动：浮动的元素相互贴靠、浮动的元素有自围效果、收缩（如果没有设置宽度，浮动后将自动收缩为文字宽度），一旦浮动就可以设置宽高。注意：a标签不能浮动。
  2.绝对定位
  3.固定定位

• 透明度

opacity: 0.6;  /*主流浏览器 盒子半透明，盒子里面的内容也会一起半透明*/
filter: alpha(opacity = 60);/*兼容IE6 盒子半透明，盒子里面的内容也会一起半透明*/

background: rgba(0,0,0,.5);/*只是背景颜色50%的透明度，内容不会透明，一般用于轮播图左右按钮*/

• 禁止用户拖动textarea编辑区域

resize: none;

• 去除input框蓝色边框

outline-style: none;

• 去掉上下两张图片之间间隙（去除图片底边3px距离）

img {vertical-align: top;}/*去掉上下两张图片之间间隙（去除图片底边3px距离）*/

img {border: none;}/*测试兼容性 去掉图片默认的边框颜色*/