前端CSS使用随笔
时间:2021-09-08
本文章向大家介绍前端CSS使用随笔,主要包括前端CSS使用随笔使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 设置table隔行变色
/*设置奇数行颜色*/ table tr:nth-child(odd) { background: #ccc; } /*设置偶数行颜色*/ table tr:nth-child(even) { background: #ccc; }
2. html保留文本中的空格以及换行
white-space属性:用来定义元素内的空白该如何处理
- normal:忽略多余的空白,元素内如果有多个空格在一起或换行符(回车键),浏览器会把其看作一个空格来处理,不会影响自动换行(就是元素内容过长,在一行上显示不完,会从下一行开始);
- pre:保留空白或换行符(回车键)。输入几个空格,浏览器显示的时候就是几个空格,其实就是原样输出,如果有换行符,换行符后的内容会从下一行开始。其行为方式和html中的</pre>标签类似。会影响自动换行(就是元素内容过长,不会从下一行开始,会冲出元素的边界显示);
- nowrap:元素内文本如果有多个空格在一起或换行符,浏览器只会显示一个空格;元素文本内容不会自动换行,只有遇到</br>标签才会换行。
- pre-wrap:和nowrap相反,元素内的空格不管有多少个都会原样显示,如果有换行符,换行符后的内容会从下一行开始;会自动换行,就是元素内容在一行中显示不完会从下一行开始;
- pre-line:合并空白符序列,保留换行符。就是多个空格会被浏览器看作一个空格来处理,如果有换行符(回车键),换行符后的内容会从下一行开始,不会影响自动换行;
- inherit:从父元素继承white-space属性的值,就是父元素的white-space属性的值是什么,该元素的white-space属性值就是什么
原文地址:https://www.cnblogs.com/zhaoyl9/p/15243432.html
- HLS Lesson20-实例分析
- WannaCry勒索病毒详细解读
- matlab GUI基础3
- 不使用反射的实体类方案
- matlab GUI基础1
- Why to do,What to do,Where to do 与 Lambda表达式!
- Cloak ; Dagger攻击:一种可针对所有版本Android的攻击技术(含演示视频)
- 实例探究字符编码:unicode,utf-8,default,gb2312 的区别
- 分布式计算,WCF+JSON+实体对象与WebService+DataSet效率大比拼
- 【自然框架】 页面里的父类—— 改进和想法、解释
- 线性神经网络
- 【数据可视化】深度解析大数据可视化设计案例分析
- 使用IE6看老赵的博客——比较完美版(可以在线查看、回复)
- 【Python环境】R vs Python:硬碰硬的数据分析
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Kubernetes之helm部署使用
- 想掌握 Binder 机制?驱动核心源码详解和Binder超系统学习资源,想学不会都难!
- leetcode链表之回文链表
- Docsify 安装
- Docsify 初始化文件夹
- ELK 日志系统集成 Skywalking 调用链 ID
- ChartCenter ——为您的K8s之旅保驾护航v
- leetcode链表之删除链表的节点
- iOS打包的那一些事情
- 腾讯云服务器(CentOS 7、Tencent Linux)手动搭建LNMP环境(linux+Nginx+Mariadb+PHP)
- iOS技术面试题及答案
- 虽然现在有可以去码的软件了,可视频是如何自动跟踪打码的?
- 2020-09-12:手撕代码:最小公倍数,复杂度多少?
- Mac App推荐
- 美团面试问ThreadLocal,学妹一口气给他说了四种!