CSS 问题集锦

【1】让DIV中的内容居中

1、文字垂直居中，关键代码：height:100px;line-height:100px（两个值要相等）

<div style="margin:0 auto;width:50%; border: 1px solid red;height:100px;line-height:100px" >居中</div>

2、让文字横向居中，关键代码：text-align:center

<div style="margin:0 auto;width:50%; border: 1px solid red;height:100px;line-height:100px;text-align:center" >居中</div>

3、让图片垂直水平居中，关键代码：display: table-cell; vertical-align:middle

    <style type="text/css">
        .box {
            /*非IE的主流浏览器识别的垂直居中的方法*/
            display: table-cell;
            vertical-align: middle;
            /*设置水平居中*/
            text-align: center;
            width: 500px;
            height: 300px;
            border: 1px solid red;
        }

            .box img {
                /*设置图片垂直居中*/
                vertical-align: middle;
            }
    </style>

【2】CSS控制文本自动换行

方法一：设置表格宽度为固定值，即给表格一个宽度值（是数值，不是百分比）

方法二：强制不换行

div{
　　/*white-space属性用来设置不换行，normal为其默认值，nowrap表示强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象*/
　　white-space: nowrap;
}

方法三：自动换行

div{
    word-wrap: break-word;
    /* 也可设置 word-break: normal 来达到换行效果 */ 
}

方法四：强制英文单词断行

div{
    word-break: break-all;
}

另外，只要在CSS中定义了如下句子，可保网页不会再被撑开：

table {
    table-layout: fixed;
}

td {
    word-break: break-all;
    word-wrap: break-word;
}

既防止表格或者层撑破又防止单词断裂可使用以下代码：

table {
    table-layout: fixed;
    word-wrap: break-word;
}

div {
    word-wrap: break-word;
}

【3】pointer-events属性值详解

　　上层div设置 pointer-events:none，下面被覆盖的层就可以进行拖动以及点击操作。但操作区域本身却无法操作了，解决办法就是给需要操作的元素区域设置重新设置为 pointer-events:auto

　　具体用法：

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

　　pointer-events属性有很多值，但是对于浏览器来说，只有auto和non两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

　　pointer-events属性值详解：

• auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
• none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
• 其它属性值为SVG专用，这里不再多介绍了。

【4】固顶表格列宽度

语法：
　　table-layout : auto | fixed
取值：
　　auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
　　fixed : 固定布局的算法。在这种算法中，表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性，则表格被呈递的默认宽度为 100% 。

　　设置 table-layout 属性值为 fixed ，有助于提高表格性能。对于长表格效果尤其显著。
　　设置表格行高则可以进一步提高呈递速度，浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。