html前端学习六： 浮动 定位

于 2019-12-23 09:50:43 发布
阅读量392 收藏
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/myt2000/article/details/103660489
版权

浮动 定位

浮动

进入企业后有一个REST.CSS 用于设置默认的外边距和内边距
用于reset css网站
网址：https://meyerweb.com/eric/tools/css/reset/

float

只能往左边或者右边浮动
样式元素
不能居中的

   <style type="text/css">
    	* {
    		margin:0;
    		padding:0;
    	}
    	.box1{
    		width:150px;
    		height: 150px;
    		background: skyblue;

    	}
    	.box2{
    		width:200px;
    		height: 200px;
    		background: pink;
    		/*float:right;*/
    		float:left;
    	}
    	.box3{
    		width:250px;
    		height: 250px;
    		background: green;
    	}

*表示所有元素使用
这个一般都会对所有元素有个重置要素

页面元素


 <h1>today is a good day</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

如果两个元素都float,会产生元素碰撞都在同一层
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCW5taxA-1577065832324)(http://img2.ph.126.net/ejfMR8LyUbotWMYIXAneeg==/6632504827400387489.png)]

分列布局

将div盒子分成3列 框在同一个盒子下面，进行浮动，对像素进行计算

<title>两列布局</title>
    <style type="text/css">
    	* {
    		margin:0;
    		padding:0;
    	}
    	.left {
    		width:530px;
    		height: 1200px;
    		background: skyblue;
    		border:1px solid #e5e5e5;
    		float:left;
    	}
    	.right{
    		width:250px;
    		height:1200px;
    		background: pink;
    		border:1px solid #e5e5e5;
    		float:left  ;
    		margin-left: 18px;
    	}
    	.box{
    		width:1000px;
    		margin:0 auto;

    	}
    	.middle{
    		width:180px;
    		height: 1200px;
    		background: green;
    		float:left;
    		margin-left: 18px;
    	}
    </style>
    
    
    
<body>
	<div class="box">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
    </div>
</body>

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

浮动异常现象

父盒子内的子盒子浮动，会出现文字占于子盒子旁边的位置

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

</head>

<body>
    <div class="box">
    	<div class="box1"></div>
    	朝鲜民主主义人民共和国（朝鲜语：조선민주주의인민공화국， 英语：Democratic People's Republic of Korea，缩写：DPRK），简称朝鲜、北朝鲜、北韩。是位于东亚朝鲜半岛北部的社会主义国家，执政党是朝鲜劳动党。南部与韩国以三八线朝韩非军事区分隔，北部与中华人民共和国和俄罗斯接壤，西临渤海，与山东半岛隔海相望，东临日本海。首都平壤。
    </div>

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

添加float:left;变化后：

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

清除浮动

样式属性clear
none： 允许两边都可以有浮动对象
both： 不允许有浮动对象
left： 不允许左边有浮动对象
right： 不允许右边有浮动对象

    <style type="text/css">
    	* {
    		margin:0;
    		padding:0;
    	}
    	.box{
    		width:600px;
    		border:10px solid red;
    	}
    	.box1{
    		width:200px;
    		height:200px;
    		background: skyblue;
    		float:left;
    	}
    	.box2{
    		width:200px;
    		height:200px;
    		background: pink;
    		float:right;
    	}
    	.clear {
    		clear:both;

    	}
    	.box3{
    		width:500px;
    		height: 500px;
    		background: yellow;
    	}
    </style>
</head>

<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    	<div class="clear"></div>
	    </div>

	    <div class="box3"></div>
</body>

没有加clear的情况下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUqwOeBx-1577065832327)(http://img1.ph.126.net/L3WIu-b5HuCSyEUOHdMd1Q==/6632487235214357929.png)]
清除浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KybL1mxM-1577065832330)(http://img0.ph.126.net/aaaEvhwz2-RsAVvFgmH-sA==/2596606660175596119.png)]

另外一种清除方式
overflow:hidden ;
overflow:auto;

visible： 对溢出内容不做处理，内容可能会超出容器。
hidden： 隐藏溢出容器的内容且不出现滚动条。
scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

定位

定位特性：

  1. 相对定位（relative）
  2. 绝对定位（absolute） top right bottom left
  3. 固定定位（fix）
  4. 无定位（static） 默认的
相对定位特点：
  1. 相对于自身所在位置参考进行移动
  2. 移动之后还占据我们原来的空间
  3. 启用相对定位之后，必然存在4个属性top right bottom left
绝对定位特点
  1. 它是以定位的父集作为参考的，父集没有定位不做参考，向父亲跟上一级做定位参考，直到选择浏览器定位（祖辈除了static元素之外）
  2. 不占据任何空间

父级定位

	.absolute_box1{
    		width:150px;
    		height:150px;
    		background: green;
    		position: absolute;
    		right:0;
    		bottom:0;
    	}
    	.box{
    		width:500px;
    		height:500px;
    		background: #e5e5e5;
    		margin: 0 auto;
    		margin-top: 50px;
    		position: relative;
    	}
    	.box-parent{
    		width:600px;
    		height:600px;
    		background: orange;
    		overflow: hidden;
    		position: relative;
    	}



      <div class="box-parent">
       	 <div class="box">
       		<div class="absolute_box1"></div>
       	</div>
       </div>

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

父级的父级定位：

    	.absolute_box1{
    		width:150px;
    		height:150px;
    		background: green;
    		position: absolute;
    		right:0;
    		bottom:0;
    	}
    	.box{
    		width:500px;
    		height:500px;
    		background: #e5e5e5;
    		margin: 0 auto;
    		margin-top: 50px;
    		/*position: relative;*/
    	}
    	.box-parent{
    		width:600px;
    		height:600px;
    		background: orange;
    		overflow: hidden;
    		position: relative;
    	}
    	
    	      <div class="box-parent">
       	 <div class="box">
       		<div class="absolute_box1"></div>
       	</div>
       </div>

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

固定定位

固定定位的特点：

  1. 不占据任何空间
  2. 参考浏览器进行定位的
    	.box-fixed{
    		width: 200px;
    		height: 400px;
    		background: blue;
    		position: fixed;
    	
    		top:50%;
    		margin-top: -240px;
    	}
    	.box-fixed-left{
    		left:0;
    	}
    	.box-fixed-right{
 
    		right:0;
 
    	}
    	.box-fixed-middle{
    		margin-left:44%;
    	}


<div class="box-fixed box-fixed-left"></div>
		<div class="box-fixed box-fixed-right"></div>
		<div class="box-fixed box-fixed-middle"></div>

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

让下面的盒子到最上面来

.box-parent{
    		width:600px;
    		height:800px;
    		background: orange;
    		overflow: hidden;
    		position: relative;
    		z-index: 1;
    	}

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

z-index数值越大，越优先显示，只能用于定位元素；如果是同数值，由代码最后一个决定；允许为负数
z-index:number;

margin:允许负数
padding:允许负数

总结

浮动用于布局
定位用于移动元素
定位大于元素调整

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值