CSS核心内容之盒子模型

最新推荐文章于 2024-06-22 17:15:40 发布
最新推荐文章于 2024-06-22 17:15:40 发布
阅读量91 收藏
点赞数
原文链接：http://www.cnblogs.com/renpingsheng/p/7300030.html
版权

1.盒子模型具有的属性：

内容(content)
填充(padding)
边框(border)
边界(margin)

图示如下:

1133627-20170807165759143-1313630023.png

2.流概念

1.流的概念

在现实生活中已经流水，在网页设计中就是指元素(标签）的排列方式，默认情况下，向网页的左上角流动

2.标准流的概念

元素在网页中就像流水，排在前面的元素(标签)内容在前面出现，排在后面的元素(标签）内容在后面出现

3.非标准流的概念

当某个元素(标签)脱离了标准(比如因为相对定位)排列，就称为非标准流．

3.实例代码一：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div-box{
            width:200px;
            height:200px;
            background-color:pink;
            /*指定边框的像素*/
            border:15px solid red;
            /*表示该div与其父元素的上边距的大小*/
            margin-top:40px;
            /*表示该div到浏览器左边界的距离*/
            margin-left:60px;
            /*表示该div中的元素距离边框的距离*/
            padding:5px;
        }
    </style>
</head>
<body>
<div id="div-box">hello world</div>
</body>
</html>

效果：

1133627-20170807165810799-879156972.png

4.实例代码二：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            width:300px;
            height:180px;
            border:1px solid blue;
        }
        #div-box{
            width:280px;
            height:160px;
            border:1px solid red;
            margin:  10px 0 0 10px;
        }
        #div-box img{
            width:140px;
            height:100px;
            border:1px solid black;
            margin:10px 0 0 10px;

        }
    </style>
</head>
<body>
<div id="div-box">
    <img src="a.jpg">
</div>
</body>
</html>

效果如下：

1133627-20170807165822487-939005951.png

5.实例代码三：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;/*指定主页面距离父标签的距离*/
            padding:0;
        }
        #div-box{
            width:800px;/*指定灰色边框的宽度*/
            height:500px;/*指定灰色边框匠高度*/
            border:1px solid grey;/*定义边框为1px的实线灰色边框*/
            margin:20px 0 0 20px;/*定义灰色边框距离上个标签20px的距离，距离浏览器边界20px*/
        }
        .img_list{
            list-style:none;/*图像列表无样式*/
            background-color:pink;
        }
        .img_list img{
            width:125px;/*定义每个图像的宽度为125px*/
            height:85px;/*定义每个图像的高度训85px*/
            margin:10px 0 0 20px;/*定义每个图像距离红色边框上边10px,左边20px*/
        }
        .img_list li{
            float:left;/*使用左浮动*/
            border:1px solid red;/*定义每个图像的边框为１px的实线红色边框*/
            width:165px;/*定义每个边框的宽度为165px*/
            height:125px;/*定义每个边框的高度为125px*/
            margin:10px 0 0 10px;/*定义红色边框距离上个标签和左边的标签的距离各为10px*/
        }
        .img_list a{
            display:block;/*把字体转换为块元素*/
            margin-left:60px;/*超链接的字体距离红色边框左边距离为80px*/
            margin-top:-3px;/*超链接的字体距离红色边框下边距离为-3px*/
        }
        .img_list a:hover{
            color:red;/*鼠标悬浮上超链接时，字体变成红色*/
            text-decoration:underline;/*鼠标悬浮上超链接时，字体加下划线*/
        }
    </style>
</head>
<body>
<div id="div-box">
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
    </ul>
</div>
</body>
</html>

效果如下：

1133627-20170807165842768-913545764.png

6.实例代码四：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1000px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:960px;
            height:250px;
            border:2px solid white;
            margin:30px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:200px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:250px;
            height:180px;
            margin:15px 0 0 55px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:80px;
            margin-top:4px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">优酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
    </ul>
    </div>
    <div class="div1">
        <span class="l_cont">优酷牛人</span>
        <ul class="img_list">
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
            <li><img src="a.jpg"><span><a href="#">爱心月</a></span></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下：

1133627-20170807165859268-1874432137.png

7.实例代码五：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div-box{
            width:1100px;
            height:800px;
            border:1px solid darkgray;
            margin:30px;
        }
        .div1{
            width:1060px;
            height:750px;
            border:2px solid white;
            margin:20px;
        }
        .l_cont{
            display:block;
            margin-top:20px;
            margin-left:35px;
        }
        .img_list{
            list-style:none;
            background-color:pink;
        }
        .img_list img{
            width:195px;
            height:130px;
            border:3px solid white;
            margin-top:0;
            margin-left:0;
        }
        .img_list li{
            float:left;
            border:2px solid white;
            width:200px;
            height:250px;
            margin:15px 0 0 40px;
        }
        .img_list a{
            display:block;
            text-decoration:none;
            margin-left:10px;
            margin-top:4px;
        }
        .con1{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
        .con2{
            display:block;
            text-decoration:none;
            margin-top:4px;
            margin-left:10px;
        }
    </style>
</head>
<body>
<div id="div-box">
    <div class="div1">
    <span class="l_cont">优酷牛人</span>
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
        <li><img src="a.jpg"><span><a href="#">行内元素浮动后会变成块元素块元素</a>
            </span><p class="con1">用户:21856</p><p class="con2">发布:1天前</p></li>
    </ul>
</div>
</body>
</html>

效果如下：

1133627-20170807165914940-2119210225.png

转载于:https://www.cnblogs.com/renpingsheng/p/7300030.html

weixin_30750335
关注
使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面
BYGFJ的博客
03-05 360
第 1 步：创建基本结构 我已经使用我自己的 HTML 和 CSS 代码创建了这个图片库的基本结构。这里我用background-color: # 2a2932 和 min-height: 100vh。 HTML <section class="gallery"> <div class="container"> </div> </section> CSS .gallery{ width: 100%; display: bl
CSS篇十六——盒子模型之边框
Regina_Cai的博客
11-16 3885
* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。边框有三部分组成：边框宽度、边框样式以及边框颜色。/* border-width 边框的粗细，一般情况下都用 px *//* 利用层叠性，上述写法可以实现但过于麻烦 *//* border-color 边框颜色 *//* 边框的复合写法 简写： *//* 注意 不能颠倒顺序 *//* 合并相邻的边框 */
SCSS基本操作
weixin_46221319的博客
03-10 2265
​相关介绍 一、CSS预处理器出现的原因 无法嵌套书写导致代码繁重、冗杂、逻辑混乱。 没有变量和样式复用机制，属性值只能以字面量的形式重复输出。 # 总结：代码复用性低；不易于维护 # 注：现在，现在的CSS是可以定义变量的！！！ :root{ --red: #f3e1e1; } 二、出名的CSS预处理器介绍 1. SCSS/SASS SASS (.scss)。于2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目.
9.6日学习笔记
weixin_30797027的博客
09-06 81
盒模型 从内到外：content < padding < border < margin border(边框) 同时设置四条边： border-width:2px; /* 边框宽度 */ border-style:solid; /*solid(单实线),double(双实线),dashed(虚线),dotted(点线)*/ border-col...
【css】纯 css 制作带三角（border篇）
dengrongshou5105的博客
03-20 188
以前写过一篇纯CSS制作带三角的边框，那篇文章是用HTML特殊字符来制作三角的，今天介绍下，如何用 border 来制作三角。 html 代码如下： <div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-left">...
css盒子模型
2301_80840100的博客
06-22 3369
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS核心概念之盒子模型
zhoumouren88的博客
07-25 130
盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub——CSS核心概念。 当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子。所有 HTML 元素可以看作盒子，在 CSS 中，Box Model 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，每个盒子由四个部分（或称区域）组成：内容（Content），内边距（Paddi...
CSS基本知识之盒子模型
道阻且长，行则将至。
01-07 531
CSS基本知识之盒子模型 首先要知道什么是盒子模型？ 所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容 1. 盒子模型 看透网页的本质： 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容. 网页布局的核心本质： 就是利用 CSS 摆盒子。 2、盒子模型（Box M
css的核心内容 标准流、盒子模型、浮动、定位等分析
09-25
理解CSS的核心概念，包括标准流、盒子模型、浮动和定位，对于创建响应式、美观且功能完备的网页至关重要。 **1. 标准流** 标准流，又称正常流或文档流，是指HTML元素按照它们在源代码中的顺序，自上而下、从左到右...
css盒子模型详解加示例
09-25
1. 内容区域（content）：这是盒子模型的核心部分，包含实际的文本、图像或其他网页内容。设置内容区域的宽度和高度使用CSS属性`width`和`height`。 2. 内填充（padding）：内容区域与边框之间的空隙，用于增加元素...
CSS 理解盒子模型
09-25
CSS盒模型是网页布局的基础，它是CSS样式中用于描述元素占据空间的方式。理解盒模型对于任何想要精通网页设计的人来说都是至关重要的。盒模型定义了元素的总尺寸，包括内容(content)、内边距(padding)、边框(border)...
2009-2023年上市公司企业客户ESG数据-最新出炉.zip
11-01
2009-2023年上市公司企业客户ESG数据-最新出炉.zip
++i和i++d的区别.docx
11-01
i和i ++i和i++的区别
本文以竞赛心态的调整为开端，以常数时间优化为基础，以数学分析与猜想为指导思想，. 以非完美算法为主要策略，以搜索为最后的万能策略
最新发布
11-01
本文以竞赛心态的调整为开端，以常数时间优化为基础，以数学分析与猜想为指导思想，. 以非完美算法为主要策略，以搜索为最后的万能策略
电调测试程序 https://blog.csdn.net/weixin-45902229/article/details/121
11-01
电调测试程序 https://blog.csdn.net/weixin-45902229/article/details/121
percona-xtrabackup-2.4.28-1.ky10.x86-64.rpm
11-01
xtrabackup银河麒麟v10rpm安装包
Pluto+: 开源SDR设备的使用指南及调制解调教程
11-01
内容概要：本文档为 Pluto+ 用户使用手册，详细介绍 Pluto+ 设备的软硬件特性及其在不同操作系统 (Windows 和 Ubuntu) 下的驱动安装和配置步骤。文档不仅涵盖了常见的 SDR 功能演示，如接收信号、调制解调、发送音频信号等，还特别针对 AM、FM、ASK、BPSK 和 QPSK 调制方式进行详细的实例教学，适用于初学者和有一定经验的研发人员。文中提供大量操作步骤、命令示例和图形化界面指导。 适合人群：具有初步软件定义无线电（SDR）基础知识的研发人员，特别是对 ADALM-PLUTO 系列产品的使用者。 使用场景及目标：通过详细的步骤讲解，帮助用户掌握 Pluto+ 在不同环境下的配置与使用方法，提升用户的动手能力和实际操作技能。应用场景包括但不限于 SDR 教育培训、个人兴趣研究和技术项目开发。 其他说明：本文档提供了丰富的实战案例和理论解释，有助于读者深入了解 Pluto+ 的各项功能和原理。建议读者结合文档提供的实验和实例，逐步进行实践操作。
理解CSS核心：盒子模型与样式分离
"“盒子”与“模型”-css核心知识" 本文主要探讨的是CSS（Cascading Style Sheets）中的核心概念，特别是“盒子模型”及其在网页设计中的应用。CSS是网页格式化标准的关键技术，它允许我们将网页的结构（Structure...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值