H5 58-网页的布局方式
<!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-网页的布局方式的更多相关文章
- web网页 页面布局的几种方式（转）
web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...
- 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式--备用
我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView 通过初始化的时候 传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...
- 【Android UI】Android开发之View的几种布局方式及实践
引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...
- Android 开发之旅：view的几种布局方式及实践
本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...
- Android 开发：view的几种布局方式及实践
View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).相对布局(Relative Layout).表格布局(Tab ...
- 自定义UICollectionViewController之后 如何设置UICollectionView的布局方式
我们很多时候使用UICollectionView 可能都是直接创建 UICollectionView 通过初始化的时候 传入一个布局对象的方式来使用UICollectionView 比如我们之前 ...
- 支付宝H5 与网页端支付开发
在日常生活中,我们基本上都是进行微信与支付宝的支付方式尽心支付,这种方式确实大大便利了我们的生活,那么如何在我们的产品中进行微信与支付宝支付的植入开发呢? 我们先进行支付宝的H5与网页端支付开发,这里 ...
- Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介
VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...
- CSS原生布局方式
前言 网页原生布局的方法其实网上有很多,大概为Flow(流动布局模型).Float(浮动布局模型).Layer(层级布局模型).<!--more--> Flow布局 流动布局模型其实就是默 ...
随机推荐
- ORA-12514, TNS:listener does not currently know of service requested in connect descriptor案例2
今天使用SQL Developer连接一台测试服务器数据库(ORACLE 11g)时,遇到了"ORA-12514, TNS:listener does not currently know ...
- java.lang.NumberFormatException: Infinite or NaN
1.异常提示: java.lang.NumberFormatException: Infinite or NaN 2.原因:无法格式化的数字,此数字要么不是个数字,要么是无穷大的数字,从而导致 B ...
- Python的变量以及类型
1.程序是用来处理数据的,变量就是用来存储数据的 num1 = 100 2.为了更充分的利用内存空间以及更有效率的管理内存,变量是有不同的类型 3.怎样知道一个变量的类型呢? 3.1 在python ...
- Windows Server 2016-Windows Server Backup功能
一.Windows Server Backup 介绍: Windows Server Backup 是一种功能,它提供了一组向导和其他工具,大概从WinSer2008开始Win Ser Backup引 ...
- 编写脚本实现DHCP服务与DHCP中继自动化执行
编写脚本实现DHCP服务与DHCP中继自动化执行 本脚本是在liunx搭建DHCP服务器以及DHCP中继服务器实验环境下实现的https://www.cnblogs.com/yuzly/p/10539 ...
- [Hive_add_7] Hive 实现最高气温统计
0. 说明 Hive 通过 substr() 函数实现最高气温统计 1. Hive 实现最高气温统计 1.1 思路 将一行文本加载为 String 通过 substr() 函数截取年份和温度 1.2 ...
- 力扣算法题—069x的平方根
实现 int sqrt(int x) 函数. 计算并返回 x 的平方根,其中 x 是非负整数. 由于返回类型是整数,结果只保留整数的部分,小数部分将被舍去. 示例 1: 输入: 4 输出: 2 示例 ...
- vue调试工具的安装
开发避免不了的就是调试工具,因为vue是进行数据驱动的,单从chrome里面进行element查看,查不到什么鸟东西,必须要进行对数据动向进行关查 首先是下载这个工具,github下载地址:https ...
- kafka环境搭建测试
一.安装 1. 下载:去kafka官网下载:https://www.apache.org/dyn/closer.cgi?path=/kafka/0.9.0.1/kafka_2.11-0.9.0.1.t ...
- Linux操作系统有什么吸引力，在程序员中这么受欢迎？
Linux操作系统有什么吸引力,在程序员中这么受欢迎? 在过去的几十年里,操作系统已经取得了很大的进步.曾经由微软Windows或苹果MacOS主导的操作系统,如今已不再是常态.千禧年之后,随着人们对 ...