前端复习大纲-CSS04

最新推荐文章于 2024-04-23 15:15:07 发布

莩甲柚

最新推荐文章于 2024-04-23 15:15:07 发布

阅读量179

点赞数

分类专栏：前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_36303923/article/details/121193637

版权

前端学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文深入探讨了网页布局的本质——盒子模型，详细讲解了边框、内边距、外边距的设置及其对元素尺寸的影响。通过实例展示了如何使用CSS实现水平居中和表格细线边框。同时，介绍了外边距合并现象及解决方案，以及如何清除默认的内外边距以确保精准布局。

摘要由CSDN通过智能技术生成

网页布局本质

网页布局的三大核心：盒子模型、浮动和定位
网页布局的核心本质：就是利用CSS摆盒子
网页布局的过程：

先准备好相关的网页元素，网页元素基本上都是盒子box
利用CSS设置好盒子样式，然后摆放到相应位置
往盒子里面装内容

盒子模型

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装有内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
在这里插入图片描述

边框 border

border可以设置元素的边框，边框有三部分组成：

边框宽度（粗细）
边框样式
边框颜色

border : border-width || border-style || border-color

复合写法

border: 1px solid green; 没有顺序

分开写法

border-top: 1px solid green;  /*只设置上边框*/

边框样式

solid 实线边框
dotted 点线边框
dashed 虚线边框

边框的层叠性

在这里插入图片描述

表格细线边框

border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框

border-collapse: collapse; 表示将相邻边框合并在一起

在这里插入图片描述

边框会影响盒子的实际大小

边框会额外增加盒子的实际大小，因此有两种解决方案

测量盒子大小的时候不测量边框
如果测量的时候包含了边框，则需要width/height减去边框宽度（要减去双倍）

内边距 padding

padding属性用于设置内边距，即边框与内容之间的距离

padding-left
padding-ringht
padding-top
padding-bottom

在这里插入图片描述

padding复合属性

padding属性的值可以有一到四个

值的个数	表达意思
padding: 5px;	1个值，代表上下左右内边距都是5px
padding: 5px 10px;	2个值，代表上下内边距5px , 左右内边距10px
padding: 5px 10px 20px;	3个值，代表上内边距5px , 左右内边距10px ，下内边距20px
padding: 5px 10px 20px 30px;	4个值，代表上5px 右10px 下内边距20px 左内边距30px，顺时针

padding影响盒子实际大小

当我们给盒子指定padding后，发生了两件事情

内容和边框有了距离，添加了内边距
padding影响了盒子实际大小

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可

padding不会撑开盒子的情况

如果盒子本身没有指定width / height 属性，此时padding不会撑开盒子大小

padding应用案例

padding内边距会撑开盒子，所以可以做非常巧妙的应用
因为每个导航栏的字数不一样多，可以不用给每个盒子宽度，直接给padding最合适

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        .nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            /* 文字居中对齐 */
            line-height: 41px;
        }
        .nav a {
            /* a属于行内元素，要给它设置高度必须先转换为行内块元素 */
            display: inline-block;
            height: 41px;
            padding:0 20px;
            font-size: 12px;
            color:#4c4c4c;
            /* 去掉链接下划线 */
            text-decoration: none;
        }
        .nav a:hover {
            background-color: #eeeeee;
            color:#ff8500;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>
</body>
</html>

在这里插入图片描述

padding影响盒子大小计算-小米导航栏修改

padding内边距会撑开盒子，有时候也会让我们去修改宽度，所以小米侧边栏的案例中，文字距离左侧不应该用text-indent，这样不精确
实际开发中是给padding值，这样更加精确
在这里插入图片描述

外边距 margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离

margin-left
margin-right
margin-top
margin-bottom

margin 的简写和意义和padding一致

典型应用-块级盒子水平居中

外边距可以让块级盒子水平居中，但是必须满足两个条件

盒子必须指定了宽度 width
盒子左右的外边距都设置为auto

常见的写法，以下三种都可以：

margin-left：auto; margin-right:auto;
margin: auto;
margin: 0 auto;

    <style>
        div {
            height: 100px;
            width: 200px;
            background-color:blanchedalmond;
            margin: 0 auto;       
        }
    </style>
</head>
<body>
    <div>这是一个盒子</div>
</body>
</html>

行内元素或者行内块元素水平居中

行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

    <style>
        div {
            height: 100px;
            width: 200px;
            background-color:blanchedalmond;
            margin: 0 auto;
            text-align: center;
           
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个盒子</p>
    </div>
</body>
</html>`

在这里插入图片描述

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

1、相邻块元素垂直外边距的合并

在这里插入图片描述

2、嵌套块元素垂直外边距的塌陷

在这里插入图片描述
还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题

       <style>
        .father {
            height: 300px;
            width: 400px;
            background-color:blue;
            margin-top: 100px;
            /* 解决办法一：给父元素添加上边框 */
            /* border:1px solid transparent; */

            /* 解决方法二：给父元素定义上内边距 */
            /* padding-top: 1px; */

            overflow: hidden;
        }
        .son {
            height: 100px;
            width: 100px;
            background-color:black;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

在这里插入图片描述

清除内外边距

网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致，因此在布局前，首先要清除下网页元素的内外边距

* {
    padding: 0;  /* 清除内边距*/
    margin: 0;   /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了

莩甲柚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端复习大纲-CSS04

文章目录网页布局本质盒子模型边框 border边框样式边框的层叠性表格细线边框边框会影响盒子的实际大小内边距 paddingpadding复合属性padding影响盒子实际大小padding不会撑开盒子的情况padding应用案例padding影响盒子大小计算-小米导航栏修改外边距 margin典型应用-块级盒子水平居中行内元素或者行内块元素水平居中外边距合并1、相邻块元素垂直外边距的合并2、嵌套块元素垂直外边距的塌陷清除内外边距网页布局本质网页布局的三大核心：盒子模型、浮动和定位网页布局的核心本质：
复制链接

扫一扫