H5 58-网页的布局方式
2017-03-26 11:20
218 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>58-网页的布局方式</title> <style> /* div,h1,p{ border: 1px solid #000; } span,strong,b{ border: 1px solid #000; } */ *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: red; /*display: inline-block;*/ float: left; } .box2{ width: 100px; height: 100px; background-color: blue; /*display: inline-block;*/ /*margin-left:930px;*/ float: right; } </style> </head> <body> <!-- 1.什么是网页的布局方式? 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 1.标准流(文档流/普通流)排版方式 1.1其实浏览器默认的排版方式就是标准流的排版方式 1.2在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素 1.3 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版 垂直排版, 如果元素是块级元素, 那么就会垂直排版 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版 2.浮动流排版方式 2.1浮动流是一种"半脱离标准流"的排版方式 2.2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐 注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值 2.在浮动流中是不可以使用margin: 0 auto; 特点: 1.在浮动流中是不区分块级元素/行内元素/行内块级元素的 无论是级元素/行内元素/行内块级元素都可以水平排版 2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高 3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像 3.定位流排版方式 --> <!-- <div>我是div</div> <h1>我是标题</h1> <p>我是段落</p> --> <!-- <span>我是span</span> <strong>我是强调</strong> <b>我是加粗</b> --> <span class="box1"></span> <span class="box2"></span> </body> </html>
相关文章推荐
- HTML网页布局方式
- Android app中区别网页H5 web 和原生布局方法
- 网页布局五之json方式的页面链接
- java基础58 JavaScript的几种格式和变量的声明方式(网页知识)
- CSS布局(五) 网页布局方式
- 网页瀑布流布局实现方式
- web网页 页面布局的几种方式
- CSS网页布局方式--浮动流、定位流
- 网页布局方式:浮动和定位
- 网页四种布局方式
- 网页的布局方式
- 网页布局方式
- web网页 页面布局的几种方式
- 网页流行的布局方式-笔记
- HTML网页布局方式总结 |有码有真相|
- 浏览器渲染网页时,呈现树布局方式
- 五中常规的网页布局方式
- CSS-19.网页布局方式
- H5研究四:用Native App思想指导网页布局
- 网页布局理念