Python学习第65天（css相关属性）

　　关于背景属性的部分的知识还有很多其他的妙用，比如网页中很多比较多的小标签是如何进行实现的，先看一下演示吧！

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            display: inline-block;
            width:18px;
            height: 20px;
            background-image: url("http://dig.chouti.con/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>
    <span></span>
    <span></span>
</body>
</html>

　　通过使用这个，可以使一个长条图片只显示一部分，然后通过调整background-position: 0 -100px;来调整具体需要显示的是那一部分

　　然后接着是文本属性，类似于word中的段落

　　font-size: 10px;

　　text-align: center; 横向排列

　　line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

　　vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


　　text-indent: 150px; 首行缩进
　　letter-spacing: 10px;
　　word-spacing: 20px;
　　text-transform: capitalize;

　　　　没注明的好像已经忘记了，下次用之前可以测试一下，这样可能记得更清楚一些

　　测试案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer .item {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="item" style="vertical-align: top">ll
        </div>
        <div class="item">
        </div>
    </div>
    <script>
    </script>
</body>
</html>

　　然后是图形的边框属性：

　　　　border-style: solid;

   　　　border-color: chartreuse; 　　　　

　　　　border-width: 20px; 
　　　　　　简写：border: 30px rebeccapurple solid;
　　
　　关于列表的属性，这些都不是很重要，使用的时候进行测试就好，不然是肯定记不住的
　　ul,ol{   list-style: decimal-leading-zero;
         list-style: none; <br>         list-style: circle;
         list-style: upper-alpha;
         list-style: disc; }
 
　　接下来是非常重要的display属性
　　display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
　　关于其中的inline-block　　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            display: inline-block;
            background-color: #2459a2;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<a>111</a>
<a>222</a>
<a>333</a>

</body>
</html>

inline-block默认的空格符就是标签与标签之间的空隙造成的。

　　(1) 我们可以通过margin:-3px来解决，但是

　　1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了

　　2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！

　　(2)我们可以给几个标签加一个父级div，然后：

　　　　　　div{word-spacing: -5px;}

 

这个东西的引入合理的解决了内联和块级标签各自的固有属性限制，技能像块级标间一样设置长宽，也可以和内联标签一样分享同一行，很多网页选项文头就是这么实现的。

　　the end

 

 
posted @ 2020-04-28 00:28  崆峒山肖大侠  阅读(188)  评论(0)  编辑  收藏  举报