【Web前端笔记05】CSS盒子模型01

最新推荐文章于 2024-02-20 14:27:01 发布

Ａsix_ren

最新推荐文章于 2024-02-20 14:27:01 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/qq_30281065/article/details/94566969

版权

1.关于盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。并且，每个矩形都由元素的内容（content），内边距（padding），边框（border）和外边距（margin）组成。

关于盒子模型，我们先引入一段代码，方便理解

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--设置字符集-->
<link rel="stylesheet" type="text/css" href="text/css"><!--这里添加外部引用的css样式-->
    <title>盒子模型</title>
    <style>
    .box{
     width: 200px;  /*盒子模型宽度*/
     height: 100px;  /*盒子模型高度*/
     border: 5px solid red; /*盒子模型边框厚度和边框颜色*/
     background: #ccc; /*盒子模型背景*/
     margin: 10px; /*盒子模型外边距*/
     padding: 5px;  /*盒子模型内边距*/
    
    }
    </style>
</head>
<body>
    <p class="box" align="center">初始化的盒子模型</p>
</body>
</html>

实现效果为

2.< div >标记

< div>标记可以简单理解为，是一个区块容器，作用是将网页分割为独立的，不同的部分，以实现网页的规划和布局。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><!--设置字符集-->
<link rel="stylesheet" type="text/css" href="text/css"><!--这里添加外部引用的css样式-->
    <title>div</title>
    <style>
    .one{
     width: 200px;
     height: 100px;
     border: 5px solid red;
     background: #ccc;
     margin: 10px;
     padding: 5px; 
     text-align: center;
     color: aqua;
     font-size: 15px;
     font-family: 'Courier New', Courier, monospace;
    
    }
    .two{
        width: 150px;
        height: 100px;
        background: #cbc;
        text-align: center;
        color:brown;
        font-size: 15px;
        text-indent:2em;
    }
    </style>
</head>

<body>
    <div class="one">
        第一段文字
    </div>
    <div class="two">
        第二段文字
    </div>
</body>
</html>

实现效果为

3.边框属性

在CSS中边框属性包括边框样式属性（border-style），边框高度属性（border-height）和边框颜色属性（border-color），单侧边框属性，边框综合属性。

其中。常用的边框属性有：border-top（上边框属性）
border-bottom（下边框属性）
border：四边宽度，四边样式，四边颜色。

用于定义边框样式的有：

none：没有边框
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

Ａsix_ren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web前端笔记05】CSS盒子模型01

1.关于盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。并且，每个矩形都由元素的内容（content），内边距（padding），边框（border）和外边距（margin）组成。关于盒子模型，我们先引入一段代码，方便理解在这里插入代码片...
复制链接

扫一扫