CSS基础应用总结

目录

• CSS 样式笔记
  • 文字水平居中和垂直居中
  • 如何设置a标签不带下划线
  • 控件右对齐
  • div上下居中
  • 控件左右居中
  • 控件展示在同一行
  • 设置文字超出部分...显示

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单位亦可行
 }