盒模型和动画效果

最新推荐文章于 2021-07-08 20:51:36 发布

夏帅

最新推荐文章于 2021-07-08 20:51:36 发布

阅读量367

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_43316160/article/details/106984052

版权

盒模型和动画效果

练习了许多的网页之后可以考虑在静态网页的基础上加一些动画特效，虽然没有实际的作用，但可以增加网页的美观性。

扩展一下表单的特殊情况。

datalist快速提示选项

让datalist与input关联
- datalist的id值要与input的list值相同
添加选项
- 即给datalist添加option子元素
- option的value值是提示信息

下拉列表开通多选功能

在select添加multiple属性
条件:设置宽和高。

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        label[for="F68"]::before{
            content: "";
            width: 10px;
            height: 10px;
            display: inline-block;
            border: 1px dashed rebeccapurple;
            box-sizing: border-box;
        }
        input[name="F68"]:checked+label::before{
            background-color: rebeccapurple;
            padding: 1px;
            background-clip: content-box;
        }
        /* 三角形 */
        label[for="F70"]{
            display: block;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: green;
            margin: auto;
        }
        /* input[name="F70"]{

        } */
        .select{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .select>div:nth-child(2){
            display: block;
        }
        select{
            height: 150px;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="F68" name="F68">
    <label for="F68">F68</label>

    <div>
        <label for="F69">快速提示信息</label>
        <input type="text" id="F69" list="F69">
        <datalist id="F69">
            <option value="CD">成都</option>
            <option value="MY">绵阳</option>
            <option value="NC">南充</option>
            <option value="BZ">巴中</option>
        </datalist>
    </div>

    <div>
        <!-- p*3>{$$} -->
        <!-- <p>01</p>
        <p>02</p>
        <p>03</p> -->
        <input type="checkbox" id="F70" name="F70">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci nisi delectus fugit, repellendus reiciendis vitae inventore laborum sed atque quaerat ab recusandae. Numquam beatae laudantium illo voluptate, dolorem dolor delectus.</p>
        <label for="F70"></label>
    </div>
    <div class="select">
        <div>
            <select name="" id="" multiple>
                <option value="">e123123</option>
                <option value="">123123</option>
                <option value="">123123</option>
            </select>
        </div>
        <div>
            <p>
                <button>左添加</button>
            </p>
            <p>
                <button>右添加</button>
            </p>
        </div>
        <div>
            <select name="" id="" multiple>
                <option value="">e123123</option>
                <option value="">123123</option>
                <option value="">123123</option>
            </select>
        </div>
    </div>
</body>
</html>

盒模型

margin：设置盒子之间的距离
- border:大小和颜色都有默认值，必须设置边框样式（solid,dashed点线,dotted虚线,double双实线）
  - border：solid
  - border-top/bottom/left/right-color/style/width
- padding
  - 上右下左
  - 上左右下
  - 上下左右
- content
  - width
  - hight
  - overflow:hidden;从填充盒开始截取，超出填充盒的内容进行隐藏
  - min-width/height
  - max-width/height
    *display:none
- display:none和visibility:hidden;的区别
  - 前面的不占空间
- visibility:hidden;和opacity:0;区别
  - 前面的不可选中
- 子盒子
  - box-sizing: 设值
    - 边框盒(border-box): border\padding\content (设置的宽高是边框盒的尺寸)
    - 内容盒(content-box)(默认值): content(设置的宽高是内容盒的尺寸)
  - backgroung-clip取值：剪切
    - 边框盒(border-box)(默认值): border\padding\content
    - 填充盒(padding-box) padding\content
    - 内容盒(content-box): content
- header固定位置，header宽度100%，又添加了左右的padding因此出现横向滚动条
  - 解决方式：
    - 改变当前标签盒子的计算方式:即box-sizing:border-box
- 盒子尺寸计算
  - outline轮廓
    - 取值：厚度样式颜色
    - outline是不占像素的，但是，无法进行单独设置某一条边的样式。
    - 使用场景：去除input、a标签的焦点框(outline:none;)
- px:像素，固定尺寸、绝对尺寸
- em:相对尺寸，当前标签字体大小的倍数
- rem:相对尺寸，根元素(HTML)的字体大小的倍数
- 20%:相对尺寸，包含块宽高的百分比
- 盒模型中的尺寸单位
  - margin：px\em%\auto(可取负值)(水平居中要求:1、常规流块盒 2、当前标签一个固定宽 3、margin:auto)
  - border: px\em
  - padding：px\em%
  - width：px\em%\auto
  - height: px\em%\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>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /* body{
            margin: 0;
        } */
        header{
            width: 100%;
            height: 100px;
            background-color: royalblue;
            position: fixed;
            top: 0;
            left: 0;
            /* display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: aqua;
            box-sizing: border-box;
            padding: 0 20px; */
        }
        nav{
            margin-top: 43px;
        }
        /* div{
            height: 200px;
            background-color: salmon;
            margin-top: 100px;
        } */
        .margin{
            margin: 50px auto;
            width: 500px;
            height: 300px;
            border: 1px solid rebeccapurple;
            position: relative;
        }
        .content{
            margin: 30px auto;
            width: 400px;
            height: 250px;
            border: 1px dashed brown;
        }
        .pink{
            width: 50px;
            height: 50px;
            background-color: deeppink;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
        }
        .blue{
            width: 50px;
            height: 50px;
            background-color: skyblue;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;
        }
        .yellow{
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1;
        }

    </style>
</head>
<body>
    <!-- <header>
        <nav>123</nav>
        <div>123</div>
        <div>abc</div>
    </header> -->
    <!-- <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum sint ad, ullam, explicabo quos ducimus dolorem, vel commodi ratione quibusdam minima quidem temporibus eaque dicta facilis necessitatibus distinctio quae suscipit?</div> -->
    <div class="margin">
        <div class="content">
            <div class="pink">01</div>
            <div class="blue">02</div>
            <div class="yellow">03</div>
        </div>
    </div>
</body>
</html>

BFC

BFC(块级格式化上下文)

他是一个独立的渲染区域，它规定了在该区域中，常规流块盒的布局
以下元素会在内部创建BFC:
- 根元素
- 浮动和绝对定位元素
- overflow不等于visible的块盒

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /* 特点1:创建BFC的元素(高度是自动)，计算高度时会计算浮动的存在 */
        /* div{
            margin: 100px auto;
            width: 300px; */
            /* 高度塌陷如何解决 */
            /* 创建BFC */
            /* height: 200px; */
            /* border: 5px solid red;
            overflow: hidden;
        }
        p{
            margin: 0;
            width: 100px;
            height: 100px;
            border: 1px solid rebeccapurple;
            float: left;
        } */

        /* 特点2：创建BFC的元素，他的边框不会与浮动元素重叠，实例可以用于文字环绕*/
        /* p{
            margin: 0;
        }
        p:first-child{
            width: 500px;
            height: 500px;
            border: 5px dashed rebeccapurple; */
            /* 创建浮动,由于文字不会无视会环绕，所以2在右边 */
            /* float: left;
        }
        p:nth-child(2){
            width: 260px;
            height: 260px;
            background-color: seagreen;
            overflow: hidden;
        }
        p:last-child{
            height: 250px;
            background-color: royalblue;
            /* 创建BFC，边框盒不会重叠，多用于布局*/
            /* overflow: hidden;
        } */

        /* 特点3: */
        /* article{
            width: 300px;
            height: 200px; */
            /* 去掉边框，盒子之间会粘连 */
            /* border: 5px solid salmon; */
            /* background-color: tan; */
            /* margin: auto; */
            /* 设置BFC，去掉外边距合并 */
            /* overflow: hidden;
        }
        section{
            width: 200px;
            height: 50px;
            background-color: seagreen;
            margin-top: 100px;
        } */

        header{
            width: 100%;
            height: 60px;
            position: fixed;
            top: 0;
            left: 0;
            background-color: thistle;
            border: 1px solid red;
        }
        div{
            margin-top: 70px;
        }
        footer{
            height: 80px;
            width: 100%;
            position: fixed;
            bottom: 0;
            background-color: saddlebrown;
        }
        aside{
            margin-bottom: 120px;
        }

    </style>
</head>
<body>
    <!-- 特点1 -->
    <!-- <div>
        <p>01</p>
        <p>01</p>
    </div> -->
    <!-- 特点2 -->
    <!-- <p>1</p>
    <p>2</p>
    <p>3</p> -->

    <!-- 特点3 -->
    <!-- <article>
        <section>123</section>
    </article> -->

    <header>abc</header>
    <div>123</div>
    <section>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita ut rerum sit officia, mollitia, itaque, dolor accusamus id aperiam at aliquid quam? Ipsum facilis quo consectetur commodi placeat repellat, maiores dignissimos dolor consequatur iusto unde, et laboriosam. Tempora excepturi, reprehenderit alias rem, eius vitae labore minus eligendi assumenda, officia iure perspiciatis voluptatum quidem tenetur facere exercitationem ullam error quas at nemo dolore cumque debitis libero. Tempore cupiditate, id perferendis soluta voluptatem similique dicta quisquam, dolor sunt magnam eum. Necessitatibus neque voluptates eius maiores ex fugit quo dolor velit quam, eligendi distinctio tempore in atque soluta natus deleniti expedita ut. Architecto!</section>
    <section>Eligendi, neque beatae, corrupti laboriosam molestiae incidunt minima magni omnis quod consectetur iste asperiores commodi at consequatur enim perferendis, nostrum doloribus sapiente. Ipsam officia libero sunt laboriosam voluptas harum ipsum. Quibusdam beatae laudantium praesentium expedita tenetur perferendis? Asperiores fugit deserunt cupiditate minus officia voluptatem impedit minima in doloribus, eligendi totam iure maiores assumenda autem ipsum laboriosam tenetur sit obcaecati magnam optio veritatis nobis doloremque excepturi accusantium. Omnis explicabo voluptas praesentium cupiditate nisi quae id voluptatem adipisci dolore rem velit ipsum in pariatur quis iste commodi, quisquam eius ducimus deserunt fugit itaque vitae? Consequuntur, delectus molestiae. Quam possimus tempore mollitia laboriosam.</section>
    <section>Iure expedita animi dolores consequatur culpa doloribus voluptatibus tempore. Maxime libero, obcaecati explicabo tempora, minus sed molestias perspiciatis, itaque dicta necessitatibus asperiores ad. Odit corrupti molestias molestiae adipisci iste. Saepe laborum recusandae ducimus corporis vitae non nihil inventore autem ea dignissimos deleniti, consequuntur ab. Neque voluptate reprehenderit quidem quo officia nobis. Modi sit atque saepe accusamus vitae maiores autem voluptates cum repellendus hic nulla rerum fugit consequatur earum incidunt numquam nihil, delectus doloribus itaque temporibus magni iusto molestias dolor praesentium. Reprehenderit molestiae ratione possimus in molestias ducimus est quam cumque officia maiores, magni esse, porro veritatis cum nesciunt tempora praesentium.</section>
    <section>Ad maiores hic exercitationem accusantium nesciunt reprehenderit, est vitae cumque saepe ducimus eveniet facilis repellendus reiciendis deleniti et voluptatibus voluptatem sequi, corrupti cum officiis enim tempore! Reprehenderit soluta laboriosam vitae quam molestiae ipsam aspernatur. Quia nobis eligendi voluptate porro accusamus accusantium voluptas. Odio maxime ut ipsa, ex quisquam labore doloremque ipsum sit excepturi sunt. Sint saepe maxime similique. Ab amet harum ratione aperiam aliquam iure adipisci, ut modi eius laboriosam necessitatibus voluptatibus delectus facilis asperiores consectetur maxime optio molestias odio nobis impedit architecto vitae? Autem beatae fugiat temporibus commodi officiis quo placeat voluptas. Omnis aliquam, inventore deserunt in veniam nihil?</section>
    <section>Est nisi quas sunt numquam rem incidunt cumque odit, culpa perspiciatis itaque voluptates voluptas sed iste suscipit, sint dolorem distinctio iusto quo odio impedit consequuntur laborum magni? Ratione quod, libero tempora praesentium ex suscipit tenetur qui natus sapiente vel fugit rem eaque error repellendus doloribus aperiam laborum. Assumenda eaque mollitia quibusdam saepe eos nam quasi quia quis ipsum distinctio dolor nostrum enim voluptates cupiditate, in quod non expedita accusamus corporis possimus. Voluptates, beatae ab quod dolor deleniti sunt nesciunt modi commodi praesentium iste, dolores suscipit officiis ratione nihil earum tenetur repellendus! Voluptas numquam pariatur corporis, quia omnis magni. Suscipit, cumque.</section>
    <section>Quaerat tempora nemo minima cumque eligendi quae a similique ex harum nobis! Maxime, optio quae soluta perferendis ducimus ipsa explicabo minima quod dolor sit dolore doloribus suscipit modi temporibus voluptate? Nesciunt ratione expedita modi eum, deleniti, commodi quo ea soluta laboriosam, aut repellat? At temporibus maiores enim tempora itaque repudiandae asperiores natus doloribus, aperiam ipsa eveniet delectus eum ut? Alias suscipit consequatur, saepe voluptate fuga quaerat aperiam voluptatum, et error illum totam rem labore qui, id maiores molestiae unde! Voluptatibus, vel, corporis consequuntur explicabo dolorum placeat iste aliquid maxime officiis voluptate quaerat minus dolor pariatur deserunt qui sit distinctio tenetur!</section>
    <section>Nihil dicta obcaecati sunt dignissimos earum facilis eaque, quo nulla magnam similique voluptatem, vitae quam placeat corporis reiciendis! Delectus veniam explicabo ut quaerat maxime. Repudiandae corporis dignissimos molestias cumque, quo ad voluptas beatae id at. Aut ducimus autem quisquam in illo vel assumenda? Laborum nemo dolores error, animi unde dolorum id itaque assumenda sed. Molestiae sapiente corrupti perspiciatis amet quas unde eligendi velit molestias sint porro, voluptatibus voluptatem enim repellendus repellat? Necessitatibus obcaecati sunt aliquid, commodi quo aperiam. Doloremque, repellat! Modi alias exercitationem, consectetur debitis minima adipisci architecto labore perferendis ratione neque, rerum eligendi! Esse voluptatum quibusdam consequuntur explicabo saepe.</section>
    <section>Distinctio quaerat quas eius iure, consectetur quo deleniti corporis rem repudiandae possimus incidunt odio ab explicabo veritatis architecto ipsum saepe eveniet voluptatum voluptas provident. Alias quaerat veritatis ratione dicta eaque incidunt eius delectus, eum doloremque sequi iure, dolores a quibusdam amet quia labore harum magnam cupiditate culpa. Quasi sint molestias similique quod aperiam expedita assumenda eveniet eos provident voluptatem aliquam nihil beatae, quidem qui voluptatum quaerat atque, non libero quis repudiandae ullam earum totam exercitationem temporibus. Quod dolorum error quis placeat veritatis, itaque dolorem illo eius molestias velit animi tenetur officia culpa doloribus et expedita exercitationem at cupiditate a provident.</section>
    <section>Repellendus nemo dolore iste consequuntur, illo aperiam, veniam recusandae dolores debitis odio quidem quas non dolor magnam perspiciatis dicta? Vero deserunt pariatur dicta nemo eligendi nesciunt, atque corrupti, illo natus harum praesentium accusantium. Culpa quaerat explicabo provident adipisci sed consequatur enim excepturi voluptates molestias, dignissimos tenetur saepe qui perspiciatis hic aut incidunt tempora non tempore praesentium omnis! Eveniet quo temporibus voluptates obcaecati. Laudantium non consectetur fugit, doloribus nihil odit esse cupiditate ab. Architecto dolore dignissimos, ipsam cum iste provident culpa tenetur maiores in porro eum eos dolores repudiandae eveniet quas fugiat. Maxime eum veritatis suscipit laboriosam consequuntur dolor placeat consectetur!</section>
    <section>Atque vero dolore, soluta architecto quidem sed adipisci id enim officiis quae. Qui, dolor pariatur nobis numquam, iusto exercitationem dolorem, nemo consectetur similique cum veritatis quod vel quisquam deleniti. Velit in nihil fugit tempore dolorum facere quaerat accusamus non veniam, recusandae debitis quibusdam amet odit aliquid quis quod. Ab facere sit corrupti minus nostrum, delectus dolore a. Consequuntur omnis quas, suscipit eos voluptatum laboriosam ipsum quisquam quidem repudiandae quaerat ullam eum ratione debitis deleniti repellat enim nemo voluptate, aliquid voluptas! Ipsam expedita perspiciatis repellendus molestias quos aut, saepe similique autem necessitatibus. Nulla tempore quo assumenda vitae nemo corrupti soluta excepturi!</section>
    <aside>F69</aside>
    <footer>F68</footer>
</body>
</html>

动画

变形

div{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    float: left;
    margin: 20px;
    /* 旋转中心点(原点)的调整：值可以是方向，也可以是数值 */
    transform-origin: 100px 100px;
}
/* body{
    display: flex;
    flex-wrap: wrap;
} */
/* 缩放scale:默认为1不变，大于一放大，0-1缩小 */
/* div:hover{
    transform: scale(1.5);
    background-color: teal;
} */

/* skew：倾斜：取值都是角度deg，可正可负 */
/* div:hover{
    transform: skew(-30deg);
}
div:hover>p{
    transform: skew(30deg);
} */

/* rotate：Z轴默认(rotateZ),rotateY,rotateX 旋转：取值都是角度deg, 正值顺时针，负值逆时针*/
div:hover{
    transform: rotateZ(180deg);
    /* transform: rotateY(180deg); */
    /* transform: rotateX(360deg); */
    /* 偏移量:第一个值是x轴偏移量(正右负左)，第二个值是Y轴偏移量(正下负上) */
    /* transform: translate(100px,100px); */
    transition: all 1s;
}

过渡

div,p{
    width: 100px;
    height: 100px;
    background-color: #f40;
    margin: 100px auto;
}
/* div:hover{
    width: 500px;
    background-color: blueviolet; */
    /* 下面三个的简写 */
    /* transition: all linear 1s; */
    /* 指定一个多或全部属性过渡(渐变)，只适用于尺寸、颜色、透明度 (不支持dispaly:none的弹入弹出，要用opacity)*/
    /* transition-property: width background-color; */
    /* 过渡效果：取值(ease默认、ease-in由慢到快、ease-out又快到慢、ease-in-out由慢到快再到慢、linear线性) */
    /* transition-timing-function: ease; */
    /* 过渡的时间函数 */
    /* transition-duration: 3000ms;
} */

p:hover{
    width: 500px;
    background-color: greenyellow;
    transition-property: width background-color;
    transition-timing-function: linear;
    transition-duration: 1000ms;
}
section{
    margin: 10px auto;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: red;
    /* display: none; */
    opacity: 0;
    transition: all 1s;
}
p:hover~section{
    opacity: 1;
}
section:nth-of-type(2){
    /* 设置过渡的延迟效果 */
    transition-delay: 1000ms;
}
section:nth-of-type(3){
    /* 设置过渡的延迟效果 */
    transition-delay: 2000ms;
}

夏帅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒模型和动画效果

盒模型和动画效果练习了许多的网页之后可以考虑在静态网页的基础上加一些动画特效，虽然没有实际的作用，但可以增加网页的美观性。扩展一下表单的特殊情况。datalist快速提示选项让datalist与input关联datalist的id值要与input的list值相同添加选项即给datalist添加option子元素option的value值是提示信息下拉列表开通多选功能在select添加multiple属性条件:设置宽和高。代码示例<!DOCTYPE ht
复制链接

扫一扫