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;}