公开标签 #CSS
HTML中给图片添加阴影一般是通过css的 box-shadow 属性来实现的。 box-shadow至多可以设置6个参数，可以使用一个或多个投影，如果使用多个投影时必须使用逗号","隔开。 box-shadow: h-shadow v-shadow blur spread color inset; 需要注意的是，如果在img标签上直接使用 box-shadow 的 insert 是没有效果的，可以对div等原属使用 insert。 直接在img上添加阴影 img{box-shadow:0 0 20px
两个div并排显示，除了常用的 float 和 table-cell外，还有其他几种方法，分别介绍下使用负margin、绝对定位和flex布局来实现div并排显示。 使用负margin #parent{ display:flex; overflow:hidden; } #div1{ width:50%; height:300px; background:blue; padding-bottom:2000px; margin-bottom:-2000px; } #div2{ width:50%; heig
CSS 最基本的选择器是元素选择器(比如 div)，id 选择器(比如 #id1)，类选择器(比如 .class_name)。 其他不常见的选择器包括伪类选择器 (:hover)，复杂的 CSS3 和正则选择器，比如：first-child，class ^= “grid-”。 CSS 选择器效率从高到低的排序如下 id选择器: #myid 类选择器: .myclassname 标签选择器: div,h1,p 相邻选择器: h1+p 子选择器: ul > li 后代选择器: li a 通配符选择器: *
CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。 注意： 使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。 当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。 使用建议： 一定要优先考虑使用样式规则的优先级来解决问题而不是
全局定义 a 的样式后，在div内部的超链接重新定义了a的样式，div内部a:hover属性失效了。 #全局 a{color:red;} a:hover{color:blue;} div a{color:red;} div a:hover{color:yellow;} 多次调试基本判定是权重的优先级问题导致的。 解决方法就是使用 !important div a{color:red;} div a:hover{color:yellow!important;}
1）将图片转换为块级元素 img{display:block;} 2) 将图片的垂直对齐方式由默认的baseline改为top img{ vertical-align:top} 3) 设置父级的文字大小为0px（img同级元素有文字时该方法无效） font-size:0; 4) 设置父级的属性 overflow:hidden; 5) 取消图片标签和其父级的最后一个结束标签之间的空格 仅供参考，不代表有效
除了常用的 float:left 实现div并排放置，还可以使用 position:absolute 来实现div并排放置。 css完整参考代码如下： <div style="width:200px; margin:0 auto;"> <div id="left_div" style="position:absolute; background-color:blue;"> left content </div> <div id="right_div" style="background-color:re
哇！2023 年对 CSS 来说是重要的一年！ 从 #Interop2023 到 CSS 和界面领域的许多新着陆，开发者曾认为在 Web 平台上无法实现的功能。现在，每个现代浏览器都支持容器查询、subgrid、:has() 选择器以及大量新的颜色空间和函数。Chrome 支持仅支持 CSS 的滚动驱动的动画，并且支持通过视图转换在网页视图之间流畅地添加动画效果。最重要的是，为了改善开发者体验（例如 CSS 嵌套和作用域样式），许多新基元已推出。 今年真是非比寻常的一年！因此，我们希望在这一具有里程碑意
当div中包含长英文单词时，如果长度超过一行的显示宽度，就会导致页面溢出。 这时需要使用css样式来实现长单词的强制换行。 可以通过设置 word-break: break-all; 来实现，例如： <div style="word-break: break-all;">abcdefghijklmnopqrstuvwxyz...abcdefghijklmnopqrstuvwxyz</div>
placeholder 是 input 框中的提示文字，默认颜色是灰色的，color 是修改 input 中用户输入文本的颜色，通过 color 属性不能修改 placeholder 的颜色，要想修改 placeholder 的默认颜色可以使用 CSS 提供的 placeholder（非控件属性）属性。 修改页面所有input中placeholder颜色 将用以下代码写在 style 中，将所有 input 的 placeholder 中文字颜色修改为红色 input::placeholder{ co
加载图片时，如果图片地址不正确或其他原因导致图片无法将加载，使用img里的alt属性可以显示默认文本，但是异常图片显示结果会很难看。这时可以使用 onerror 属性来处理，当图片无法加载时，指定异常处理时加载的图片。 <img src="hello.png" alt="HelloWorld" onerror="javascript:this.src='default.png'"/>
white-space 属性声明建立布局过程中如何处理元素中的空白符。 CSS 语法 white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; normal：默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 pre-wrap：保留空白符序列，但是正常地进行换行。 pre-line：合并空白符
可以通过 auto 属性值来实现图片的等比例自动缩放不变形。 固定宽度，让高度自适应： <img src="image.jpg" style="width: 10rem; height: auto;" /> 固定高度，让宽度自适应： <img src="image.jpg" style="height: 10rem; width: auto;" />
在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