1、盒子布局
元素框的总宽度 = 元素(element)的width + padding + margin +border;
元素框的总高度 = 元素(element)的height + padding +margin +border。
CSS中的宽(width)=内容(content)的宽
CSS中的高(height)=内容(content)的高
CSS中的宽(width)=内容(content)的宽+(border+padding)
CSS中的高(height)=内容(content)的高+(border+padding)
2、 元素分类
块级元素:display属性取block、table、flex、grid和list-item的元素。
行内级元素:display属性取inline的元素。
行内块级元素:display属性取inline-block、inline-table、inline-flex和inline-grid的元素 .
3、浮动布局
浮动,顾名思义就是指像素上下左右移动,其周围的元素也会重新排列,大多用于图像。
float: left | right | none | inherit
消除浮动 clear属性,其值为left | right | both。
<style>
.main{
width: 600px;
height: 600px;
border: 1px solid black;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 200px;
left: 200px;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
clear: left;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
clear: none;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">arknight1</div>
<div class="box2">arknight2</div>
<div class="box3">arknight3</div>
</div>
</body>
4、定位布局
1相对定位
1.元素根据其在当前文档流所在位置作为参考系,进行偏移。
2.设置相对定位之后原来元素在文档流中的位置会被空出来,不会被其他元素所占据。
2绝对定位
1.元素会将其带有position为非static的祖先元素作为参考系进行偏移。
2.如果祖先元素里没有带有position为非static的,则会以body作为参考系。
3.定位后,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。
<style>
.flex-contain{
height: 500px;
width: 500px;
border: 1px solid black;
background-color: aqua;
display: inline-flex;
justify-content: space-around;
align-items: center;
align-content: left;
/* flex-direction: column-reverse; */
}
.flex-item{
height: 100px;
width: 100px;
background-color: azure;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">ark1</div>
<div class="flex-item">ark2</div>
<div class="flex-item">ark3</div>
</div>
</body>