CSS总结4（CSS元素显示模式、行高、CSS背景）_css样式中间区域(表单)颜色行高背景-优快云博客

本文链接：https://blog.youkuaiyun.com/lzwlm53/article/details/112994175

CSS元素显示模式：可以更好地布局网页；

块级元素：p div ul li ol h
行内元素：a strong b em i del s ins u span

块级元素：

独占一行；
高度宽度可以设置；
宽度默认是body；
是一个容器，可以放行内元素和块级元素；
文字类元素不能放块级元素，p与h不可以放div

行内元素：

相邻行内元素在一行；
高宽设置无效；默认宽度就是本身内容宽度
行内只能容纳文本或其他行内元素；
链接中不能放链接

行内块元素：

一行可放多个行内块元素；
可设置宽高，宽度默认本身内容；

元素显示模式转换：

如想要增加链接a的触发范围
转换为块：display:block;
转换为行内：display:inline;
转换为行内块：display:inline-block;

<!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>
        a {
            display: block;
            background-color: #55585a;
            width: 230px;
            height: 40px;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        
        a:hover {
            background-color: coral;
        }
        
        div {
            background-image: url(123.jpg);
            width: 3000px;
            height: 3000px;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <a href="# ">手机 电话卡</a>
    <a href="# ">电视 盒子</a>
    <a href="# ">笔记本 平板</a>
    <a href="# ">出行 穿戴</a>
    <a href="# ">智能 路由器</a>
    <a href="# ">健康 儿童</a>
    <a href="# ">耳机 音响</a>
    <div>

    </div>
</body>

</html>

文字行高若想要等于盒子高度（文字在盒子内垂直居中）：line-height=行高

行高=上空隙+文字本身+下空隙；

CSS背景：

1.背景颜色background-color：transparent | color；
2.背景图片background-image： none | URL（）；
3.背景平铺back-repeat：repeat | no-repeat | repeat-x | repeat-y ；
4.ds 背景图片位置background-position：length；position；
如参数是方位名词，前后值顺序无关，只写一个另一个默认居中显示；
如参数是精确单位，如只能指定一个，另一个也默认居中
如是混合单位，则是有顺序的。
5.背景图像固定background-attachment：scroll | fixed；是否固定或随着页面的其余部分滚动；
背景色半透明：background：rgba(0,0,0,0.3)
背景复合写法：（顺序无要求，空格隔开）

<!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 {
            background-image: url(123.jpg);
            width: 3000px;
            height: 3000px;
            background-repeat: no-repeat;
            /* background-position: center top; */
            /* 方位名词顺序无关 */
            background-position: 20px 50px;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>