CSS 开发技巧 - 爱码网

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

效果如下：

CSS 开发技巧

代码如下：

<!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>