html&css培训总结

一、盒模型总结

盒模型一共两种，一是标准模式，另一种就是怪异模式
1.在标准模式下的盒模型，盒子总宽度/高度=width/height+padding+border+margin
2.在怪异模式下的盒模型，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height
+ margin = 内容区宽度/高度 + padding + border + margin;

box-sizing有两个值一个是content-box，另一个是border-box
当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
目前使用此属性需要前缀如下:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

二、关于定位
普通流定位：static
     默认值，遵循普通流
相对定位：relative
    相对位置，在通常位置进行偏移
绝对定位：absolute
    相对最近的父级标签来固定位置
固定定位/浮动定位：fixed
    相对窗口固定且无视页面滚动

三、选择器
1.伪类选择器
   a:link{}
   a:visited{}
   a:hover{}
   a:active{}
2.伪元素选择器：
   1）first-line
         p:first-line{}
   2) first-letter
         p:first-letter{}
    3)  before
         p:before{}
    4)  after
         p:after{}

2.id 选择器
和 类选择器
    ID 只能在文档中使用一次，而类可以多次使用(id
必须是唯一的，所以一般用ID构建框架，类构建属性)
3.属性选择器

4.后代选择器和子元素选择器
   后代选择器：两个元素之间的层次间隔可以是无限制的，不论后代选择器嵌套层次多深
   子元素选择器：不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，只有一个
   
四、浮动float
   浮动元素会向左/右移动,
直到它的外边缘碰到包含框或另一个浮动框的边框为止.
   根据常规流和格式化上下文的特性,
浮动框脱离常规流(normal flow), 它会影响到内联框的排列,
但不会影响到块级框.
    这是因为,
在布局浮动元素时, 一旦普通流中出现了浮动元素,
一个框盒首先根据常规流来布局, 然后脱离常规流,
向左/右移动.
这导致沿着它边上的文本content都将"浮动".
即,
其它盒子看不到被float的盒子,
但其它盒子中的文本却能看到它.
     
五、清除浮动三种方式，还需在实践中使用才能熟练
      1..clear{
display:block;float:none;clear:both;overflow:hidden;
visibility:hidden;width:0;height:0;background:none;border:0;font-size:0;
} 
        .clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;} .clearfix{zoom:1;}
       2.采用overflow:auto的方式撑高
       3.采用overflow:hidden的方式产生怪异适应
      https://tink.gitbooks.io/fe-collections/content/ch03-css/float.html      http://www.iyunlu.com/view/css-xhtml/55.html
六、H5-心得，还需在实践中使用才能熟练
      1.手机上能等比浏览-->《meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"》
2.去除ipone中的按钮默认颜色-->
input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
3.去掉Windows Phone点击时的高亮效果-->
《meta name="msapplication-tap-highlight" content="no" /》
4.click事件比touchstart相应慢300ms
七、当设置了position 的absolute ,它的位置大小会一直往父级找到有添加position 属性的标签并依他为标准
八、居中
       width: 200px;
height: 200px;
margin-top: -100px; (高的一半)
margin-left: -100px; （宽的一半）
九、input 和 img 默认都是行块的标签
十、在body 上设置公用字体的话，所有其他标签会沿用，但input 比较特殊，要额外设置
十一、有时候线的像素要求和严格，需要精确到高度为0.5或者0.3、0.2.
            可以用 transform ：scaleY(0.5) 
十二、这样也能用，就是性能比较低
           *{
               margin:0px;
              padding:0px;
             } 
十三、用绝对定位父级标签会塌陷
            用float 时要清除浮动高度才不会塌陷
十四、如果有对张图片并排会发现图片之间会存在间隙，无论如何设置margin、padding都没用。可以用这  
           个方法解决：
            font-size: 0px;
    line-height: 0px;
十五、公用的标签初始化
html{color:#000;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}body{font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#000;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;margin:0;padding:0;}audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}input:focus,a:focus{outline:none;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}button,input,textarea,select{font-family:tahoma,arial,simsun,sans-serif;font-size:inherit;font-weight:inherit;line-height:1.5;vertical-align:middle;}button,input,textarea,select{*font-size:100%;}textarea{resize:none;}table{border-collapse:collapse;border-spacing:0;}th{text-align:inherit;}a{vertical-align:baseline;}a:hover{text-decoration:underline;}ins,a{text-decoration:none;}.clear{display:block;float:none;clear:both;overflow:hidden;visibility:hidden;width:0;height:0;background:none;border:0;font-size:0;}.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;}.clearfix{zoom:1;}