从前端小白到大佬盒子模型

最新推荐文章于 2024-07-24 21:48:20 发布

一只琳娜

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量124

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/my_prince/article/details/107944809

版权

css

1.盒子模型
2.案例-产品模块

1.盒子模型
在这里插入图片描述
①border边框
-border-width 边框的粗细，单位px；
-border-style 边框的样式，实线/虚线等；
-border-color 边框的yanse；
-border：1px solid red 复合写法
-border-top/bottom/left/right 盒子单边设置
例一：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-width: 2px;
            /* solid 实线/dashed 虚线/dotted 点线 */
        }
        
        .ol {
            border-style: dashed;
            border-color: coral;
        }
        
        .op {
            border-style: solid;
            border-color: rgb(80, 255, 211);
        }
        
        .oi {
            border-style: dotted;
            border-color: rgb(147, 80, 255);
        }
    </style>
</head>

<body>
    <div class="ol"></div>
    <div class="op"></div>
    <div class="oi"></div>
</body>

在这里插入图片描述
例二：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-width: 2px;
            border-style: solid;
            border-color: indigo;
            /* 顺便应用层叠性 */
            border-top-color: firebrick;
            border-bottom-color: green;
        }
    </style>
</head>

<body>
    <div></div>

</body>

在这里插入图片描述
例三：
修改表格的边框样式。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        table {
            width: 200px;
            height: 200px;
        }
        
        table,
        td {
            border: 1px solid orange;
            font-size: 300;
            text-align: center;
            /* 合并相邻的边框 */
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table align="center" border="1 " cellspacing="0 ">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

</body>

在这里插入图片描述

②content内容
③padding内边距
-padding-top/buttom/left/right
-padding: 5px；表示上下左右内边距都是5
-padding：5px 10px；上下5，左右10
-padding：5px 10px 15px；上5，左右10，下15
-padding：5px 10px 15px 20px；上5，右10，下15，左20
例子：
新浪导航栏，不直接给盒子设置宽度，而实通过左右内边框来调整每个盒子合适的大小。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        div {
            height: 41px;
            border-top-width: 3px;
            border-top-style: solid;
            border-top-color: #ff8500;
            border-bottom: 1px solid #edeef0;
        }
        
        div a {
            display: inline-block;
            line-height: 41px;
            font-size: 12px;
            color: #4c4c4c;
            padding: 0 20px;
            text-decoration: none;
            text-align: center;
        }
        
        div a:hover {
            background-color: #edeef0;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>


</body>

效果：
在这里插入图片描述

④margin外边距
-margin-top/buttom/left/right
-margin: 5px；表示上下左右内边距都是5
-margin：5px 10px；上下5，左右10
-margin：5px 10px 15px；上5，左右10，下15
-margin：5px 10px 15px 20px；上5，右10，下15，左20

例一：两个盒子保持距离。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: burlywood;
        }
        
        .o {
            margin-bottom: 3px;
        }
    </style>
</head>

<body>
    <div class="o">
    </div>
    <div></div>

</body>

在这里插入图片描述
例二：实现盒子水平居中

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个网站</title>
    <style>
        div {
            height: 100px;
            width: 300px;
            background-color: burlywood;
            margin: 0  auto;
        }
    </style>
</head>

<body>

    <div></div>

</body>

在这里插入图片描述
④盒子外边距的合并（塌陷）问题的解决办法
-为父元素定义上边框。
-为父元素定义内边框。
-为父元素天界overflow：hidden。

⑤清楚内外边距

* {
 margin：0；
  padding： 0；
  }

2.案例-产品模块

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品模块</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #c9c9c9;
        }
        
        .box {
            width: 298px;
            height: 415px;
            background-color: #ffffff;
            margin: 100px auto;
        }
        
        .box img {
            width: 100%;
        }
        
        .box .xiaomi {
            padding-top: 10px;
            text-align: center;
            font-size: 14px;
        }
        
        .box .bianjiao {
            margin-top: 8px;
            color: #b0b0b0;
            font-size: 12px;
            text-align: center;
        }
        
        .box .jiaqian {
            text-align: center;
            margin-top: 18px;
        }
        
        .box .jiaqian span {
            display: inline-block;
        }
        
        .box .s1 {
            color: #ff6700;
            font-size: 15px;
        }
        
        .box .s2 {
            color: #b0b0b0;
            font-size: 12px;
            text-decoration: line-through;
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="img.jpg">
        <p class="xiaomi">小米10 青春版 5G</p>
        <p class="bianjiao">50倍潜望式变焦/轻薄5G手机</p>
        <p class="jiaqian">
            <span class="s1">1899元起 </span>
            <span class="s2">2099元</span>
        </p>
    </div>

</body>

效果：
在这里插入图片描述

一只琳娜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从前端小白到大佬盒子模型

css1.盒子模型1.盒子模型①border边框-border-width 边框的粗细，单位px；-border-style 边框的样式，实线/虚线等；-border-color 边框的yanse；-border：1px solid red 复合写法-border-top/bottom/left/right 盒子单边设置例一：<head> <meta charset="UTF-8"> <meta name="viewport" conten
复制链接

扫一扫