Css常用小技巧

css css 滚动条

发布时间 : 2023-07-24 10:37

阅读 :

隐藏滚动条,但是可以滚动
隐藏列表多余边距
flex 布局

隐藏滚动条,但是可以滚动

.hideScrollbar::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

.hideScrollbar {
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
}

/* 容器样式 */
.wrap{width: 300px; height: 500px; background: #eee;}
.wrap p{height: 1000px; width: 260px; background: #ccc;}

<div class="wrap hideScrollbar">
    <p>可以滚动的</p>
</div>

隐藏列表多余边距

html,body{padding: 0; margin: 0;}
.clear {clear: both;}
.clearfix::after {clear: both; content: ""; display: block; height: 0;}
.clearfix { zoom: 1;}
.wrap{width: 1200px; margin: 0 auto; background: #eee; min-height: 500px; margin-top: 180px; overflow: hidden;}

.wrap .box{width: 1300px; background: #ddd;}
.wrap .box div{width: 290px; height: 200px; background: #ccc; float: left; margin-right: 13px; margin-bottom: 13px;}

<div class="wrap">
    <div class="box clearfix">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
</div>

flex 布局

当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失

flex-direction: 决定主轴的方向(即项目的排列方向)

row: 默认主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向,起点在右端
column: 主轴为垂直方向,起点在上沿
column-reverse: 主轴为垂直方向，起点在下沿

flex-wrap: 决定容器内项目是否可换行

nowrap: 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行
wrap: 项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse: 换行，第一行在下方

flex-flow: flex-direction 和 flex-wrap 的简写形式, 没什么用,分开写就好

justify-content: 定义了项目在主轴的对齐方式

flex-start: 默认,左对齐
flex-end: 右对齐
center: 居中
space-between: 两端对齐，项目之间的间隔相等，即剩余空间等分成间隙
space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍

align-items: 定义了项目在交叉轴上的对齐方式

flex-start: 交叉轴的起点对齐
flex-end: 交叉轴的终点对齐
center: 交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch: 默认值为 stretch 即如果项目未设置高度或者设为 auto,将占满整个容器的高度

align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

flex-start: 轴线全部在交叉轴上的起点对齐
flex-end: 轴线全部在交叉轴上的终点对齐
center: 轴线全部在交叉轴上的中间对齐
space-between: 轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
space-around: 每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍
stretch: 默认值为 stretch,三条轴线平分容器的垂直方向上的空间

html,body{padding: 0; margin: 0;}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{
border: 0;font: inherit;vertical-align: baseline;text-align: left;font-family: "PingFang SC", "Microsoft YaHei", sans-serif;margin: 0;padding: 0;}
.clear {clear: both;}
.clearfix::after {clear: both; content: ""; display: block; height: 0;}
.clearfix { zoom: 1;}
.wrap{width: 1200px; margin: 0 auto; background: #efefef; min-height: 500px; margin-top: 60px; overflow: hidden;}

.wrap p{font-size: 14px; color: #666; padding: 5px 10px;}

/* flex布局样式 */
.wrap .box{width: 100%; display: -webkit-flex; /* Safari */ display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; background: #ddd;}
.wrap .box div{width: 290px; height: 200px; background: #ccc; float: left; margin-bottom: 13px;}

<div class="wrap">
    <div class="box">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
</div>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 [email protected]