css样式补充及居中总结

—Miss. Z—

已于 2022-10-02 10:45:12 修改

阅读量686

点赞数

分类专栏： HTML5/CSS3 文章标签： html/css

于 2022-10-02 10:43:22 首次发布

本文链接：https://blog.csdn.net/weixin_42071236/article/details/126807252

版权

HTML5/CSS3 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

display:list-item

设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子
元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列(次盒子在前，主盒子在后)

涉及的css：

list-style-type：设置次盒子中内容的类型
list-style-position：设置次盒子相对于主盒子的位置
速写属性list-style

清空次盒子：list-style:none

图片失效时的宽高问题

如果img元素的图片链接无效，img元素的特性和普通行盒一样，无法设置宽高(如果需要设置宽高，可以将其设置为行块盒或者块盒)

行盒中包含行块盒或可替换元素

行盒的高度与它内部的行块盒或可替换元素的高度无关

text-align:justify

text-align:

left: 左对齐
right：右对齐
center：居中
justify：除最后一行外，分散对齐

如果想要最后一行也分散对齐，可以增加一段代码:

p::after{
            content: "";
            display: inline-block;
            width: 100%;
        }

制作一个三角形

direction 和 writing-mode

开始 start -> 结束 end
左 left -> 右 end
开始和结束是相对的，不同国家有不同的习惯，左右是绝对的
direction设置的是开始到结束的方向

writing-mode：设置文字书写方向

滚动条样式

::-webkit-scrollbar——整个滚动条。
::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
::-webkit-scrollbar-track——滚动条轨道。
::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。

div::-webkit-scrollbar{
            width: 20px;
        }
        div::-webkit-scrollbar-track{
            background-color: #999c;
        }
        div::-webkit-scrollbar-thumb{
            background-color: lightgrey;
            background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
            border-radius: 5px;      
          }
          div::-webkit-scrollbar-button{
            background: #ccc;
          }