牛腩新闻发布系统：CSS-盒子模型+标准流及相关概念

最新推荐文章于 2022-03-24 17:19:13 发布

Marshall Ren

最新推荐文章于 2022-03-24 17:19:13 发布

阅读量245

点赞数 1

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/Marshallren/article/details/91503289

版权

ASP.NET 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

前言：昨天写了有关CSS的选择器，今天来简单梳理一下盒子模型和标准流的概念以及使用吧。

盒子模型： CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，由内容（content）、内边距（padding）、边框（border）和外边距（margin）构成。每个HTML标记都可以看作是一个盒子模型。

标准流：CSS中标签的排列方式（文本从上向下、从左向右排列）就被称为标准流，也叫正常流。

比如，当我们用块级元素排列文本时：

CSS代码：

.dropdown-menu {
    color: #00f;                    /*字体蓝色*/
    background-color: #eeeeee;      /*背景颜色浅灰色*/
    border: 1px solid #0ff;         /*边框样式设定*/
    padding-top: 3px;               /*字体与框上边界间距5个像素的距离*/
    padding-left: 10px;
    padding-bottom: 20px;
    margin: 5px;                    /*框与上边界间距5个像素的距离*/
    width: 150px;                   /*框的宽度*/
    height: 60px;                   /*框的高度*/
    line-height: 60px;              /*文本垂直居中*/
}

HTML页代码：

<body>
    <div class="dropdown-menu">栏目四</div>
    <div class="dropdown-menu">栏目五</div>
    <div class="dropdown-menu">栏目六</div>
</body>

这时HTML内文本的排列就遵循标准流。

浮动：使HTML某段文本脱离标准流，语法为float

例子：

CSS代码（增加了float：left代码）

.dropdown-menu {
    color: #00f;                    
    background-color: #eeeeee;    
    border: 1px solid #0ff;         
    padding-top: 3px;              
    padding-left: 10px;
    padding-bottom: 20px;
    margin: 5px;                    
    width: 150px;                
    height: 60px;                  
    line-height: 60px;              
    float:left;                /*盒子向左浮动，此时已经脱离标准流*/
}

HTML页代码：

<body>
    <div class="dropdown-menu">栏目四</div>
    <div class="dropdown-menu">栏目五</div>
    <div class="dropdown-menu">栏目六</div>
</body>

此时盒子的排序按从左往右排列，而非之前的从上向下。

绝对定位与相对定位：绝对定位使HTML中某段文本脱离标准流，相对定位不会。

CSS代码：

.ddd1{
    position:relative;          /*相对定位，不脱离标准流*/
    top:80px;
    left:30px;
}

.ddd2 {
    position: absolute;         /*绝对定位，脱离标准流*/
    top: 80px;
    left:30px;
}

1.相对定位例子：

HTML页代码：

<body>
    <div class="dropdown-menu">栏目四</div>
    <div class="dropdown-menu ddd1">栏目五</div>
    <div class="dropdown-menu">栏目六</div>
</body>

2.绝对定位例子：

HTML页代码：

<body>
    <div class="dropdown-menu">栏目四</div>
    <div class="dropdown-menu ddd2">栏目五</div>
    <div class="dropdown-menu">栏目六</div>
</body>

可以看到，相对定位中排序还是遵循“栏目四”到“栏目五”再到“栏目六”的，因为ddd1中的top、left是以上一块文本“栏目四”的位置为参照进行计算的，因此空出了位置；而绝对定位中，ddd2中的top、left是以绝对位置坐标进行计算的，因此“栏目五”空出的位置是以窗体的上边框和左边框进行计算的，并非像相对定位中那样和“栏目四”拉开距离，有兴趣的同学可以用像素测量工具计算一下。

以上就是自己的总结，有不对的地方也请大家多多指教！

Marshall Ren

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
牛腩新闻发布系统：CSS-盒子模型+标准流及相关概念

前言：昨天写了有关CSS的选择器，今天来简单梳理一下盒子模型和标准流的概念以及使用吧。盒子模型： CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，由内容（content）、内边距（padding）、边框（border）和外边距（margin）构成。每个HTML标记都可以看作是一个盒子模型。标准流：CSS中标签的排列方式（文本从上向下、从左向右排列）就...
复制链接

扫一扫