HTML5学习——第四天-CSDN博客

本文链接：https://blog.csdn.net/weixin_64683517/article/details/140614427

1.背景图片

<!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: 400px;
            height: 300px;
            margin: auto;

            /* 背景颜色 */
            background-color: pink;

            /* 背景图片 */
            background-image: url(./1.jpg);
            /* 
                背景图片的显示优先级大于背景颜色
                默认水平垂直平铺占满
             */

             /* 背景平铺 */
             /* 默认值 - 水平垂直平铺 */
            background-repeat: repeat;
            /* *取消平铺* */
            background-repeat: no-repeat;
            /* 水平方向平铺 */
            background-repeat: repeat-x;
            /* 垂直方向平铺 */
            background-repeat: repeat-y;
            background-repeat: no-repeat;

            /* 背景图的位置 */
            /* 水平:left左 center中 right右  垂直:top上 center中 bottom下 */
            /* 左上角 - 默认 */
            background-position: left top;
            /* 右上角 */
            background-position: right top;
            /* 左下角 */
            background-position: left bottom;
            /* 右下角 */
            background-position: right bottom;
            /* 左中 */
            background-position: left center;
            background-position: left;
            /* 右中 */
            background-position: right center;
            background-position: right;
            /* 上中 */
            background-position: center top;
            background-position: top;
            /* 下中 */
            background-position: center bottom;
            background-position: bottom;
            /* 正中 */
            background-position: center center;
            background-position: center;

            /* 数字+px */
            background-position: 30px 60px;
            background-position: 0 0;
            background-position: 100px 0;
            background-position: 100px 100px;
            background-position: -50px 0;

            /* 百分比 % */
            background-position: 40% 35%;

            /* 混用 */
            background-position: 50% 10px;
            background-position: 10px bottom;
            background-position: right 10%;
            background-position: 0 0;

            /* 背景图片的尺寸 */
            /* 数字+px */
            background-size: 100px 50px;
            background-size: 100px ;
            /* 百分比% - 参照当前背景图片所在的容器进行判断 */
            background-size: 100% 50%;
            /* contain - 图片等比例缩放,直到其中一边占满父级为止 */
            background-size: contain;
            /* cover - 等比例缩放图片,直到宽高均占满父级为止,图片比例与容器比例不一致的情况下,会出现显示不全的情况 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div>
        背景图片
    </div>
</body>
</html>

2.背景相关属性连写

<style>
        div{
            width: 300px;
            height: 300px;
            /* 
                背景的连写 - 取值不分先后顺序
                连写中只有一组数字+px的取值,默认代表位置
                当位置与尺寸同时出现,用 / 进行分隔. / 左边是位置  / 右边是尺寸
                当连写碰到单独的属性,连写在前,避免样式被层叠
             */
            /* background: pink url(./1.jpg)  10px 30px/100px 50px no-repeat; */
            background: pink url(./1.jpg)  10px 30px/100px 50px ;
            background-repeat: no-repeat;
        }
        /* 
            img和背景图之间的区别:
                1.img:插入图 , 背景图:修饰图
                2.img在页面中占位置,背景图在页面中不占位置
        
        */
        p{
            width: 300px;
            background-color: aqua;
            background-image: url(./1.jpg);
        }
        img{
            vertical-align: bottom;
        }
    </style>

3.列表相关属性

    <style>
        ul{
            /* 取消列表符号 */
            list-style-type: none;
            /* 实心圆 - 默认 */
            list-style-type: disc;
            /* 空心圆 */
            list-style-type: circle;
            /* 实心方块 */
            list-style-type: square;
            /* 数字 */
            list-style-type: decimal;
            /* 0开头的数字 */
            list-style-type: decimal-leading-zero;
            /* 大写罗马数字 */
            list-style-type: upper-roman;
            /* 小写罗马数字 */
            list-style-type: lower-roman;
            /* 大写字母 */
            list-style-type: upper-alpha;
            /* 小写字母 */
            list-style-type: lower-alpha;
        }
        ol{
            /* list-style-type: disc; */
            list-style-image: url(./点.png);
            /* 列表符号在li内容里面 */
            list-style-position: inside;
            /* 列表符号在li内容外面(默认)*/
            list-style-position: outside;
        }
        ol>li{
            background: aqua;
        }
        .first{
            list-style-type: circle;
        }
        /* 给ul/ol添加,修改所有li的状态,给li单独加是修改某一个li的状态 */
    </style>

4.浮动

浮动的特点:

脱标(脱离标准流):标签不在具备原本的特性

1.在页面中不占位置,脱标

2.浮动的标签比标准流的标签高半个层级,能覆盖标签,但是不能覆盖里面的内容

3.浮动找浮动,浮动标签会在一起横向排列

4.让标签具备特殊的显示效果: 一行配列多个可以设置宽高

5.独占一行的标签,前面有浮动的标签,会覆盖独占一行的标签. 独占一行的标签,后面右浮动的标签,不会覆盖独占一行的标签,会在这个标签的下面依次排列

5.浮动案例

<!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;
        }
        ul{
            list-style-type: none;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
            margin: auto;
        }
        li{
            width: 80px;
            height: 50px;
            float: left;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
        li:hover{
            background-color: #008000;
        }
    </style>
</head>
<body>
    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
        <li>新闻4</li>
        <li>新闻5</li>
        <li>新闻6</li>
        <li>新闻7</li>
        <li>新闻8</li>
    </ul>
</body>
</html>

6.盒子模型

    <style>
        div{
            /* 内容区域 */
            width: 180px;
            height: 180px;
            background-color: pink;

            /* 边框 */
            /* 边框粗细 */
            /* border-width: 5px; */
            /* 边框样式 */
            /* 在不设置边框颜色的时候,默认是黑色的 */
            /* 实线 */
            /* border-style: solid; */
            /* 点线 */
            /* border-style: dotted; */
            /* 虚线 */
            /* border-style: dashed; */
            /* 双线 */
            /* border-style: double; */
            /* 边框颜色 */
            /* border-color: red; */
            /* 连写 - 取值不分先后顺序 */
            /* border: 10px solid blue; */
            /* 在不设置边框粗细的时候,默认是1.5 */
            /* border: solid blue; */
            /* 边框 + 方向词(left/right/top/bottom) = 设置单一某个方向的边框 */
            border-top: 10px solid red;
            border-right: 10px dashed blue;
            border-bottom: 10px dotted rgb(0, 255, 34);
            border-left: 10px double aqua;

            /* 
                标签尺寸的初步计算: 
                    宽度:左边框+内容的宽度+右边框
                    高度:上边框+内容的高度+下边框
            */

        }
    </style>