CSS之浮动元素
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
clear:right;
</style>
</head>
<body>
<!--浮动元素float-->
<img src="./111.jpg" alt="美女2" style="float:right"/>
<!--
.clear{clear:left;}
清楚浮动后，则变成块标签
-->
<p>11111111<p>
<p>11111111<p>
<table border="1" cellspacing="0" width="40%" height="100%" align="center">
<tr>
<td>测试浮动元素</td>
<td>测试</td>
</tr>
</table>
<p>11111111<p>
<p>11111111<p>
<p>11111111<p>
<p>11111111<p>
<p>11111111<p>
<p>11111111<p>
<!--使用<div>布局页面，产生三列的效果-->
<img src="./111.jpg" alt="美女2" style="float:right"/>
<img src="./111.jpg" alt="美女2" style="float:right"/>
<img src="./111.jpg" alt="美女2" style="float:right"/> <!--
定位元素 将浏览器窗口看做一个坐标系统，以左上角为坐标原点 (0,0)，横坐标为x轴，纵坐标为y轴。
absolute（绝对定位）
通过属性left、right、top和bottom来定位元素。
h1
{
position: absolute;
top: 20px;
left: 60px;
}
绝对定位不占据页面空间。
-->
<!--
relative（相对定位）
采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的（top,left）。
采用相对定位的元素会获得相应的空间。
即是相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。 例子：
<div class="center">
<div class="content">
美国两位总统候选人7日晚在田纳西州贝尔蒙特大学举行了第二场辩论，金融危机成为双方攻守的主打牌。
</div>
</div> .center{
position: absolute;
top: 50%;
left: 50%;
border: solid 1px green;
}
.content{
position: relative;
top: -50px;
left: -100px;
width: 200px;
height: 100px;
border: solid 1px red;
解析：
1. 绿色边框是center元素所在的位置，其左上角处于页面的正中心。
2. 红色边框的是content元素所在的位置，其左上角相对center元素向上移动了50px，向左移动了100px，从而使其位于页面的中心。 -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
</body>
</html>
CSS之浮动元素的更多相关文章
- css让浮动元素水平居中
对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...
- CSS围住浮动元素的三种方法
浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...
- 用CSS 实现 浮动元素的 水平居中
问题描述: 基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span& ...
- HTML。CSS浮动元素详解
浮动定位是指 1.1将元素排除在普通流之外,即元素将脱离标准文档流 1.2元素将不在页面占用空间 1.3将浮动元素放置在包含框的左边或者右边 1.4浮动元素依旧位于包含框之内 2. 浮动的框可以向左或 ...
- CSS浮动元素的水平居中
方法一: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...
- css清浮动与动态计算元素宽度
css常用清浮动写法 /*清除浮动*/| .clears:after{ display: block; content: ''; clear: both; height: ; visibility: ...
- 转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位
块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽 ...
随机推荐
- msp430入门编程06
msp430中C语言的程序结构06 msp430中C语言的函数及实现07 msp430中C语言操作端口I/O10 msp430中C语言的模块化头文件及实现11 msp430中C语言的模块化头文件及库文 ...
- 动态替换logback FileAppender/RollingFileAppender 配置- Programmatically configure logback FileAppender/RollingBackAppender
一.本文实际解决的问题 如何在代码中修改logback的RollingFileAppender配置(本文代码实例为修改日志文件路径) 二.针对的场景: 本文解决的问题属于一个大需求的一部分,需求为:需 ...
- Ubuntu 16.04安装Memcached（单机）
Ubuntu 16.04安装Memcached,不过不仅限与Ubuntu,可以用CentOS等去安装,只不过测试时使用的是Ubuntu机器.Windows下不建议使用,本机调试可以使用,线上环境除了W ...
- searchIndexer.exe占用过高CPU
1.searchIndexer.exe占用过高CPU很可能是Windows的索引损坏造成的. 这时候只要进入控制面板—索引选项—高级—重建即可解决 2. net stop "windows ...
- 微信小程序 wafer2框架摘要
微信小程序 wafer2框架摘要 帮助文档:https://github.com/tencentyun/wafer2-startup/wiki 使用了knex.js进行数据库交互,使用了koa.js进 ...
- Windows Update 的工具
Windows Update MiniTool 是一款管理 Windows Update 的工具,可以取得微軟 Windows 修補程式更新包,Windows Update 是我們用來升級系統的元件, ...
- Java之旅hibernate（2）——文件夹结构
Hibernate的jar最好是到官网上进行下载.下载最新的稳定的版本号.之后进行解压,以下我们介绍一下hibernate的包结构. 1. 包结构 我们能够看到包文件夹结构发生了变化.我以5 ...
- VB.NET+三层 机房收费系统之组合查询
关系组合查询已经用去了4天的时间.每天都在痛苦中煎熬,绞尽脑汁,一句代码都要瞪大眼睛看好长时间,有时候.由于两句话颠倒了.就nothing了:有时候,由于table如何可以转换成实体类型.将自己困住了 ...
- URAL 题目1553. Caves and Tunnels（Link Cut Tree 改动点权，求两点之间最大）
1553. Caves and Tunnels Time limit: 3.0 second Memory limit: 64 MB After landing on Mars surface, sc ...
- 华为OJ2011-最长公共子串
一.题目描述 描述: 计算两个字符串的最大公共子串(Longest Common Substring)的长度,字符区分大小写. 输入: 输入两个字符串 输出: 输出一个整数 样例输入: asdfas ...