CSS中的非布局样式

简介: 《前端基础》

前言

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

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

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

边框

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

文字换行

  • ovferflow-wrap:通用的属性。用来说明当一个不能被分开的字符串(单词)太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。
  • word-break:指定了怎样在单词内断行。这里涉及到CJK(中文/日文/韩文)的文字换行。
  • white-space:空白处是否换行。

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

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

CSS Hack

  • CSS Hack 的方式:不合法但可以生效的写法。
  • 可以用来解决一些浏览器的兼容性问题。
  • 缺点:难理解、难维护、易失效(比如浏览器升级后,hack可能会失效)。
  • 替代方案:特性检测。
  • 替代方案:针对性加 class

CSS 效果

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

  • box-shadow:盒子的阴影
  • text-shadow:文本的阴影
  • border-radius
  • background
  • clip-path
相关文章
|
2月前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
8天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
28天前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发 JavaScript UED
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
239 1
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
2月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
71 2
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
64 4