css中盒子模型与浮动，看这篇就够了

css中的盒子模型 css处理网页时，他认为每个元素都包含在一个不可见的矩形盒子 盒子是由 内容区，内边距(padding)，边框，外边距(margin)组成
在浏览器中，其默认样式中存在一些body等元素存在的默认样式，比如一些外边距，内边距等,它的这些默认样式
所以在编写样式之前我们需要将默认样式取消掉，在书写代码时在style中引入下面的reset.css文件即可，下面的效果不好的话，可以百度reset.css粘贴进去。
内联元素的盒模型，设置width和height无效，水平方向的内边距可以用，内联元素可以设置 垂直方向的外边距，不会影响页面的布局，即不影响其他元素的位置，仅仅是其显示效果发生变化 可以使用边框，外边距，两个内联元素的相邻外边距会相加，垂直外边距不支持！
css中的display，通过display可修改元素类型，比如块元素转化为内联元素，内联元素转化为块元素，还可以设置为内联块元素，拥有他们的共性，可以设置宽高，但又
不独占一行，比如img标签。display：none 元素不显示，也不在页面占有位置。
visiblity visiblity：none 元素不显示，但在页面占有位置。

css盒子模型中的overflow 如果子元素大小超过父元素的大小，超出父元素的内容
会在超过父元素的区域显示，父元素默认是将溢出的内容，在父元素外边显示，通过overflow可以处理溢出的内容。比如overflow：scroll/auto，添加滚动条，来查看所有内容。
文档流 文档指的是HTML的页面，每个页面都是一个文档，文档流就是处在网页中的底层表示一个页面的位置，我们创建的元素默认处在文档流中
元素在文档流中的特点。
1.块元素在文档流中会默认独占一行，默认自上往下排列，默认宽度是父元素的100%
块元素的高度默认被内容撑开。
2.内联元素在文档流中只占自身的大小，默认从左向右排列，如果一行内容纳不了所有元素则会另起一行，接着自左向右。
在内联元素，宽度和高度默认被内容撑开。
浮动（float）
块元素在文档流中默认垂直排列，如果希望块元素水平排列，可以使其脱离文档流。

    
    
    
    
    



    

        

    
    
1
    
2
    
3





 -->

reset.css

reset.css @charset "utf-8";html{background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino
Sans GB",simsun,sans-serif} h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%} h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif} h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal} address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left} caption,th{text-align:inherit} ul,ol,menu{list-style:none} fieldset,img{border:0} img,object,input,textarea,button,select{vertical-align:middle} article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1} blockquote:before,blockquote:after,q:before,q:after{content:"\0020"} textarea{overflow:auto;resize:vertical} input,textarea,button,select,a{outline:0 none;border: none;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent} a,ins,s,u,del{text-decoration:none} sup,sub{vertical-align:baseline} html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;} body {font-family: Arial, "Microsoft Yahei", "Helvetica
Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;} hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;} a {color: #25a4bb;text-decoration: none;}

经典页面布局

    
    
    
    
    



    

    

        
2
        
3
    

全屏品字布局

    
    
    
    
    



    

    

        
2
        
3
    

更多前端资料请关注公众号：前端从入门到SP

微信扫描二维码获取更多资料