HTML之CSS定位、浮动、盒子模型
定位
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv{
width: 500px;
height: 300px;
background-color: lightblue;
border: 1px solid green;
margin: 0 auto;
}
.innerDiv{
width: 100px;
height: 100px;
background-color: lightcoral;
border: 1px solid red;
margin: 10px;
/* display: inline; block 默认 表示块元素 ; inline 行内元素 */
}
/*
position:
static 默认值
fixed 相对定位 相对于浏览器窗口
relative 相对定位 相对于自己原来的位置，元素原本位置不会被其他元素占用
absolute 绝对定位
left跟right是一对，top跟bottom是一对，用时只用一对中的某一个
left
right
top
bottom
*/
.d1{
position: relative;
top: 100px;
right: 100px;
}
</style>
</head>
<body>
<div class="outDiv">
<div class="innerDiv d1">
div1
</div>
<div class="innerDiv d2">
div2
</div>
<div class="innerDiv d3">
div3
</div>
</div>
</body>
</html>
浮动
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv{
width: 500px;
height: 300px;
background-color: lightblue;
border: 1px solid green;
margin: 0 auto;
}
.innerDiv{
width: 100px;
height: 100px;
background-color: lightcoral;
border: 1px solid red;
margin: 10px;
/* display: inline; block 默认 表示块元素 ; inline 行内元素 */
/* float: left; */
}
/* 浮动设置的初衷 就是为了不隐藏文字 */
/* 当d1设置左浮动，而其他两个没设置浮动时，d1会盖住下面飘上来的div模块，但是不会盖住其中的文字，文字会被挤到div模块下面 */
.d1{
float: right;
}
</style>
</head>
<body>
<div class="outDiv">
<div class="innerDiv d1">
div1
</div>
<div class="innerDiv d2">
div2
</div>
<div class="innerDiv d3">
div3
</div>
</div>
</body>
</html>
盒子模型
html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv{
width: 500px;
height: 300px;
background-color: lightblue;
border: 1px solid green;
margin: 0px auto;
}
.innerDiv{
width: 100px;
height: 100px;
background-color: lightcoral;
border: 1px solid red;
margin: 10px; /* 外边距 四方位 */
/* display: inline; block 默认 表示块元素 ; inline 行内元素 */
float: left;
}
/*
width:100px; height:100px; div中设置width和height 表示元素div的容量是100*100
border:1px; 表示边线，边线不侵占容量； 设置边线之后 div元素的实际占用高度为：容量 100 + 边线（上下） 1*2 = 102
边距：即元素留白
margin:10px; 表示外边距，外边距不侵占容量； 设置外边距之后 div元素的实际占用高度为：容量 100 + 边线（上下） 1*2 + 外边距（上下） 10*2 = 122
写法：margin: 10px; margin:10px 20px;（上下 左右） margin:10px 20px 30px 40px;(从上边距开始顺时针转) margin-top:10px; margin-right:20px; margin-bottom:30px; margin-left:40px;
padding:10px; 表示内边距，内边距不侵占容量;也是会是原本的元素变大，可以通过设置box-sizing:border-box使元素本身不变；
写法：padding: 10px; padding:10px 20px;（上下 左右） padding:10px 20px 30px 40px;(从上边距开始顺时针转) padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
*/
.d1{
/* float: right; */
padding: 20px; /* 内边距 四方位 或者padding-top 等... ...*/
box-sizing: border-box; /* 设置盒子模型为border-box，设置之后，padding不会增加元素的实际占用高度 */
margin-right: 20px;
}
</style>
</head>
<body>
<div class="outDiv">
<div class="innerDiv d1">
div1
</div>
<div class="innerDiv d2">
div2
</div>
<div class="innerDiv d3">
div3
</div>
</div>
</body>
</html>