html 盒子模型

最新推荐文章于 2025-03-04 11:59:10 发布

cloarl

最新推荐文章于 2025-03-04 11:59:10 发布

阅读量514

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/cloarl/article/details/129048649

版权

HTML 专栏收录该内容

13 篇文章

订阅专栏

一、介绍

盒子模型组成部分：标准盒子

从内向外：

1.内容区：content：分内容的

2.内边距：padding：设置内容与边框的距离

3.边框：border：设置区分盒子内外

4.外边距：margin：设置元素与元素之前的距离，设置元素的位置

用法与padding基本一致 -->

二、div盒子的属性

边框：

Border：边框基本属性

boder-style：边框样式

boder-color：边框颜色

border-width：边框宽度

border-collapse：边框合并

border-radius：边框弧度

border-方向设置某一边的边框

Border边框基本属性

border-top：设置上边框

right：设置右边框

bottom：设置下边框

left:单独设置左的边框样式

2.内边距

padding-top:单独设置上内边距

padding-right:单独设置右内边距

padding-bottom:单独设置下内边距

padding-left:单独设置左内边距

三、应用

制作圆

<!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>csdn</title>
    <style>
        .div1 {
            width: 200px;  设置宽度
            height: 200px;   设置高 
             background-color: aqua;  颜色
             border-radius: 50%;    
         
        }

效果：

制作半圆

.div2 {
    width: 200px; 设置宽
    height: 100px; 设置高
    background-color: bisque;  颜色
    border-radius: 0 0 100px 100px;    设置右下，坐下
}

效果图

注意：要修改不同角度的半圆改变宽度和高度以及border-radius: 0 0 0 100; （左上右上右下左下）的值即可

制作4/1圆

.div5 {
    width: 100px;
    height: 100px;
    background-color: brown;
border-radius: 0 0 100px 0;
}

效果：

注意:要设置不同方向的四分之一圆或者大小就修改宽度和高度以及border-radius: 0 0 0 100; （左上右上右下左下）中的值