在ccs里，div的滚动条是通过指定 overflow 属性来实现的。 例如，在一个宽度50px和高度50px的div里，滚动条根据内容来自行展示。 <div style="height:50px;width:50px;overflow:auto;background:red;"> 这里有内容这里有内容这里有内容这里有内容这里有内容这里有内容 </div> 最后呈现的是只有竖滚动条。 当div的内容中有无空格的长英文，而我们有没设定强制换行，就会出现横滚动条，例如： <div style="height

CSS中是通过 cursor 属性来设置鼠标样式的。 比如我们在一个 div 上添加了一个点击时间，但是 div 默认的鼠标样式不是点击样式，这种情况就可以通过 div 的 cursor 属性设置鼠标放在 div 上时为点击样式。 cursor 常用属性值： default：默认光标（通常是一个箭头） auto：默认。浏览器设置的光标。 crosshair：光标呈现为十字线。 pointer：光标呈现为指示链接的指针（一只手） move：此光标指示某对象可被移动。 e-resize：此光标指示矩形框的边

div内容水平垂直居中是样式里常需要处理的问题。下面介绍几种方法让div内容水平垂直居中。 1，使用 table-cell 将container的display设置为table，将div的display设置为table-cell。 示例代码： <div id="container" style="display: table;"> <div id="item1" style="display: table-cell; vertical-align:middle; text-align: center;"

先看如下CSS代码： display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 使用 overflow: hidden 会导致元素的高度增加，去掉 overflow: hidden 后不能实现省略号 原因是 overflow：hidden 和 display: inline-block 一起使用时会造成baseline的移动 只需给元素添加 vertical-align: bottom;

css样式定义如下： a{vertical-align: middle; } a>img{width: 1rem; height: 1rem;} a>span{vertical-align: bottom;} html代码如下： <a href="/"><img src="/hello.jpg"/><span>你好</span></a> css样式的重点是 a 元素的 vertical-align: middle; span 元素的 vertical-align: bottom; 为什么span元素要使

div{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; //多余的内容显示为省略号 }

直接上示例代码（通过定位来解决这个问题） id为v2的div直接覆盖到id为v1的div上。 其中v1重要的style是 “float: right;” v2重要的style是 “position: absolute; z-index: 1;” <div> <div id="v1" style="float: right; width: 100%; padding:0 0 0 5rem; margin: 0;"></div> <div id="v2" style="width: 4rem; height

在bootstrap中，如果使用如下代码： <div class="container sticky-top"> <!-- 要吸顶的内容 --> </div> 吸顶效果会失败，需将 container 置于 sticky-top 父元素中，修改成以下代码，吸顶效果成功： <div class="container"> <div class="sticky-top"> <!-- 要吸顶的内容 --> </div> </div>

display 属性用于定义建立布局时元素生成的显示框类型。 语法： display: value; 属性值（display 默认的属性值是 inline） none： 此元素不会被显示。 block： 此元素将显示为块级元素，此元素前后会带有换行符。 inline： 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block： 行内块元素。（CSS2.1 新增的值） list-item： 此元素会作为列表显示。 run-in： 此元素会根据上下文作为块级元素或内联元素显示。 com

DIV可以通过 box-shadow 属性可以设置阴影效果。 box-shadow语法： box-shadow: h-shadow v-shadow blur spread color inset 语法说明： h-shadow： 必需的。⽔平阴影的位置。允许负值 v-shadow： 必需的。垂直阴影的位置。允许负值 blur： 可选。模糊距离 spread： 可选。阴影的⼤⼩ color： 可选。阴影的颜⾊。 inset： 可选。从外层的阴影（开始时）改变阴影内侧阴影 设置示例（给一个置顶高度宽度的黄色