html前端学习七：浮动 定位的详细示例

最新推荐文章于 2024-06-19 19:16:24 发布
最新推荐文章于 2024-06-19 19:16:24 发布
阅读量947 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myt2000/article/details/103660508
版权

浮动定位细节讲解

示例一

盒子的特点（div） ：

  1. 自适应的宽度，默认占据一行，固定宽度没有margin-left,没有宽度自适应的盒子是可以使用右边距
  2. 默认高度为0时，没有设定高度的时候，可以由子元素撑起来
  3. 浮动和定位（absolute、fixed）使用之后元素变为块

元素类型

  1. 块元素：

    1. 前后元素会被换行，允许设置宽高度

  2. 内联元素：

    1. 在一行的元素，不允许设置宽高度
    2. 不允许设置垂直方向外边距，只能设置水平方向的外边距

  3. 内联块：

    1. 内联元素的块，但是拥有了块的特质，除了占据一行（允许设置宽高度）

display样式

block 块级元素
inline 内联元素
inline-block 内联块
none 隐藏元素 不代表任何类型

text-align

可以调整文字、内联元素、内联块居中

文字居中示例

.text-inlineblock{
    		display:inline-block;
    		width:200px;
    		height:50px;
    		background: pink;
    		margin-top:100px;
    		text-align: center;
    	}

<b class="text-inlineblock">this is inline-block</b>

元素居中,需要在外面加个盒子

.text-box{
    text-align:center;
}


<div class="text-box">
<b class="text-inlineblock">this is inline-block</b>
</div>

示例二

vertical-align

特点：
用于改变文字基线
baseline： 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub： 把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super： 把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top： 把当前盒的top和父级的内容区的top对齐
text-bottom： 把当前盒的bottom和父级的内容区的bottom对齐
middle： 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top： 把当前盒的top与行盒的top对齐
bottom： 把当前盒的bottom与行盒的bottom对齐

<style type="text/css">
    	.img-box{
    		background: pink;
    	}
    </style>
    
    <div class="img-box">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516083124296&di=04374b6832d9103c9afea2966d870937&imgtype=0&src=http%3A%2F%2Fpic29.photophoto.cn%2F20131204%2F0034034499213463_b.jpg" alt="" height="105" width="156" />
    	<span>baseline span test</span>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRkbz9vJ-1577065892532)(http://img2.ph.126.net/MPuV5ywO5FX6iYJtxNJsXQ==/1035827914315027703.png)]

添加样式 基线消失

    	.img-box img{
			vertical-align: middle;
    	}

top
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UB445iHx-1577065892533)(http://img1.ph.126.net/PYnawkHutFC41DMFaA2E9A==/3083276894908339510.png)]

middle
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6OUBR4B-1577065892534)(http://img1.ph.126.net/Yvwo42uldI0C9jOx7tESgQ==/3079336245234383785.png)]

bottom

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uzIGBxMQ-1577065892535)(http://img0.ph.126.net/Iwy4sNS4tMdTfn22Eh27Lw==/6632748918979192350.png)]

谁的基线高，调整谁的基线

overflow样式

visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 超出容器部分内容隐藏
scroll： 无论超不超出都有滚动条
auto： 超出部分有滚动条，没超出没有滚动条

示例代码：

<style type="text/css">
		* {
			margin:0;
			padding:0;
		}
		.box{
			width:300px;
			height: 150px;
			background: pink;
			overflow: hidden;
		}

	</style>
	
	    <div class="box">
    	玳瑁（学名：Eretmochelys imbricata）属爬行纲，海龟科的海洋动物。一般长约0.6米，大者可达1.6米。头顶有两对前额鳞，吻部侧扁，上颚前端钩曲呈鹰嘴状；前额鳞2对；背甲盾片呈覆瓦状排列；背面的角质板覆瓦状排列，表面光滑，具褐色和淡黄色相间的花纹。四肢呈鳍足状。前肢具2爪。尾短小，通常不露出甲外
    </div>

hidden效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EaTOrQzI-1577065892536)(http://img0.ph.126.net/pZvdy48QXf9cdEG7-G5jKA==/1036109389291738758.png)]

auto效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E8IZ8ZPT-1577065892537)(http://img1.ph.126.net/ZVIalHMLNyScLjE45FcRQw==/1284370318750528936.png)]

scroll效果：把盒子高度改大点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B6Qm1Gzn-1577065892538)(http://img2.ph.126.net/-KLfEi4dfVl6LBrEA3RSAw==/2594636335338632966.png)]

opacity透明样式

opacity:0-1

transparent:完全透明 只能用在颜色上面

filter透明样式

filter: alpha(opacity=50);
0-100 100是不透明
支持IE9以下的情况

RGBA

background-color: rgba(0,0,0,0.7) 透明30%；
只能作用于颜色color属性

.bg{
			width:500px;
			height: 200px;
			background: pink;
			/*opacity: 0.5;*/
			/*filter: alpha(opacity=50);*/
			background-color: rgba(0,0,0,0.5)
		}
		
		
		<div class="bg">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516097186069&di=8bfda8e71286b842474ebdb66c50f8c5&imgtype=0&src=http%3A%2F%2Fwww.chaojupai.com%2Fwp-content%2Fuploads%2F2014%2F11%2Fshenghuojia3.jpg" alt="" width="318" height="199">
    </div>

效果展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qu0Xh94w-1577065892538)(http://img1.ph.126.net/r42zDy8PNPHdM_dTL50GbQ==/6632731326793149301.png)]

CSS3新特性

first-child
last-child
nth-child(n) n表示要选择的第几个元素

    	div:first-child{
    		width: 150px;
            height: 150px;
            background: green;
    	}
    	div:last-child {
                width: 150px;
                height: 150px;
                background: red;
            }
        div:nth-child(2){
        	width:300px;
        	height: 150px;
        	background: blue;
        }
        
        <body>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
    
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IkiVFH3h-1577065892540)(http://img2.ph.126.net/M5Crz26S8MZz3CPsA2WR-Q==/6632564201028293222.png)]

这种div:first-child 第一个元素必须是div 否则样式将丢失
last-child后面不能加/

not

p适应样式并排除p1 p2

	.box1 p:not(.p1):not(.p2){
			width:150px;
			height: 150px;
			background: pink;
    	}
    	
    	
    	<div class="box1">
    	<p class="p1">111</p>
    	<p class="p2">222</p>
    	<p class="p3">333</p>
    	<p class="p4">444</p>
    </div>
     <div class="box1">
    	<p class="p">111</p>
    	<p class="p2">222</p>
    	<p class="p3">333</p>
    	<p class="p4">444</p>
    </div>

示例2：使用最后一个div,但不适用第一个元素
如果只保留box2,是不会应用这个内容的

	<div class="box1">
		<div class="box2">222</div>

	</div>

hover样式

鼠标一定上去，元素发生样式变化

样式写法：

   .p-box{
        	width:150px;
        	height: 150px;
        	background: skyblue;
        }
        .p-box:hover{
        	background: black;
        }
        
        
         <div class="box1">
    	<p class="p1">111</p>
    	<p class="p2">222</p>
    	<p class="p3">333</p>
    	<p class="p4">444</p>
    </div>
     <div class="box1">
    	<p class="p">111</p>
    	<p class="p2">222</p>
    	<p class="p3">333</p>
    	<p class="p4">444</p>
    </div>

导航栏的写法

   <ul class="list">
    	<li><a href="#">秒杀</a></li>
    	<li><a href="#">优惠券</a></li>
    	<li><a href="#">闪购</a></li>
    	<li><a href="#">拍卖</a></li>
    </ul>
    
    #样式：
    
    		li {
			list-style: none;    #去除圆点
		}
		.list li{
			float:left;
			height:60px;
		}
		.list li a{
			padding: 6px 10px;
			color:#fff;
			font-size:22px;
			text-decoration: none;
			background: #f10180;
		}
		.list li a:hover{
			color:skyblue;
			background: #bd1067;
		}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09PpMJQz-1577065892541)(http://img2.ph.126.net/nSQu5lz_-3wJGBkcuvOCmA==/6632671953165256778.png)]

input元素的属性大全

属性值描述
placeholdtext规定帮助用户填写输入字段的提示。
readonlyreadonly规定输入字段为只读。
maxlengthnumber规定输入字段中的字符的最大长度。
<input type="text" placeholder="请输入内容" value="学习写代码的艰难困苦" maxlength="10">

border-radius 画圆

border-radius: 75px 75px 75px 75px;

等价于：

border-top-left-radius: 75px;
border-bottom-right-radius: 75px;
border-top-right-radius: 75px;
border-bottom-left-radius: 75px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnWcH3bP-1577065892543)(http://img1.ph.126.net/cJu1E9Sg-aMkdz7aj6raYw==/1034139064454764939.png)]

页面布局

clear用于两个框，让浮动的下来，父级盒子框住所有子盒子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title>layout</title>
    <style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	.header{
    		height: 80px;
    		background: green;
    	}
    	.main{
    		height: 2000px;
    	}
    	.footer{
    		height: 120px;
    		background: orange;
    	}
    	.header-nav{
    		width: 1000px;
    		height: 80px;
    		margin-left: auto;
    		margin-right: auto;
    		background: red;
    	}
    	.left{
    		width: 730px;
			height: 2000px;
			background: blue;
			float: left ;
    	}
    	.right{
    		width: 250px;
    		height: 2000px;
    		background: pink;
    		float: right;
    	}
    	.main-wrap{
    		width: 1000px;
    		margin-left: auto;
    		margin-right: auto;
    	}
		.clear{
			clear: both;
		}
		.footer-wrap{
			width: 1000px;
			height: 120px;
			margin-left: auto;
			margin-right: auto;
			background: yellow;
		}
    </style>
</head>

<body>
    <div class="header">
    	<div class="header-nav"></div>
    </div>
    <div class="main">
    	<div class="main-wrap">
    	<div class="left"></div>
    	<div class="right"></div>
    	<div class="clear"></div>
    	</div>
    </div>
    <div class="footer">
    	<div class="footer-wrap"></div>
    </div>
    
    <div class=""></div>
</body>
myt2000
关注
专栏目录
html css 浮动与定位案例 （python）
weixin_54450346的博客
10-22 326
html css 浮动与定位案例 （python）
前端学习笔记（HTML&CSS）（07）浮动和定位
weixin_44263871的博客
05-09 259
前端学习笔记（HTML&CSS）（07） 浮动（float) 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 浮动的特点： 浮动元素会完全脱离文档流，不再占据文档流中的位置 设置浮动以后元素会向父元素的左侧或右侧移动， 浮动元素默认不会从父元素中移出 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移 浮动元素不会超过
html浮动定位例子,html+css|元素的浮动与定位
weixin_30785057的博客
06-10 1132
1.浮动属性float清除浮动clearoverflow属性visible:内容不会被修剪，会呈现在元素框之外hidden:溢出内容会被修剪，并且被修建的内容是不可见的auto:在需要时产生滚动条，即自适应所要显示的内容scroll:溢出内容会被修剪，且浏览器会始终显示滚动条2.定位属性positionstatic:静态定位relative:相对定位absolute:绝对定位fixed:固定定位例...
HTML--CSS浮动与定位篇
最新发布
wmy030921的博客
06-19 1234
HTML--CSS浮动与定位篇
HTML——浮动布局案例
piduocheng0577的博客
03-16 1264
案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除所有标签默认的编剧 */ *{ margin: 0; padding: 0; } ...
HTML+CSS自适应浮动例子
12-03
兼容IE6,下面的都是废话，是为了达到20个才写的，所以你不要在往下面看下去了，不喜欢写太多说明性文字，直接看代码就是了
html中浮动和定位（练习+知识点）
weixin_54107527的博客
04-14 2893
目录 定位 1、什么是脱离文档流 2、position定位 2.1 static定位 2.2 relative定位 2.3 absolute定位 2.4 fixed定位 2.5 sticky定位（存在兼容性问题） 层级属性z-index 浮动 定义： 取值： 作用： 特性： 浮动练习 定位 1、什么是脱离文档流 文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流 元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流...
HTML基础学习——浮动和定位
qq_44980451的博客
06-22 609
学习、基础、巩固
2023 前端开发 HTML CSS 宝典：浮动和定位特性探索
# 1. HTML 和 CSS 基础回顾 HTML 和 CSS 是前端开发中至关重要的两个技术，下面我们来回顾它们...下面是一个简单的 HTML 结构示例： ```html <!DOCTYPE html> <html> 我的网页 欢迎来到我的网站 这是一个段落。
前端开发基础：HTML+CSS
04-06
### 前端开发基础：HTML+CSS #### 前言 前端开发是指通过HTML、CSS、JavaScript等技术创建用户界面的...随着技术的不断进步，HTML5与CSS3提供了更多的特性和功能，建议继续深入学习，以便更好地掌握前端开发技能。
前端——浮动与定位
qq_50628631的博客
05-04 851
目录 浮动 1.浮动定义和语法 2.浮动特性 3.清除浮动 4.清除浮动示例 定位 1.定位组成 1.定位模式 2.边偏移 2.固定定位常用技巧 3.定位示例 4.定位拓展 浮动 1.浮动定义和语法 定义：在一个模块上添加浮动会使模块脱离文档流，也就是在不再占用文档的位置。添加浮动也会使一个行内元素变成块元素。 语法： 选择器{ float:属性值； } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 ri..
HTML浮动与定位
01-19
HTML浮动与定位
001-定位案例.html
12-12
001-定位案例.html
html/css中float浮动的用法实例详解
11-21
一、float基础用法示例 1、我们先建两个div盒子，设置高度、宽度和背景颜色； 最开始两个盒子在网页上的位置如下：  然后我们将红色盒子浮动到右边  然后我们会发现红色盒子浮动到了右边，但是蓝色盒子就直接上移到了原先红色盒子的位置。 然后我们将蓝色盒子也浮动到右边看看效果： 我们会发现它会紧跟着红色盒子排列，而不会受块级元素影响独占一行。 二、浮动定位的基本规则 1、当元素的float属性取值为left或right时，元素属于浮动定位; 2、若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动； 3、浮动盒子的顶边不得高于上一个盒子
HTML 布局 浮动 位置移动 和 边框盒子模型例子
06-24
HTML 布局 浮动 位置移动 和 边框盒子模型例子 通过这些文件例子的使用你基本可以了解布局的一些相关只是，通过例子自己尝试做出自己的页面
demo-html-css：超好看的前端模板（学习用）
02-03
学习CSS还包括理解盒模型、定位（static, relative, absolute, fixed）、浮动、Flexbox和Grid布局。 3. **响应式设计**：由于设备屏幕大小和方向的多样性，前端开发人员必须创建适应不同屏幕的网页。媒体查询...
Web前端篇：css浮动
ITmiaomiao666的博客
06-13 715
浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。 文字环绕现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平方向外边距</title> <s...
定位html案例
JackieDYH的博客
02-15 472
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>宽带</title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ b...
html 绝对定位案例,css定位案例探讨（position属性详解）
weixin_32246721的博客
06-07 214
简述定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助position详解在css中，通过position属性，配合top,right,left,buttom对元素进行定位position属性有：static，relative，absolute，fixed四种，下面分别探讨默认定位staticDocument.container {width: 400px;height...
div+css基础布局：浮动与定位实战
在HTML和CSS的div+css布局中，实现简单样式的应用是前端开发的基础。本文将介绍几个关键的概念和示例，帮助理解如何利用div元素和CSS属性创建灵活的网页布局。 1. **左右自适应布局**： CSS中的浮动（float）属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值