css，盒子模型

已于 2022-02-26 11:19:17 修改
阅读量84 收藏
点赞数 1
分类专栏： # css 文章标签： css css3 html
于 2022-02-21 01:07:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51045721/article/details/123038923
版权

文章目录

盒子模型

，就是帮助我们做布局的
盒子模型由 内容区域content 、内边距区域 padding、 边框区域 boder、外边距区域margin 构成

<!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>
    <style>
        div {
            width: 300px;
            height: 300;
            background-color: pink;
            /* 边块线 */
            border: 1px;
            /* 内边距：就是填充泡沫 :出现在内容和盒子边缘之间*/
            padding: 10px;
            /* 外边距 ：出现在两个盒子之间 或者说盒子的外面*/
            margin: 50px;
        }
    </style>
</head>

<body>
    <div>
        内容；电脑
    </div>
    <div>内容；电脑</div>
</body>

</html>

记住这些颜色
在这里插入图片描述
给内容要定义宽和高

边框

属性值连写：boder:
在这里插入图片描述

盒子实际大小计算

记得算上边框线的宽度
在这里插入图片描述

案例：新浪导航小项目

<!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>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: solid 1px #7f91b4;
        }

        /* 后代： box里面的 a */
        .box a {
            width: 80px;
            height: 40px;
            /* 推荐先加上，清楚看到文字位置 */
            background-color: #edeef0;
            /* 转换模式，使得设置宽高之后效果生效 */
            display: inline-block;
            /* 文本居中 */
            text-align: center;
            line-height: 40px;
            /* 文字大小调整 */
            font-size: 12px;
            color: #4c4c4c;
            /* 去掉下划线 */
            text-decoration: none;
        }

        /* 设置悬停效果 */
        .box a:hover {
            background-color: #ff8400;
        }
    </style>
    <!-- 从内到外：先 宽高背景色，放内容，调节内容位置，控制文字细节 -->
</head>

<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>

</body>

</html>

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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            padding: 50px;

            /* padding 属性可以当作复合属性使用，表示单独设置某个方向的内边距 */
            /* padding 最多取四个值 */

            /* 四个值： 上 右 下 左 */
            /* padding: 10px 20px 40px 80px; */
            color: blueviolet;

            /* 三个值：上 左右 下  */
            /* padding: 10px 40px 80px; */

            /* 两个值：上下 左右 */
            padding: 10px 80px;
        }

        /* 多值写法：永远都是从上开始顺时针转一圈，如果数不够，看对面 */
    </style>
</head>

<body>
    <div>文字</div>
</body>

</html>

盒子实际大小中级计算公式：

需求：盒子尺寸300*300 背景粉色 边框10px实线黑色 上下左右20px的内边距如何实现？

<!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>
    <style>
        div {
            /* 能够撑大盒子的： border  padding; */
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid #000;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div>文字</div>
</body>

</html>

案例-新浪导航-优化

在这里插入图片描述

<!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>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: solid 1px #7f91b4;
        }

        /* 后代： box里面的 a */
        .box a {
            /* 使得左右更加灵活 */
            padding: 0 16px;
            /* width: 80px; */
            height: 40px;
            /* 推荐先加上，清楚看到文字位置 */
            background-color: #edeef0;
            /* 转换模式，使得设置宽高之后效果生效 */
            display: inline-block;
            /* 文本居中 */
            text-align: center;
            line-height: 40px;
            /* 文字大小调整 */
            font-size: 12px;
            color: #4c4c4c;
            /* 去掉下划线 */
            text-decoration: none;
        }

        /* 设置悬停效果 */
        .box a:hover {
            background-color: #ff8400;
        }
    </style>
    <!-- 从内到外：先 宽高背景色，放内容，调节内容位置，控制文字细节 -->
</head>

<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>

</body>

</html>

css3盒子模型-自动内减

需求: 盒子尺寸300*300 背景粉色 边框10px实线黑色 上下左右20px的内边距如何实现？

分析：给盒子设置border 或 padding 时，盒子会被撑大，如果不想盒子被撑大，如何实现

方法一：手动实现
方法二：自动内减
1.给盒子设置属性 box-sizing:boder-box;
优点 ：浏览器会自动计算多余大小，自动在内容中减去

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border: solid 10px #000;
            padding: 20px;

            /* 内减模式 */
            /* 变成css3 的盒子模型： */
            /* 好处：加 border 和 padding 不需要手动做减法 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>文字</div>
</body>

</html>

盒子模型-外边距

相关设置和内边距的是一样的

清除默认的内外边距

*{
margin:0;
padding:0;
}

版心居中

版心：网页的有效内容
版心一般都是居中的效果

<!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>
    <style>
        div{
            width: 1000px;
            height: 300px;
            background-color:pink;
            /* 版心居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div>版心</div>
</body>
</html>

案例-新闻列表

实现效果
在这里插入图片描述

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 内减一般放在这里：所有的便签都可能用到 */
            box-sizing: border-box;
        }

        /* div布局 */
        .news {
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            /* 版心居中 */
            margin: 50px auto;
            padding: 42px 30px 0;
        }

        .news h2 {
            border-bottom: 1px solid #ccc;
            font-size: 30px;

            /* 行高是1倍，就是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;

        }

        /* 去掉列表的符号（前面的那个小圆点点） */
        ul {
            list-style: none;
        }

        /* li{} */
        .news li {
            height: 50px;
            border-bottom: 1px dashed #ccc;
            /* 加左边距 */
            padding-left: 28px;
            /* 垂直居中 */
            line-height: 50px;

        }

        /* 去掉超链接的样式  */
        .news a {
            text-decoration: none;
            color: #666;
            font-style: 18px;

        }
    </style>
</head>

<body>
    <!-- 布局原则-从内到外 -->
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="">体验JavaScript的魅力</a></li>
            <li><a href="">jquery世界来临</a></li>
            <li><a href="">网页设计师的梦想</a></li>
            <li><a href="">jQuery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>

</html>

外边距的问题

margin 、

在这里插入图片描述

塌陷：坑爹现象

就是相互嵌套的 块级元素 ，子元素的 margin-top 会作用在父元素上面

导致父元素一起向下移动

解决方法：
①给父元素设置 border-top 或者padding-top
但是如果设计稿中没有边框的时候，就不能用这个解决

②给父元素设置 overflow:hidden

③转换成行内块元素

④设置浮动

行内元素的内外边距的问题

加行高解决
在这里插入图片描述

Dn_wh
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS盒子模型
weixin_45709134的博客
12-22 196
目录CSS盒子模型1.简介2.设置边框和内容(Border,Content)3.内边距（padding）4.外边距(margin)4.1垂直外边距的重叠5.内联元素(inline)的盒子6.盒子的显示(display)7.盒子溢出(overflow)8.文档流（Normal Flow）8.1文档流定义8.2元素在文档流中的特点:8.3脱离文档流9.浮动(float)9.1浮动定义9.2浮动特点 CSS盒子模型 1.简介 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和
css盒子模型
2301_80840100的博客
06-22 2281
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS 盒子模型
m0_52861684的博客
08-28 1497
CSS 盒子模型总结。
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
CSS —— 界面布局
m0_73557953的博客
09-10 577
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
css的选择器有哪些？权重由大到小是怎么排序的？
BANaanaa的博客
09-10 520
来看看css的选择器与权重比吧
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 463
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
css之雪碧图（精灵图）
qq_55961367的博客
09-02 774
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
VitePress 自定义 CSS 指南
软考鸭
09-06 535
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 128
【代码】css鼠标移动过去变成手的图标。
CSS基本语法结构
nice66660的博客
09-10 951
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
如何利用 CSS 渐变实现多样化背景效果
最新发布
weixin_63625059的博客
09-10 374
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 3948
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
CSS盒子模型：网页布局新规则
传统的表格布局依赖于大小不一的单元格和嵌套表格来控制元素的位置和尺寸，但CSS盒子模型提供了一种更为灵活和标准化的方法。 盒子模型将每个HTML元素视为一个矩形的“盒子”，包含四个主要部分：内容(content)、内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值