• css进阶 01-CSS中的非布局样式


    01-CSS中的非布局样式

    #前言

    CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括:

    • 字体、字重、颜色、大小、行高
    • 背景、边框
    • 滚动、换行
    • 装饰性属性(粗体、斜体、下划线)等。

    这篇文章,我们来对上面的部分样式做一个回顾。

    #边框

    如何用边框画一个三角形?详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。

    #文字换行

    • ovferflow-wrap:通用的属性。用来说明当一个不能被分开的字符串(单词)太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

    • word-break:指定了怎样在单词内断行。这里涉及到CJK(中文/日文/韩文)的文字换行。

    • white-space:空白处是否换行。

    上面这三个 css 属性进行组合,可以设置各种不同的属性。

    当然,如果想让一段很长的文本不换行,可以直接设置white-space: nowrap 这一个属性即可。

    #CSS Hack

    • CSS Hack 的方式:不合法但可以生效的写法。

    • 可以用来解决一些浏览器的兼容性问题。

    • 缺点:难理解、难维护、易失效(比如浏览器升级后,hack可能会失效)。

    • 替代方案:特性检测。

    • 替代方案:针对性加 class

    #CSS 效果

    我们可以利用 CSS 实现各种效果,常见的效果属性有:

    • box-shadow:盒子的阴影

    • text-shadow:文本的阴影

    • border-radius

    • background

    • clip-path

  • 相关阅读:
    BigDecimal 的用法
    奇葩问题:Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey
    论文速览:MFQE 2.0: A New Approach for Multi-frame Quality Enhancement on Compressed Video
    博文目录
    【DEBUG】ImportError: No module named 'pygal'
    反直觉的三门问题
    一些卷积概念和图解
    MATLAB随手记
    Python3随手记
    论文写作随手记
  • 原文地址:https://www.cnblogs.com/yzy521/p/14132768.html
Copyright © 2020-2023  润新知