【HTML＋CSS网页设计与布局 从入门到精通】第14章-float/position/display属性
2024-04-30 12:38:57
目录
float属性
float：left
float：left-例2
float：left-例3
float:right;
对比father p{clear:right;}
例1
例2
.father .clear{...}
position属性
div position
例1
例2
position:absolute;
例1
例2：position:absolute
display：inline/block/none
float属性
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{
/* 这里设置son1的浮动方式*/}.son2{
/* 这里设置son1的浮动方式*/}.son3{
/* 这里设置son1的浮动方式*/}</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div>
</body>
</html>
float：left
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{
/* 这里设置son1的浮动方式*/
float:left;
}.son2{
/* 这里设置son1的浮动方式*/}.son3{
/* 这里设置son1的浮动方式*/}</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div>
</body>
</html>
float：left-例2
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{
/* 这里设置son1的浮动方式*/
float:left;
}.son2{
/* 这里设置son1的浮动方式*/
float:left;
}.son3{
/* 这里设置son1的浮动方式*/}</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div>
</body>
</html>
float：left-例3
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{
/* 这里设置son1的浮动方式*/
float:left;
}.son2{
/* 这里设置son1的浮动方式*/
float:left;
}.son3{
/* 这里设置son1的浮动方式*/
float:left;
}</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div>
</body>
</html>
float:right;
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}.son2{
/* 这里设置son1的浮动方式*/
float:left;
}.son3{
/* 这里设置son1的浮动方式*/
float:right;
}
对比father p{clear:right;}
例1
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{
/* 这里设置son1的浮动方式*/
float:left;
}.son3{
/* 这里设置son3 的浮动方式*/
float:left;
}.son2 {
/* 这里设置son2 的浮动方式*/
float:right;
}</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div>
</body>
</html>
例2
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;clear:right;}.son1{
/* 这里设置son1的浮动方式*/
float:left;
}.son3{
/* 这里设置son3 的浮动方式*/
float:right;
}.son2 {
/* 这里设置son2 的浮动方式*/
float:left;
}</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3<br/>Box-3<br/>Box-3<br/>Box-3<br/></div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div>
</body>
</html>
.father .clear{...}
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>float属性</title>
<style type="text/css">
body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px; }.father div{padding:10px; margin:15px; border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;clear:right;}.son1{
float:left;
/* 这里设置son1的浮动方式*/}.son2{
/* 这里设置son1的浮动方式*/float:left;
}.son3{
/* 这里设置son1的浮动方式*/
float:right;
}.father .clear{
margin:0;
padding:0;
border:0;
clear:both; }</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3<br />Box-3<br />Box-3<br />Box-3</div><div class="clear"></div></div>
</body>
</html>
position属性
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position属性</title>
<style type="text/css">
body{margin:20px;font :Arial 12px;
}
#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;
}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;
}
</style>
</head>
<body><div id="father"><div id="block1">Box-1</div></div>
</body>
</html>
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>position属性</title>
<style type="text/css">
body{margin:20px;font :Arial 12px;
}
#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;
}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative; /* relative相对定位 */left:30px;top:30px;
}
</style>
</head>
<body><div id="father"><div id="block1">Box-1</div></div>
</body>
</html>
div position
例1
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<title>position属性</title>
<style type="text/css">
<!--
body{margin:20px;font-family:Arial;font-size:12px;
}
#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;
}
#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}#block1{
}#block2{
}
-->
</style>
</head>
<body><div id="father"><div id="block1">Box-1</div><div id="block2">Box-2</div></div>
</body>
</html>
例2
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<title>position属性</title>
<style type="text/css">
<!--
body{margin:20px;font-family:Arial;font-size:12px;
}
#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;
}
#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}#block1{
position:relative;
bottom:30px;
right:30px;
}#block2{
position:relative;
top:30px;
left:30px;
}
-->
</style>
</head>
<body><div id="father"><div id="block1">Box-1</div><div id="block2">Box-2</div></div>
</body>
</html>
position:absolute;
例1
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absolute属性</title>
<style type="text/css">
body{margin:20px;font-family:Arial;font-size:12px;
}
#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;
}
#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}
#block2{
}
</style>
</head>
<body><div id="father"><div >Box-1</div><div id="block2">Box-2</div><div >Box-3</div></div>
</body>
</html>
例2：position:absolute
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>absolute属性</title>
<style type="text/css">
body{margin:20px;font-family:Arial;font-size:12px;
}
#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;position:relative;
}
#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}
#block2{
position:absolute;
top:0px;
right:0px;
}
</style>
</head>
<body><div id="father"><div >Box-1</div><div id="block2">Box-2</div><div >Box-3</div></div>
</body>
</html>
display：inline/block/none
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>display属性</title>
</head>
<body><div style="display:inline">Box-1</div><div style="display:inline">Box-2</div><div style="display:inline">Box-3</div><span style="display:block">Box-4</span><span style="display:block">Box-5</span><span style="display:block">Box-6</span><div style="display:none">Box-7</div><span style="display:none">Box-8</span>
</body>
</html>
【HTML＋CSS网页设计与布局 从入门到精通】第14章-float/position/display属性相关推荐
- 【HTML＋CSS网页设计与布局 从入门到精通】第4章
目录 超链接 h1,h2,h3... 图片超链接 邮件超链接 图像热区超链接 图像热区超链接-自己作图 图像热区超链接-多热区 插入一个框架-frame(将一个html文件当做一个frame) 插入一 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第11章-CSS
目录 图像class选择器 设置图片每个边框的格式:颜色,线型 另一个例子 图文混排 图片左对齐,居中,右对齐 竖直对齐 竖直对齐:具体数值-负数 八大行星:图文混排 图像class选择器 <h ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
目录 块元素背景,边框,颜色等布局 块元素ID选择器 另一个例子 块元素中的图片 盒子模型的演示 块级元素中的文本格式 块级元素div与内联元素span的对比 两个行内元素的margin 两个块级元素 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第10章-CSS
目录 开始 新增设置 英文字母全部小写 字号设置 首字母"大"写-大一点显示 上划线,下划线text-decoration:underline overline; 缩进text-i ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第9章-选择器
目录 标记选择器+类别选择器 并集选择器+集体声明 后代(嵌套)选择器 继承关系演示 前沿Web开发教室 继承关系演示-选择器1 继承关系演示-选择器2 还可以写成这样批量的整 或者 再或者 or 层 ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第15章-表格格式：边距/居中/边框/折叠
目录 初始表格 边距.居中.边框 单元格边距cellspacing 边距折叠(两个叠加不会变粗)border-collapse:collapse; 单元格边距border-spacing 初始表格 & ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第12章-CSS
目录 开始 背景+颜色 将图片当做背景background-image:url(bg-h.gif); x方向(横向)重复显示图片: y方向(纵向) 不重复显示图片background-repeat:n ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第8章-CSS
目录 无格式 图文并茂 标题h1格式 图片img格式 正文p格式 body格式 ID选择器的优先级低于标记选择器 无格式 <html> <head> <title> ...
- 【HTML＋CSS网页设计与布局 从入门到精通】第7章-class、ID选择器，CSS格式
目录 class选择器 class选择器-例外 class选择器-同时使用两种class ID选择器不支持两种同时使用 正文字体格式 正文字体格式-另一种"宏"的使用方式 使用CS ...
最新文章
- iPhone 利用CG API画一个饼图(Pie chart)
- 通过双向证书认证使用 gSOAP 访问 web services
- 【转载】目前为止看到描述VSCode编写C++配置文件最清楚的一篇文章
- java 隐藏文件_java-如何仅列出jtree中的非隐藏文件和非系...
- 电信服务器维修人员职责,维修人员岗位职责
- 英特尔助力完善AI人才培养，携手微软共促地球可持续发展
- PyTips 0x14 - Python 描述符
- matlab fft变换后的相位精度问题_MATLAB曲线拟合及Fourier分析
- window10 修改jdk版本，从jdk10降到jdk1.8，java -version版本没有变化的问题解决
- js批量删除微博教程
- MATLAB-alphaShape三维使用
- 分享几个免费IP地址查询接口(API)
- python之Srcapy框架浅谈
- 嵌入式实验 之 DMA控制器实验
- excel数据可视化
- iOS开发 触觉体验(UIFeedbackGenerator)的使用
- mac 解压rar文件
- 开博2012在情人节！
- ASCII 控制码说明
- linux命令进入bios设置,linux系统肿么进入bios
热门文章
- （备忘）卸载微软自带输入法
- Eclipse的vim插件viPlugin的安装
- [转载]C#操作符??和?:
- HEAP: Free Heap block xxxxxxxx modified at xxxxxxxx after it was freed
- Android开发问题集锦-Button初始为disable状态时自定义的selector不生效问题
- Java、JavaScript和JScript
- python求平面坐标最接近的点_从Python中的集合中有效地找到最接近的坐标对
- pb程序怎么发布到iis_怎么使用抖音小程序第三方平台系统开发制作发布抖音小程序+教程...
- linux socket read 接受缓存为空_Linux直接IO、缓存IO、阻塞与同步？
- 验证码识别算法_用Python机器学习搞定验证码