CSS学习文档（3）：盒子模型、圆角边框、盒子阴影、常见图片格式、浮动

码农_小文

已于 2024-07-25 22:34:07 修改

阅读量756

点赞数 15

文章标签： css 学习前端

于 2024-07-25 22:11:00 首次发布

本文链接：https://blog.csdn.net/m0_58433849/article/details/140698280

版权

一、盒子模型

1、网页布局过程

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

2、组成部分

相当于一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容。
组成部分如下图所示：

（1）边框（border）

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色
语法

boder：border-width

复合写法：border：1px soild red；

（2）内边距（padding）

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

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

以上四种情况，在我们实际开发中经常遇到。

代码如下所示：

    <title>内边距复合写法</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding-left: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-right: 5px; */
            padding: 5px 10px 20px 30px;
        }
    </style>
</head>

<body>
    <div>
        盒子内容是content盒子内容是content盒子内容是content盒子内容是content

    </div>
</body>

（3）外边距（margin）

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

外边距的典型应用：

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

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

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

代码如下所示：

    <title>外边距典型应用</title>
    <style>
        div {
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <span>里面的文字</span>
    </div>
    <div>
        <img src="down.jpg" alt="">
    </div>
</body>

（4）清楚内外边距

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

* {

padding：0；

margin：0；

}

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

二、圆角边框

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。

border-radius:length;

radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果
参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
如果是个矩形,设置为高度的一半就可以做
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

代码如下所示：

    <title>圆角边框的使用</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            border-radius: 10px 20px 30px 40px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="yuanxing"></div>
    <div class="juxing"></div>
    <div class="radius"></div>
</body>

三、盒子阴影

1、cSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

2、语法

box-shadow：h-shadow v-shadow blur spread color inset;

需要注意的是：

（1）默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效

（2）盒子阴影不占用空间，不会影响其他盒子排列。

四、常见图片格式

1、 jpg图像格式:JPEG ( JPG )对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式。

2. gif图像格式∶GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果。

3. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景.如果想要切成背景透明的图片,请选择png格式。

4. PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。

五、浮动

1、float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器{ float：属性值； }

代码如下所示：

    <title>什么是浮动</title>
    <style>
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            /* float: right; */
        }

        .right {
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">1</div>
    <div class="right">2</div>
</body>

2、浮动元素会脱离标准流(脱标)

（1）脱离标准普通流的控制(浮）移动到指定位置(动)，(俗称脱标)

（2）浮动的盒子不再保留原先的位置

如图所示：

代码如下所示：

    <title>浮动特性-脱标</title>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>

3、浮动的元素会一行内显示并且元素顶部对齐

（1）.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

如图所示：

代码如下所示：

    <title>浮动特性-浮动盒子一行显示</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: purple;
            height: 249px;
        }

        .four {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

4、浮动的元素会具有行内块元素的特性

（1）任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

代码如下所示：

    <title>浮动特性-浮动元素具有行内块元素特点</title>
    <style>
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        p {
            float: right;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <span>1</span>
    <span>2</span>

    <div>div</div>
    <p>pppppppppppppppp</p>
</body>

5、浮动元素常和标准流父级搭配

为了约束浮动元素位置,我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.

标准流父盒子如图所示：