常用css样式

最新推荐文章于 2024-03-08 14:14:04 发布

if时光重来

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量157

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/admin_web/article/details/95989926

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

flex 弹性盒子

定义: display: flex;
排版:flex-direction: row;
属性介绍:
row 水平方向(默认)
row-reverse 与 row 相同，但是以相反的顺序。
column 垂直方向
column-reverse 与 column 相同，但是以相反的顺序。

行高相等 align-item:center;

使文本不换行，超出部分隐藏

/单行溢出/
.one-txt-cut{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
/多行溢出手机端使用/
.txt-cut{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

文章间距、距离边框的距离

设置字体距离边框的距离 text-indent: 0px;

设置字体间的行间距: letter-spacing: 0px;

设置字体竖间距: line-height: 20px; //初试为20px

文本换行与不换行

强制换行

  1、word-break: break-all;       只对英文起作用，以字母作为换行依据。

  2、word-wrap: break-word;   只对英文起作用，以单词作为换行依据。

  3、white-space: pre-wrap;     只对中文起作用，强制换行。

禁止换行

  white-space:nowrap;

   overflow:hidden;

   text-overflow:ellipsis;

div在页面垂直居中

参考博客:https://blog.csdn.net/mcyang0929/article/details/78852887

<style>
        body,html{
            width: 100%;
            height: 100%;
            background:url('../../image/invite/bg.png') no-repeat; 
            background-size: 100% 100%;
        }
        .cont-box{
            position: absolute;            
            top:50%;            
            left:50%;            
            width:100%;            
            transform:translate(-50%,-50%);            
            text-align: center;          
        }
        .cont-box img{
            width: 100%;
        }
    </style>
<body>
    <div class="cont-box">
        <img src="../../image/invite/box.png">
    </div>
</body>

div页面垂直居中

#hezi {
    position:absolute;
    left:50%;
    top: 50%;
}
.s_cell {
    float:left;
    position:relative;
    right:50%;
    bottom: 50%;
    background: red;
}

<div id="hezi">
	<div class="s_cell">
		<span class="font_style">浮动元素内容1浮动元素内容1浮动元素内容1浮动元素内容1</span>
	</div>
</div>

if时光重来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用css样式

flex 弹性盒子定义: display: flex;排版:flex-direction: row;属性介绍:row 水平方向(默认)row-reverse 与 row 相同，但是以相反的顺序。column 垂直方向column-reverse 与 column 相同，但是以相反的顺序。使内容排版方式: justify-content: center; /center/left...
复制链接

扫一扫

专栏目录