2021.3.26、3.30web前端开发课程笔记CSS布局和定位*盒子模型

最新推荐文章于 2024-09-15 21:53:51 发布

小张喝奶茶了吗

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量159

点赞数 1

分类专栏： web前端开发文章标签： css html

本文链接：https://blog.csdn.net/ITzz_qqzi/article/details/115233783

版权

web前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

4.CSS布局和定位

最外层定义一个container或者wrapper
分割为：1.页眉header 2.导航条navbar 3.主体内容main
主体内容分为{ 左侧menu，中间content，右侧sidebar }

盒子模型（元素什么样）
页面元素的大小
边框
与其他元素的距离
（页面上每个元素都可以看做盒子，占据一定页面空间）

一、盒子模型组成：
content内容、height高度、width宽度、border边框、padding内边距、margin外边距
（分为四个方向属性：margin-top、margin-bottom、margin-left、margin-right【诸如此类】）

一个盒子的实际高度/宽度=content+padding+border+margin

<body>
    <div id="box">
        内容内容内容内容
    </div>
</body>

<html>
<head>
<style type="text/css">
#box{
width:100px;
height:100px;
border:1px solid;
padding:20px;
margin:10px;
}
</style>
</head>

overflow属性
(当内容溢出盒子框时，overflow属性取值)
1.hidden 超出部分不可见
2.scroll 显示滚动条
3.auto 如果有超出部分，显示滚动条

border属性（hr）
1.border-width：px、thin、medium、thick
2.border-style：dashed、dotted、solid、double
3.border-color：颜色
4.border：width style color
5.border-bottom（top、left、right）

padding属性
对浏览器默认的设置清零

* {
margin: 0;
padding: 0;
}

取值:px，%(外层盒子的宽度和高度)
padding：5px；
padding-top ：10% ；
padding-left
padding-right
padding-bottom

margin：5px；
margin-top ：10% ；（外层盒子高度的10%）
margin-left
margin-right
margin-bottom

margin属性（上右下左）（顺时针）（依次省略）
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:1px 2px 1px 3px; （虽然上下边距都为1px，
但是这里不能缩写）
*垂直方向合并，水平方向不合并

图片、文字水平居中：text-align:center;
div水平居中：margin:0 auto;（上下随意定义，左右浏览器自动计算）

实例

<div id="newsimglist">
<img src = "images/crisis.jpg" />
<img src = "images/crisis.jpg" />
<img src = "images/crisis.jpg" />
</div>

#newsimglist{
text-align:center;
font-size:0; /*否则图间有空隙*/
}
#newsimglist img{
height:100px;
width:100px;
margin-left:5px;
border:1px solid #0cf;
padding:5px;
}