如何在点文字时也选中复选框或单选框？

效果如下：

代码如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head><meta charset="utf-8"/><title>CSS 技巧</title><style></style>
</head>
<body><div><p>方式一：所有主流浏览器都支持：label 的 for 属性值与 input 的 id 属性值一致</p><input type="checkbox" id="chk1" name="check1"/><label for="chk1">选项一</label><input type="checkbox" id="chk2" name="check2"/><label for="chk2">选项二</label><input type="radio" id="rad11" name="rad1"/><label for="rad11">选项一</label><input type="radio" id="rad12" name="rad1"/><label for="rad12">选项二</label><hr/><p>方式二：相比方法1更简洁，但IE6及更早浏览器不支持<br>label 标签直接包含 input标签</p><label><input type="checkbox" name="check1"/>选项一</label><label><input type="checkbox" name="check2"/>选项二</label><label><input type="radio" name="rad2"/>选项一</label><label><input type="radio" name="rad2"/>选项二</label></div>
</body>
</html>

如何让单行文本在容器内垂直居中？

只需设置文本的行高等于容器的高度即可，当容器高度为绝对值时有效，如果容器高度为相对值，则无效。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head><meta charset="utf-8"/><title>CSS 技巧</title><style>p {width: 250px;height: 40px;background-color: #f0ad4e;color: white;/**行高于容器高度一致*/line-height: 40px;}</style>
</head>
<body>
<div><p>万里长城</p>
</div>
</body>
</html>

如何使文本溢出边界显示为省略号？

首先需设置将文本强制在一行内显示(white-space:nowrap)，然后将溢出的文本通过 overflow:hidden 截断，并以 text-overflow:ellipsis 方式将截断的文本显示为省略号。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head><meta charset="utf-8"/><title>CSS 技巧</title><style>#test {background-color: #f0ad4e;color: white;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body>
<div><p id="test">万里长城永不倒</p>
</div>
</body>
</html>

如何设置内联元素的宽高？

要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head><meta charset="utf-8"/><title>CSS 技巧</title><style>div {width: 600px;height: 200px;background-color: #204d74;color: white;}#span1 {background-color: #f0ad4e;/*如果仍然想要 span 保持内联属性，则使用inline-block；如果直接想用块状属性，则使用 block */display: inline-block;width: 60px;}#span2 {background-color: #46b8da;display: inline-block;width: 60px;}</style>
</head>
<body>
<div><span id="span1">万里长城永不倒</span><span id="span2">千里长江水滔滔</span>
</div>
</body>
</html>

CSS 常用开发技巧相关推荐

RISC-V IDE MRS使用笔记(七) ：常用开发技巧汇总
RISC-V IDE MRS使用笔记(七) :常用开发技巧汇总 Q1: MRS调试时如何查看外设寄存器内容? A1: 在调试配置界面添加相应的.svd文件. Q2: MRS如何调用数学库? A2: # ...
Go 学习笔记（83）— 编码规范及常用开发技巧
UBER 开源的 Go 语言开发规范 1. 规范指南 1.1 包名 package 的命名应该遵循如下原则: 只由小写字母组成.不包含大写字母和下划线等字符: 简短并包含一定的上下文信息.例如 tim ...
CSS常用样式技巧（一）
大佬博客功能参考:https://www.lvyueyang.top/#/article/5cb071f14c78846e1132c517 一.单行或多行文本添加省略号 (1)两个div,纵向排列,垂 ...
常用开发技巧系列（三）
热更新衍生出来的问题: 前两天都在说iOS热更新的问题,结果今天就撞枪口上了,真的!审核被拒了,当然这并不是在我自己的项目使用了什么RN,或者JSPath等的问题,是个推!!在热更新出来的第一时间,高 ...
灵活运用CSS开发技巧
「链接和长图失效,请大家点击阅读原文查看详情」前言何为技巧,意指表现在文学.工艺.体育等方面的巧妙技能.代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步. ...
DELPHI基础开发技巧
◇[DELPHI]网络邻居复制文件 uses shellapi; copyfile(pchar('newfile.txt'),pchar('//computername/direction/targe ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
微信小程序-常用API开发技巧学习笔记
常用API开发技巧学习笔记第一章认识微信小程序前后端分离的开发方式小程序的特点小程序对开发者的影响学习小程序需要的基础第二章小程序环境搭建与开发工具介绍小程序开发环境没有小程序号对 ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
Expression Blend实战开发技巧第四章从最常用ButtonStyle开始 - PathButton
本文来自烤地瓜的博客,原文地址:http://www.cnblogs.com/kaodigua/archive/2011/02/15/1955472.html [全面解禁!真正的Expressio ...

CSS 常用开发技巧

如何在点文字时也选中复选框或单选框？

如何让单行文本在容器内垂直居中？

如何使文本溢出边界显示为省略号？

如何设置内联元素的宽高？

CSS 常用开发技巧相关推荐

最新文章

热门文章