CSS布局与定位——盒子模型

最新推荐文章于 2023-07-11 12:44:49 发布

大菠萝学长

最新推荐文章于 2023-07-11 12:44:49 发布

阅读量270

点赞数 4

分类专栏： CSS 前端文章标签： html 前端 css vscode

本文链接：https://blog.csdn.net/zhxzrd/article/details/124300548

版权

前端同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的盒子模型，包括内容区、内边距、边框和外边距的计算方式，并通过实例展示了如何设置border、padding和margin属性。同时，讨论了overflow属性在内容溢出时的处理策略，以及如何在边框中插入图片。此外，还提供了对浏览器默认样式清零的方法。

摘要由CSDN通过智能技术生成

盒子模型

总讲

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。网页页面上的区域、图片、导航、列表、段落等都可以是盒子。

一个盒子的实际宽度、高度:content+padding+border+margin。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">  
#box{
width:200px;  
height:350px;  
border:1px solid;  
padding:20px;  
margin:10px;
}
</style>
</head>
<body>
    <div id="box">
    123456
    </div>
    </body>
    </html>

实现效果

样式属性概述

border属性

border-width(px)：thin、medium、thick

border-color：blue、green、yellow......

border-style：dashed、dotted、solid、double

padding和margin属性

一般用px和%表示

内边距：padding、padding-top、padding-right、padding-bottom、padding-left。

外边距：margin、margin-top、margin-right、margin-bottom、margin-left。

给属性赋值时需注意：

以margin为例

margin:1px;→margin:1px 1px 1px 1px;

margin:1px 3px;→margin:1px 3px 1px 3px;

margin:1px 2px 3px;→margin:1px 2px 3px 2px;

margin:1px 2px 1px 3px;（这里上下边距均为1px，但是不能缩写）

margin属性赋值顺序为：上右下左

对浏览器默认的设置清零：

* {

margin: 0;

padding: 0;

}

overflow属性

当内容溢出盒子框时，overflow属性取值。

overflow:hidden→超出部分不可见

overflow:scroll→显示滚动条

overflow:auto→如果有超出部分，显示滚动条

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
div
  {
    width:100px;  
    height:100px;  
    border:2px solid;  
    padding:20px;  
    margin:10px;
    overflow:hidden;
  }
</style>
</head>
<body>
<div id="boxoverflow">boxoverflow&nbsp;boxoverflow</div>
</body>
</html>

实现效果

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
div
  {
    width:100px;  
    height:100px;  
    border:2px solid;  
    padding:20px;  
    margin:10px;
    overflow:scroll;
  }
</style>
</head>
<body>
<div id="boxoverflow">boxoverflow&nbsp;boxoverflow</div>
</body>
</html>

实现效果

边框中插入图片

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css"> 
#imgcss{
text-align: center;
font-size: 0; /*使图间没有空隙*/
}
#imgcss img{
height: 200px;
width: 200px;  
margin: left 5px;
border: 1px solid rgb(143, 158, 11);  
padding: 5px;
}
</style>
</head>
<body>
    <div id="imgcss">
        <img src = "boluo.png" />
        <img src = "boluo.png" />
    </div>   
</body>
</html>

实现效果

大菠萝学长

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS布局与定位——盒子模型

目录盒子模型总讲样式属性概述border属性padding和margin属性overflow属性边框中插入图片盒子模型总讲页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。网页页面上的区域、图片、导航、列表、段落等都可以是盒子。一个盒子的实际宽度、高度:content+padding+border+margin。<!DOCTYPE html><html&gt...
复制链接

扫一扫

专栏目录