CSS布局模型全面了解
1. 盒模型
盒模型是CSS布局的基础,它指的是在页面中的每个HTML元素都被看做一个矩形的盒子,并分为几个部分:
- content:元素的正文内容
- padding:内边距
- border:边框
- margin:外边距
div {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
上述代码展示了如何使用CSS设置矩形盒子的大小、边框、内边距和外边距。
2. 定位
CSS提供了3种主要的定位方式:相对定位、绝对定位和固定定位。
相对定位
相对定位是指元素相对于其初始位置定位。相对定位不会影响其他元素的布局。
div {
position: relative;
left: 50px;
top: 50px;
}
绝对定位
绝对定位是指元素相对于其父元素定位。绝对定位会影响其他相邻元素的位置,当一个元素被设置为绝对定位时,它将脱离文档流并且不再占据任何空间。
.parent {
position: relative;
}
.child {
position: absolute;
right: 0;
bottom: 0;
}
上述代码表示了一个父元素和一个子元素,子元素的位置相对于父元素的右下角定位。
固定定位
固定定位是指元素相对于浏览器窗口的位置进行定位。固定定位的元素也不再占据文档流,且对象的位置固定不变,无论滚动条的滚动情况。
div {
position: fixed;
top: 0;
left: 0;
}
上述代码展示了如何使用CSS设置一个固定在屏幕左上角的元素。
3. 浮动
浮动是指元素脱离了文档流,并且可以左右移动。它广泛地应用于实现多栏布局,但也需要小心使用,以免影响其他元素的位置。
.left{
float: left;
width: 50%;
}
.right{
float: right;
width: 50%;
}
上述代码展示了如何实现一个左右两栏布局,左侧占50%,右侧占50%。
示例一:经典的圣杯布局
经典的圣杯布局包括一个固定的中间栏和两个浮动的侧栏,已经成为了CSS布局的经典案例。
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
padding-left: 200px;
padding-right: 200px;
}
.center {
float: left;
width: 100%;
}
.left {
float: left;
width: 200px;
position: relative;
left: -200px;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
position: relative;
right: -200px;
margin-left: -200px;
}
上述代码展示了如何创建一个圣杯布局,并设置中间、左侧和右侧三个部分的样式。
示例二:响应式设计的媒体查询
响应式设计使用CSS媒体查询可以使我们的网页自适应不同尺寸的设备屏幕。例如,我们可以使用媒体查询根据设备不同的宽度设置不同的CSS样式。
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
body {
background-color: lightgreen;
}
}
@media only screen and (min-width: 1025px) {
body {
background-color: lightpink;
}
}
上述代码展示了如何设置不同宽度的设备使用不同背景颜色的CSS样式。大屏幕设备将使用粉色的背景颜色,小屏幕设备将使用蓝色背景颜色,中等屏幕设备将使用绿色背景颜色。
以上是CSS布局模型全面了解的完整攻略,包含了盒模型、定位和浮动3个方面的详细讲解以及两个示例说明。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css布局模型全面了解 - Python技术站