首页 > Web开发 > 详细

CSS基础应用总结

时间:2020-01-12 21:09:33      阅读:96      评论:0      收藏:0      [点我收藏+]

CSS 样式笔记

文字水平居中和垂直居中

  • 水平居中:在该文字的div设置:text-align: center;
  • 垂直居中:在该文字的div设置:line-height: 60px; 其中60px为该div的高度

如何设置a标签不带下划线

a {
  text-decoration: none;
}

控件右对齐

float: right;

div上下居中

height: 50px;
line-height: 50px

设置line-height的值和div的高一致

控件左右居中

margin: 0 auto;

控件展示在同一行

display: inline-block

设置文字超出部分...显示

多行文本

p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 可以显示的行数,超出部分用...表示*/
    -webkit-box-orient: vertical;
}

单行文本

div1{
         overflow: hidden;    
    text-overflow: ellipsis;    //超出部分以省略号显示
    white-space: nowrap;
    width: 20em;    //用px单位亦可行
 }

CSS基础应用总结

原文:https://www.cnblogs.com/DeaconOne/p/12184560.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!