前端布局进阶

前言

文档流：没有其他布局则是符合文档流规则的
float：none，left，right
position：static，relative，absolute，fixed

float

简介

开启了float（非none）后，标签立即脱离文档流，会尽量想页面的左上或者右上漂浮，知道遇到父标签的边框或其他浮动标签
如果浮动标签上面是一个没有浮动的块元素，则浮动标签不会超过块元素
浮动的标签不会超过它上面的兄弟标签
浮动的标签不会盖住文字，文字会自动环绕在浮动标签的周围
当元素设置浮动之后，会脱离文档流，高度和宽度都被内容撑开
内联元素脱离文档流以后会变成块元素

none

默认为none，不脱离文档流，没有任何效果

left

向左浮动，脱离文档流

right

向右浮动，脱离文档流

position

static

默认为static，不脱离文档流，没有任何效果

inherit

继承父标签的position属性

relative

基于元素原来的位置产生了偏移，元素原来的位置还保留着，不脱离文档流
开启了标签的相对定位后，而不设置偏移量，元素不会发生任何变化
相对定位会使标签提升一个层级
相对定位不会改变标签的性质，块元素还是块元素，内联元素还是内联元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
 #div1{
	width:200px;
    height:200px;
	border:2px red solid;
	position:relative;
    left:100px;
    top:50px;
}
</style>
</head>
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
</body>
</html>

absolute

基于离它最近的开启position（非static）的祖先标签位置偏移，脱离文档流，删除原来位置的标签
如果所有祖先标签都没有开启position（非static），则基于body标签的位置偏移，脱离文档流，删除原来位置的标签
绝对定位会使元素提升一个层级
内联元素会变成块元素，块元素的宽度和高度默认会被内容撑开

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
 #box1{
    width:200px;
    height:200px;
    position:relative;       
}
 #box2{
 	position:absolute;
	top:20px;
	left:30px;      
}
</style>
</head>
<body>
<div id="box1">
	<div id="box2">相对参照元素进行定位</div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
 #div1{
	width:200px;
    height:200px;
	border:2px red solid;
	position:absolute;
    left:100px;
    top:50px;
}
</style>
</head>
<body>
	<div id="div1"></div>
	<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
	<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
	<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
	<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
	<div>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
</body>
</html>

fixed

永远基于浏览器窗口偏移，脱离文档流，删除原来位置的标签
特性和局对定位差不多，固定定位也是一种绝对定位

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#gd{
width:500px;
height:500px;
background:red;
position:fixed;
}
#jd{
width:300px;
height:300px;
background:blue;
position:absolute;
left:400px;
top:1000px;
}
</style>
</head>
<body>
<div id="jd">
我是绝对定位
</div>
<div id="gd">
我是固定定位
</div>
</body>
</html>

wsx_iot

发布了102 篇原创文章 · 获赞 31 · 访问量 15万+

私信关注

前言

float

简介

none

left

right

position

static

inherit

relative

absolute

fixed

猜你喜欢