前端学习笔记--CSS布局--float定位
1.float属性
box1向右移动，box2顶替了box1的位置，box3顶替了box2的位置。
2.clear属性
案例：
一列三行布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#contain{
margin: 0 auto;
width: 1000px;
height: 500px;
/*background-color: red;*/
}
#header{
height: 200px; /*宽度默认是父级元素的100%，要给高度把盒子撑开*/
background-color: #6cf;
margin-bottom: 5px;
}
#main{
height: 500px;
background-color: green;
margin-bottom: 5px;
}
#footer{
height: 100px;
background-color: #6cf;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="contain">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
左右布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#contain{
margin: 0 auto;
height: 500px;
width: 1000px;
}
#side{
float: left;
width: 300px;
height: 500px;
background-color: green; /*如果不加margin-right，把main的浮动方式改为right，也可以实现左右布局，中间仍然有5px的间隙*/
margin-right: 5px;
}
#main{
float: left;
width: 695px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<div id="contain">
<div id="side"></div>
<div id="main"></div>
</div>
</body>
</html>
3行2列布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#contain{
margin: 0 auto;
width: 1000px;
height: 600px;
}
#header{
height: 200px;
background-color: blue;
margin-bottom: 5px;
}
#main{
height: 600px;
margin-bottom: 5px;
}
#side{
height: 600px;
width: 200px;
float: left;
background-color: red;
}
#mains{
height: 600px;
width: 795px;
float: right;
background-color: green;
}
#footer{
height: 100px;
background-color: pink;
} </style>
</head>
<body>
<div id="contain">
<div id="header"></div>
<div id="main">
<div id="side"></div>
<div id="mains"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
前端学习笔记--CSS布局--float定位的更多相关文章
- 前端学习笔记--CSS布局--层定位
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...
- 前端学习笔记--CSS布局--文件流定位
1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
- web前端学习笔记(CSS盒子的定位)
相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relat ...
- 前端学习笔记--CSS布局--盒子模型
1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:
- HTML 学习笔记 CSS样式（定位）
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- web前端学习笔记(CSS固定宽度布局)
一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...
- 前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...
- 前端学习(20)~css布局(十三)
常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...
随机推荐
- 6.2.3 reginst中的yzm
@RequestMapping("/reginst/{yzm}") public Object reginst(User user,@PathVariable String yzm ...
- 【剑指offer】面试题 52. 两个链表的第一个公共结点
面试题 52. 两个链表的第一个公共结点 NowCoder 题目描述 输入两个链表,找出它们的第一个公共结点. Java 实现 ListNode Class class ListNode { int ...
- CentOS下使用yum安装Apache极为方便，只需要在终端键入以下命令即可
CentOS下使用yum安装Apache极为方便,只需要在终端键入以下命令即可 1.安装Apache yum install httpd 2.设置服务器开机自动启动Apache systemctl e ...
- 八皇后问题——列出所有的解，可推至N皇后
<数据结构>--邓俊辉版本 读书笔记 今天学习了回溯法,有两道习题,一道N皇后,一道迷宫寻径.今天,先解决N皇后问题.由于笔者 擅长java,所以用java重现了八皇后问题. 注意是jav ...
- 欧拉图Eulerian Graph
一.节点的度 无向图:节点的度为该节点所连接的边数 有向图:节点的度分为入度和出度. 二.欧拉图定义 具有欧拉回路的图称作欧拉图,具有欧拉路径而无欧拉回路的图称为半欧拉图. 欧拉回路: 通过图中每 ...
- EXCEL 快捷键大全
1.ctrl+tab :快速切换已打开的excel/ppt/word同样适用 2.shift+右上角的× :关闭所有excel/ppt/word 3.ctrl+d:快速复制非文本目标,对于文本是删除 ...
- PAT(B) 1083 是否存在相等的差（Java）统计
题目链接:1083 是否存在相等的差 (20 point(s)) 题目描述 给定 N 张卡片,正面分别写上 1.2.--.N,然后全部翻面,洗牌,在背面分别写上 1.2.--.N.将每张牌的正反两面数 ...
- vm虚拟机啊安装操作
VMware下载与安装一.虚拟机的下载1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Windo ...
- Singer House CodeForces - 830D (组合计数,dp)
大意: 一个$k$层完全二叉树, 每个节点向它祖先连边, 就得到一个$k$房子, 求$k$房子的所有简单路径数. $DP$好题. 首先设$dp_{i,j}$表示$i$房子, 分出$j$条简单路径的方案 ...
- 杭电2577 多数组dp问题
Problem Description Pirates have finished developing the typing software. He called Cathy to test hi ...