css学习

-相知-

于 2021-07-31 13:55:49 发布

阅读量43

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_53121836/article/details/119274131

版权

html元素一般分为块元素和行内元素两种

块级元素的特点︰
1.比较霸道，自己独占一行。
2.高度，宽度、外边距以及内边距都可以控制。
3.宽度默认是容器（父级宽度)的100%。
4.是一个容器及盒子，里面可以放行内或者块级元素。
5.文字类元素里不能套块元素
例如：p标签里不能放div
行内元素的特点：
1.相邻行内元素在一行上，一行可以显示多个。
2.高、宽直接设置是无效的。
3.默认宽度就是它本身内容的宽度。
4.行内元素只能容纳文本或其他行内元素。
行内块元素的特点:
1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙一行可以显示多个 (行内元素特点)。
2.默认宽度就是它本身内容的宽度（行内元素特点）。
3.高度，行高、外边距以及内边距都可以控制(块级元素特点)。
转换为块级元素:display:block
转换为行元素:display:inline
转换为行内元素:dislpay:inline-block

        /* 把行内元素a转换成块级元素 display:block */
        a {
            width: 200px;
            height: 200px;
            background-color: green;
            display: block;
        }

        span {
            width: 2000px;
            height: 2000px;
            background-color: indianred;
            display: inline-block;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <!-- <a href="#11">中国夺冠</a>
    <a href="#">中国力</a>
    <a href="#">女排</a> -->
    <a href="#">somebody</a>
    <span>行内元素转换成行内块元素</span>
</body>

链接部分

        a:link {
            color: #333;
            text-decoration: none;
        }

        /* a:visited 选择已经被访问过的链接 */
        a:visited {
            color: green;
        }

        /* a:hover当鼠标经过时的链接更换颜色 */
        a:hover {
            color: skyblue;
        }

        /* a:active当鼠标按下去还没弹起时 */
        a:active {
            color: red;
        }

        input:focus {
            background-color: pink;
        }

在这里插入图片描述

       /* transparent透明 */
        div {
            width: 2000px;
            height: 2000px;
            /* background-color: blue; */
            background-image: url(image/贝贝.png);
            /* background-repeat: no-repeat;不平铺，默认是平铺的 */
            /* 沿着x轴平铺 */
            /* background-repeat: repeat-x; */
            /* 沿着y轴平铺 */
            /* background-repeat: repeat-y; */
            /* 背景图片的位置background-position: 0 0; */
            /* 方位名词right center和center right是等价的 */
            /* 如果省略第二个的参数，则第二个参数默认为居中 */

            /* 2。如果是精确单位，第一个一定是x，第二个一定是y */
            /* 如果只指定一个数值，这个数值一定是x的，剩下那个默认为y居中 */
            /* 也可以用混合单位，但一定是有顺序的，第一个是x，第二个是y */

            background-attachment: scroll;
            /* scroll背景图像随对象滚动，fixed背景图像固定，默认的是滚动的 */

            /* 背景复合写法 */
            /* background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; */
            background: blue url(image/贝贝.png) no-repeat fixed top center;

            背景颜色半透明background: rgba(红, 绿, 蓝, 透明度, );
    </style>
</head>

<body>
    <div></div>

五彩页面

    <style>
        .nav a {
            display: inline-block;
            width: 120px;
            height: 60px;
            background-color: pink;
            text-align: center;
            text-decoration: none;
            line-height: 60px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="">五彩导航</a><a href="">五彩导航</a><a href="">五彩导航</a><a href="">五彩导航</a><a href="">五彩导航</a>

    </div>

-相知-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

html元素一般分为块元素和行内元素两种块级元素的特点︰1.比较霸道，自己独占一行。2.高度，宽度、外边距以及内边距都可以控制。3.宽度默认是容器（父级宽度)的100%。4.是一个容器及盒子，里面可以放行内或者块级元素。5.文字类元素里不能套块元素例如：p标签里不能放div行内元素的特点：1.相邻行内元素在一行上，一行可以显示多个。2.高、宽直接设置是无效的。3.默认宽度就是它本身内容的宽度。4.行内元素只能容纳文本或其他行内元素。行内块元素的特点:1.和相邻行内元素(行内块)
复制链接

扫一扫