Questions tagged «css»

CSS(层叠样式表)是一种表示样式表语言,用于描述HTML(超文本标记语言),XML(可扩展标记语言)文档和SVG元素的外观和格式,包括(但不限于)颜色,布局,字体,和动画。它还描述了如何在屏幕,纸张,语音或其他媒体上呈现元素。

2
边框半径,以百分比(%)和像素(px)或em为单位
如果我使用像素或em值作为边界半径,则即使该值大于元素的最大边,其边缘半径也始终是圆弧或药丸形状。 当我使用百分比时,边缘半径为椭圆形,开始于元素各边的中间,从而形成椭圆形或椭圆形: 边框半径的像素值: 显示代码段 div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> 运行代码段隐藏结果展开摘要 边界半径的百分比值: 显示代码段 div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> 运行代码段隐藏结果展开摘要 为什么以百分比表示的边框半径与以像素或em值设置的边框半径不一样?
124 css  css-shapes 

3
:first-child和:first-of-type有什么区别?
我不能告诉之间的区别element:first-child和element:first-of-type 例如说,您有一个div div:first-child → <div>作为其父级的第一个孩子的所有元素。 div:first-of-type →所有<div>元素都是<div>其父元素的第一个元素。 这似乎完全一样,但是它们的工作方式不同。 有人可以解释一下吗?
124 css  css-selectors 

12
Bootstrap 4更改汉堡包切换颜色
我有一个引导网站,当屏幕尺寸小于992px时,会添加汉堡包切换器。代码如下: <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> 可以更改汉堡切换按钮的颜色吗?

2
如何使用jQuery仅删除一个样式属性
我有这个属性的股利style="-moz-user-select:none; position:static !important;"。我需要-moz-user-select 使用$(selector).css()删除Tried,但我不知道要设置什么值,因为它是“ none”。
123 jquery  css 

7
如何在CSS中的图像上放置文本
如何在CSS中将文本居中放置在图像上? <div class="image"> <img src="sample.png"/> <div class="text"> <h2>Some text</h2> </div> </div> 我想做类似下面的事情,但是我遇到了困难,这是我目前的CSS <style> .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; } </style> 当我使用背景图像时,我没有从html2pdf获得任何输出: <style> #image_container{ width: 1000px; height: 700px; background-image:url('switch.png'); } </style> <a href="prints.php">Print</a> <?php …
123 html  css 

8
您使用哪种HTML5重置CSS,为什么?[关闭]
已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗?更新问题,以便通过编辑此帖子以事实和引用的形式回答。 5年前关闭。 改善这个问题 您使用哪种HTML5重置CSS,为什么?有没有发现涉及更多案例的案例? 我已经开始使用HTML5 Doctor's:http : //html5doctor.com/html-5-reset-stylesheet/似乎可行,但是我想知道是否还有更好的方法。
123 css  html  css-reset 

5
Sass的图像路径中有变量吗?
我想要一个包含CSS文件中所有图像的根路径的变量。我不太确定这是否可以在纯Sass中实现(实际的Web项目不是RoR,因此不能使用asset_pipeline或任何花哨的爵士乐)。 这是我的示例不起作用。进行编译时,它会在后台url属性中的变量("Invalid CSS after "..site/background": expected ")")的第一个实例处执行操作。 定义函数以返回路径: //Vars $assetPath : "/assets/images"; //Functions @function get-path-to-assets($assetPath){ @return $assetPath; } 使用功能: body { margin: 0 auto; background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0; width: 100%; } 任何帮助,将不胜感激。
123 css  sass 

6
jQuery中width,innerWidth和externalWidth,height,innerHeight和externalHeight之间的区别是什么
我写了一些例子来看看有什么区别,但是它们显示出相同的宽度和高度结果。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var div = $('.test'); var width = div.width(); // 200 px var innerWidth = div.innerWidth(); // 200px var outerWidth = div.outerWidth(); // 200px var height = div.height(); // 150 px var innerHeight = div.innerHeight(); // 150 px var outerHeight = div.outerHeight(); …
123 javascript  jquery  css  dom  styles 

3
获取CSS最高值作为数字而不是字符串?
在jQuery中,您可以将相对于父对象的最高位置作为一个数字来获取,但是如果将css top值设置为,则无法将其作为一个数字来获取px。 说我有以下几点: #elem{ position:relative; top:10px; } <div> Bla text bla this takes op vertical space.... <div id='elem'>bla</div> </div> $('#elem').position().top; //Returns the number (10+(the vertical space took by the text)) $('#elem').css('top'); //Returns the string '10px' 但是我想将css top属性作为数字10。 一个人将如何实现这一目标?
123 javascript  jquery  css 

10
如何在自举流体布局中底部对齐网格元素
我使用Twitter的引导程序进行了流畅的布局,其中我有一排两列。第一列有很多内容,我想正常填充范围。第二列只有一个按钮和一些文本,我想相对于第一列中的单元格底部对齐。 这是我所拥有的: -row-fluid------------------------------------- +-span6----------+ +-span6----------+ | | |short content | | content | +----------------+ | that | | is tall | | | +----------------+ ----------------------------------------------- 这就是我想要的: -row-fluid------------------------------------- +-span6----------+ | | | content | | that | | is tall | +-span6----------+ | | |short content | +----------------+ +----------------+ ----------------------------------------------- 我已经看到了使第一个跨度成为绝对高度并相对于其定位第二跨度的解决方案,但是最好不要指定div的绝对高度的解决方案。我也愿意重新考虑如何实现相同的效果。我不喜欢这种脚手架的使用,对我来说似乎才是最合理的选择。 …

21
使锚点链接位于其链接位置上方一些像素处
我不确定询问/搜索此问题的最佳方法: 当您单击锚点链接时,它将带您到页面的该部分,并且链接到的区域现在位于页面的非常顶部。我希望锚链接将我发送到页面的该部分,但我想在顶部留一些空间。在这种情况下,我不希望它将我发送到“链接到”的零件上,该零件在“非常好”的顶部,我希望在那里有100个像素左右的空间。 这有意义吗?这可能吗? 编辑以显示代码-这只是一个锚标记: <a href="#anchor">Click me!</a> <p id="anchor">I should be 100px below where I currently am!</p>
123 javascript  html  css  anchor 


9
Webkit中CSS的<select>和:after问题
我想在伪造的选择框上添加一些样式:after(以对具有2个部分且没有图像的选择框进行样式设置)。这是HTML: &lt;select name=""&gt; &lt;option value=""&gt;Test&lt;/option&gt; &lt;/select&gt; 而且它不起作用。我不知道为什么,我也没有在W3C规范中找到答案。这是CSS: select { -webkit-appearance: none; background: black; border: none; border-radius: 0; color: white; } select:after { content: " "; display: inline-block; width: 24px; height: 24px; background: blue; } 那么这是正常的还是有把戏?
123 html  css  select 

6
如何在悬停时从名称中删除下划线
我有这样的HTML: &lt;legend class="green-color"&gt;&lt;a name="section1"&gt;Section&lt;/a&gt;&lt;/legend&gt; legend.green-color{ color:green; } 就我而言 Section为例,它看起来是绿色的,但是当我将鼠标指针放在上面时,它看起来就像是href,但是我希望它保持不变,而没有下划线和颜色变化。 是否有可能在不更改CSS的情况下或以最小的CSS cahnge实现? 或以某种方式与jQuery?
123 html  css 

5
如何使溢出的CSS属性与隐藏值一起工作
我很难过overflow: hidden。 基本上,我试图隐藏位于中的无序列表的溢出&lt;div&gt;。 我不知道为什么这不起作用。 它没有隐藏它,而是将我的列表从水平布局拆分为垂直布局。 无序列表是轮播,容器是列表。 下面是我的CSS代码; div.body .container .images { background: url(/images/images-background.jpg); height: 62px; margin-bottom: 17px; width: 384px; } div.body .container .images #images-previous { cursor: pointer; float: left; } div.body .container .images #images-next { cursor: pointer; float: left; } div.body .container .images .list { float: left; overflow: hidden; vertical-align: …
123 css  overflow  html 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.