美文网首页
css常见问题自用

css常见问题自用

作者: Felicity0512 | 来源:发表于2019-05-23 12:30 被阅读0次

内容居中

.main{
  display: flex;
  justify-content: center;
  align-items: center;
}

flex实现上下居中,最简单。

背景图片自适应,宽度100%还是高度100%。

html,
body{
  width: 100%;
  height: 100%;
}
body{
  margin: 0;
  background: url("../images/bg.jpg") no-repeat center center / 100% auto;
}
@media screen and (max-aspect-ratio: 1920/1080) { 
  body{
    background-size: auto 100%;
  }
}

1920/1080是背景图片的宽高比

清除浮动

.clearfix:after{
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size:0;
}

我最喜欢用的方法

文本超出隐藏

超出部分显示省略号

单行文本的溢出

p{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

多行文本的溢出

p{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

相关文章

  • css常见问题自用

    内容居中 flex实现上下居中,最简单。 背景图片自适应,宽度100%还是高度100%。 1920/1080是背景...

  • 自用css

  • CSS技巧(自用)

    背景图片铺满屏幕 文字渐变色 实现方法:利用css的background-clip和text-fill-color...

  • CSS Syntax(CSS 语法)

    简单介绍CSS,学习入门自用=-= 以下笔记摘抄全部来自优达学城,感谢优达让我入门。 什么是CSS CSS即层叠样...

  • vue-cli 3 build 之后样式加载不出来

    常见问题 1、开发时css热更新失效 这是因为在 vue.config.js 开启如下配置导致 css:{extr...

  • 2019前端经典面试题 CSS 部分常见问题

    CSS部分常见问题 1、CSS3选择器有哪些? 答:属性选择器、伪类选择器、伪元素选择器。 2、CSS3新特性有哪...

  • 留白液的测评和常见问题

    ​​​Hello,我是10,这是一篇关于自用留白液测评和常见问题的总结。更多关于水彩工具的测评大家可以在主页搜索。...

  • CSS进化之路

    css开发常见问题 CSS解决的是为HTML内容添加样式。那么关键是1.快速为页面内容添加样式2.响应UI需求变化...

  • css常见问题

    1. CSS 中 inline 元素可以设置 padding 和 margin 吗? 行内元素设置width,he...

  • CSS常见问题

    body和html的区别 关于body和html - 简书 1,html元素的宽与高取决于浏览器的宽高。html元...

网友评论

      本文标题:css常见问题自用

      本文链接:https://www.haomeiwen.com/subject/ryyvzqtx.html