CSS基础知识二+练习题（盒子模型）

@动感superman

已于 2024-10-13 15:44:08 修改

阅读量638

点赞数 23

文章标签： css 前端 html

于 2024-10-12 11:09:50 首次发布

本文链接：https://blog.csdn.net/2301_80208072/article/details/142868023

版权

1.盒子模型介绍

1.1 盒子的概念

在CSS视角下，所有HTML元素可以看作盒子。所谓的盒子在HTML中就是一个盛装元素内容的容器。

1.2 盒子模型

盒子由内容区（content）,内边距（padding）,边框（border）,外边距（margin）组成，这就是盒子模型。

1.3 盒子属性

属性：width 和 height 属性是默认设置是盒子内容区域的大小。

常见取值：数字+px

注意:块级元素可直接通过CSS设置宽高，但行内元素默认情况下不可以，行内元素设置宽高需在CSS代码中添加 display:block;

3.边框（border）

3.1 边框（border）- 独立写法

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted、圆角边框border-radius
边框颜色	border-color	颜色取值

3.2 边框（border）- 简写

属性名：border

如：border: 边框的粗细边框的样式边框的颜色;（三个条件之间加空格）

例： border : 10px solid red;

4.内边距(padding)

4.1 内边距（padding）-取值

作用：设置边框与内容区域之间的距离

作用	属性名
上内边距	padding-top:
下内边距	padding-bottom
右内边距	padding-right
左内边距	padding-left

取值：从上开始赋值，然后顺时针赋值。如：

示例	作用
padding: 10px;	上右下左都为10px
padding: 10px 20px;	上下为10px、左右为20px
padding: 10px 20px 30px;	上为10px、左右为20px、下为30px
padding: 10px 20px 30px 40px;	上为10px、右为20px、下为30px、左为40px

5.外边距（margin）

作用：设置边框以外，盒子与盒子之间的距离。

作用	属性名
上外边距	margin-top
下外边距	margin-bottom
右外边距	margin-right
左外边距	margin-lett

注意: 外边距始终是透明的(不受背景填充颜色影响)。

6.盒子模型练习

做出以下效果图：

参考代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        #img1{

            width: 200;
            height:200px ;
            background-color: antiquewhite;
            border-width: 10;
            border-color: rgb(0, 209, 251);
            border-style: dashed;
            border-radius: 10px;
            border: 10px rgba(0, 167, 218, 0.6)  solid;
            padding: 20px;
            margin:50px ;
           margin-top: 50;
           margin-left:17;}        


        #ins1{
            width: 200;
            height: 20px;
            background-color: beige;
            display: block;
            margin: 50px;
            margin-bottom: 50;
            margin-left:17;}
    </style>

</head>
<body>

     <img src="1.jpg"  id="img1">

    <ins id="ins1" >我是下划线文本：行内元素</ins>

</body>
</html>