前端学习之CSS（04）布局
程序员文章站
2024-01-28 18:40:58
...
CSS布局与定位
- 概述
- 内容
- 盒子模型
页面元素的大小
边框
与其他元素的距离 - 定位机制
文档流
浮动定位
层定位
盒子模型
- 注：页面上的区域、图片、导航、段落，都可以是盒子，占据着一定的空间。
盒子模型组成
- content内容
- height高度
- width宽度
- border边框
- padding内边距：边框和内容之间的空白距离。
- margin外边距：两个边框之间的距离。
图例： - 一个盒子的实际宽度、高度 = content+padding+border+margin
- 案例：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#box{
width:100px;
height: 100px;
padding: 20px;
border: 1.5px solid;
margin: 10px;
}
</style>
</head>
<body>
<div id="box">
内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容
</div>
</body>
</html>
效果：
overflow属性
- 取值：
-
hidden：超出部分不可见 -
scroll：显示滚动条 -
auto：如果有超出部分的话，显示滚动条。 - 案例：
border属性
-
border-width：px、thin（细）、medium（中）、thick（粗） -
border-style：dashed（横虚线）、dotted（点虚线）、solid（实线）、double（双实线） -
border-color：颜色 border：width style color- 案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width:100px;
height: 50px;
border-top: double red;
border-bottom: medium solid blue;
border-left: thick dashed yellow;
border-right: thick dotted green;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
内容内容内容
内容内容内容
</div>
</body>
</html>
效果：
padding和margin
- 对浏览器默认的设置清零
*{
padding: 0;
margin: 0;
}
- 取值：px，%（相对于外层盒子的宽度和高度）
| 内边距 | 外边距 | 方向 |
|---|---|---|
| padding: 5px; | margin: 10%; | 上右下左 |
| padding-top: 5px; | margin-top: 10%; | 上 |
| padding-right: 5px; | margin-right: 10%; | 右 |
| padding-bottom: 5px; | margin-bottom: 10%; | 下 |
| padding-left: 5px; | margin-left: 10%; | 左 |
-
top和bottom，right和left默认相等，如下
-
margin: 1px;（margin: 1px 1px 1px 1px;） -
margin: 1px 2px;（margin: 1px 2px 1px 2px;） -
margin: 1px 2px 3px;（margin: 1px 2px 3px 2px） -
margin的合并：垂直方向合并，水平方向不合并。
水平居中
- 图片文字水平居中：
text-align: center; - div水平居中：
margin: # auto;（左侧和右侧取值设为auto，浏览器根据外层区域的宽度以及当前div区域的宽度自动将div区域水平居中）
案例
- 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#imglist{
text-align: center;
font-size: 5px;/*增加图片间文字间隙*/
}
#imglist img{
height: 100px;
width: 100px;
margin: 5px auto;
border: 2px dotted gray;
padding: 5px;
}
</style>
</head>
<body>
<div id="imglist">
<img src="image/huoying.jpg" >
<img src="image/huoying.jpg" >
<img src="image/huoying.jpg" >
</div>
</body>
</html>
- 效果：
声明：CSS定位将在下一篇博客中学习。
上一篇： git的基本使用方法
下一篇： Oracle 修改实例名 SID