HTMLday0618

m0_71108047

已于 2024-06-19 08:31:19 修改

阅读量312

点赞数 8

文章标签： javascript 前端 css html

于 2024-06-18 20:43:33 首次发布

本文链接：https://blog.csdn.net/m0_71108047/article/details/139776642

版权

例子

一行元素内显示的元素当空间不足时,会自动换行排列

行内以及行内块元素如果HTML元素中间有回车符会被解析为空白符,会有空白

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .windmill {
            width: 400px;
            height: 400px;
            background-color: pink;
            font-size: 0px;
        }
        
        .windmill div {
            width: 200px;
            height: 200px;
            background-color: rgb(42, 223, 36);
            display: inline-block;
        }
        
        .windblade1 {
            border-radius: 0 100% 0 100%;
        }
        
        .windblade2 {
            border-radius: 100% 0 100% 0;
        }
    </style>
</head>

<body>
    <div class="windmill">
        <div class="windblade1"></div>
        <div class="windblade2"></div>
        <div class="windblade2"></div>
        <div class="windblade1"></div>
    </div>
</body>

</html>

盒子外边距的应用

盒子水平居中:左右margin 改为 auto

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>       
        .main {
            background-color: red;
            width: 1000px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="main">文档的居中</div>
</body>

</html>

清除内外边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .con {
            width: 500px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="con">文档主题</div>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>

</html>

外边框的合并情况

不要写 margin-bottom: 20px; margin-top: 30px;不要这么写, 只给一个元素设置margin

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div {
            width: 200px;
            height: 100px;
        }
        
        .bro1 {
            background-color: blue;
            margin-bottom: 50px;
        }
        
        .bro2 {
            background-color: red;

        }
    </style>
</head>

<body>
    <div class="bro1"></div>
    <div class="bro2"></div>
</body>

</html>

嵌套盒子外边框的合并

/* 给父元素设置1px的上边框或者1px的内边框 */

/* overflow: hidden;溢出隐藏,BFC原理 */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 200px;
            background-color: red;
            margin-top: 20px;
            /* padding-top: 1px; */
            overflow: hidden;
        }
        
        .son {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .windmill {
            width: 400px;
            height: 400px;
            font-size: 0px;
            margin: 50px auto;
            transition: all 5s;
        }
        
        .windmill div {
            width: 200px;
            height: 200px;
            background-color: rgb(42, 223, 36);
            display: inline-block;
        }
        
        .windblade1 {
            border-radius: 0 100% 0 100%;
        }
        
        .windblade2 {
            border-radius: 100% 0 100% 0;
        }
        
        .windmill:hover {
            transform: rotate(3600deg);
        }
    </style>
</head>

<body>
    <div class="windmill">
        <div class="windblade1"></div>
        <div class="windblade2"></div>
        <div class="windblade2"></div>
        <div class="windblade1"></div>
    </div>
</body>

</html>

盒子大小的计算方式

标准的盒子模型 width/height+padding+border

IE盒子模型 margin+weight

ie盒子模型又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。

在这种盒模型下，我们所说的元素盒子的width ，实际上包含了 content + padding + border

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>   
        .box {
            width: 300px;
            height: 300px;
            padding: 20px;
            border: 30px solid red;
            margin: 40px;

            box-sizing: border-box;
        }
    </style>
</head>

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

</html>

盒子阴影

box-shadow:水平阴影垂直阴影模糊距离阴影尺寸阴影颜色内/外阴影inset(内阴影)默认外阴影；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            border: 2px solid #666;
            box-shadow: 50px 50px 10px 2px #999;
        }
    </style>
</head>

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

</html>

盒子溢出属性

visible(默认) : 　不剪切内容也不添加滚动条。

auto : 　超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
            overflow: auto;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="box">今天是个好天气真不错啊
    </div>
</body>

</html>

盒子浮动属性

float

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .com {
            width: 400px;
            height: 100px;
            border: 1px red solid;
            margin: 50px auto;
        }
        
        .com div {
            width: 100px;
            height: 100px;
            float: left;
            /* float: right; */
        }
        
        .com .com1 {
            background-color: #ff0;
        }
        
        .com .com2 {
            background-color: #f00;
        }
        
        .com .com3 {
            background-color: #0f0;
        }
    </style>
</head>

<body>
    <div class="com">
        <div class="com1"></div>
        <div class="com2"></div>
        <div class="com3"></div>
    </div>
</body>

</html>