盒子模型、浮动属性及定位属性

THER1881

已于 2022-04-22 16:34:03 修改

阅读量1.7k

点赞数 3

文章标签： css3

于 2022-04-22 16:33:38 首次发布

本文链接：https://blog.csdn.net/thwr1881/article/details/124301501

版权

本文详细介绍了CSS3中的盒子模型，包括内容区域、边框、内边距和外边距，并展示了如何使用border、padding和margin属性。此外，还探讨了CSS3的新特性，如阴影效果、渐变和定位属性，以及如何通过z-index解决元素重叠问题。同时，文章还讲解了HTML元素类型转换和页面布局设计的基本概念。

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

1、什么是盒子模型

进行网页布局的重要属性，一个页面由可以由多个盒子组成。

盒子的组成：内容区域+边框(border)+内边距（padding）+外边距(margin)

2、div标签

div标签是块级标签，在没有设置高度、宽度时，和文本标签p功能类似，也可以自动换行。但和p标签不同的是，div标签可以作为容器包含其他标签，而p标签则不能作为容器使用。

3、盒子模型的属性：用盒子作为页面的布局时会用到的属性

3.1、border边框属性

边框属性	作用
border	边框基本属性
boder-style	边框样式
boder-color	边框颜色
border-width	边框宽度
border-collapse	边框合并
border-radius	边框弧度
border-方向设置某一边的边框

代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
   
        width: 300px;
        border: solid 1px black;
        font-size: 30px;
        border-radius: 25px;
    }
</style>
<body>
    <div>
        Manchester
    </div>
</body>
</html>

border在使用是可以用boder：宽度边框样式边框宽度这样简写的的方式来同时设置。

效果展示
在这里插入图片描述

3.2、padding内边距（内填充）属性

内边距属性	作用
padding：10px;	指padding所有方向内边距加10px
padding：7px 10px；	指padding上下内边距加10px，左右加7px
padding： 7px 9px 10px 11px；	指padding上下左右内边距分别为7px、9px 10px、11px
padding-方向	设置某一边的内边距

代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
   
        width: 300px;
        font-size: 30px;
        border: solid 1px black;
        border-radius: 25px;
        padding-left:100px;
    }
</style>
<body>
    <div>
        Manchester
    </div>
</body>
</html>

padding可在不设置任何方向时，则上下左右四个方向内边距一致，如需要单独设置某个方向的内边距则使用padding-方向，例如：padding-left：10px；表示左内边距为10px。

效果展示
在这里插入图片描述

3.3、margin外边界属性

margin是一个盒子的外边距，也是一个盒子和另一个盒子之间的区域。margin控制的是元素外部空出的空间。而相反，上面提到的padding 则是控制内部空出的空间。

margin和padding设置类似，但相比较于边框和内边距最大的不同是，它可以使一个盒子居中，只需要将margin值设为auto即可，但在设置margin：auto时必须设置盒子的宽度，否则将无效。
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
   
        width: 300px;
        font-size: 30px;
        border: solid 1px black;
        border-radius: 25px;
        padding-left:100px;
        margin: auto;
    }
</style>
<body>
    <div>
        Manchester
    </div>
</body>
</html>

效果展示
在这里插入图片描述

3.4、背景设置

背景设置	作用
background-color	背景颜色
background-image	背景图像
background-position	背景图像的位置(图像左上角的坐标)。取值可以是数值、预设值、百分比
background	综合背景设置：背景色 url(“图像”) 平铺定位固定;

background-repeat背景平铺属性

背景平铺	作用
repeat	沿着水平和垂直两个方向平铺（默认值）
no-repeat	不平铺（图像出现在左上角，只平铺一次）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #d1{
   
        width: 200px;
        height: 200px;
        background-color: black
    }
    #d2{
   
        width: 200px;
        height: 200px;
        background-image: url(./avatar.png);
        border: solid 1px black;
    }
    #d3{
   
        width: 200px;
        height: 200px

最低0.47元/天解锁文章

THER1881

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
盒子模型、浮动属性及定位属性

1、什么是盒子模型进行网页布局的重要属性，一个页面由可以由多个盒子组成。盒子的组成：内容区域+边框(border)+内边距（padding）+外边距(margin)2、div标签div标签是块级标签，在没有设置高度、宽度时，和文本标签p功能类似，也可以自动换行。但和p标签不同的是，div标签可以作为容器包含其他标签，而p标签则不能作为容器使用。3、盒子模型的属性：用盒子作为页面的布局时会用到的属性3.1、border边框属性边框属性作用border边框基本属性bod
复制链接

扫一扫