<!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>

H5 58-网页的布局方式的更多相关文章

  1. web网页 页面布局的几种方式（转）

    web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...

  2. 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式--备用

    我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView   通过初始化的时候  传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...

  3. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

  4. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

  5. Android 开发：view的几种布局方式及实践

    View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...

  6. 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式

    我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView   通过初始化的时候  传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...

  7. 支付宝H5 与网页端支付开发

    在日常生活中,我们基本上都是进行微信与支付宝的支付方式尽心支付,这种方式确实大大便利了我们的生活,那么如何在我们的产品中进行微信与支付宝支付的植入开发呢? 我们先进行支付宝的H5与网页端支付开发,这里 ...

  8. Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介

    VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...

  9. CSS原生布局方式

    前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默 ...

随机推荐

  1. SQL2008无法附加数据库，提示“无法显示请求的对话框”（nColIndex实际值是-1）图文解决方法

    SQL2008无法附加数据库,提示“无法显示请求的对话框”(nColIndex实际值是-1)图文解决方法 SQL2008无法附加数据库,提示“无法显示请求的对话框”(nColIndex实际值是-1)图 ...

  2. 自动化测试基础篇--Selenium iframe定位问题

    摘自https://www.cnblogs.com/sanzangTst/p/7473437.html 有时候我们在定位的途中发现一个现象,元素就在那儿,不离不去,但是我们怎么整就是定不了位,这个时候 ...

  3. asp.net 调用 WNetAddConnection2 window api 访问被拒绝

    通过Asp.net 程序调用局域网另外一台机器文件,显示拒绝访问,单独编写控制台程序正常. 修改iis 应用程序池标识,为管理员用户即可!!

  4. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  5. Linux shell编写端口扫描脚本

    Linux shell编写端口扫描脚本 需求: 扫描特定主机 扫描特定主机的特定端口 扫描特定网段 扫描特定网段中哪些主机开放了特定的端口 源码如下: #/bin/bash #该脚本用于对特定目标主机 ...

  6. Vue 学习笔记之快速入门篇

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与 ...

  7. Ubuntu16.04系统安装搜狗输入法详细教程（转载）

    1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位,所以我下载64位的安装包 2.按键C ...

  8. 【Beta】博客合集

    [Beta Scrum]冲刺! 1/5 [Beta Scrum]冲刺! 2/5 [Beta Scrum]冲刺! 3/5 [Beta Scrum]冲刺! 4/5 [Beta Scrum]冲刺! 5/5

  9. 【漫画解读】HDFS存储原理

    根据Maneesh Varshney的漫画改编,以简洁易懂的漫画形式讲解HDFS存储机制与运行原理,非常适合Hadoop/HDFS初学者理解. 一.角色出演 如上图所示,HDFS存储相关角色与功能如下 ...

  10. SecureCRT8.1+SecureCRT_keygen完成注册

    原文:https://www.cnblogs.com/qiyawei/p/7822957.html 1.下载完secureCRT8.1之后,进行安装. 点击secureCRT.exe的时候会出现如下图 ...