px、em和ex之间有什么区别？在CSS中定义字体大小时，使用的是px、pt还是em px、em和ex有什么区别 描述CSS中可用的这些长度单位和其他长度单位 在css中定义字体大小时，我是使用px、pt还是em 根据经验，使用屏幕上的百分比和pt进行打印 em：相关字体的字体大小 ex：相关字体的x-height px：相对于查看设备的像素 像素（px）依赖于浏览器。它是您在屏幕上看到的绝对大小 Em有点像百分比Ems指的是基本文本大小。1 em的值与100%的值的含义相同。但你也可以用相反的
但我在挣扎 我的css代码是： #gallery img { width:700px; height:213px; margin:0; padding:0; } #画廊图片{ 宽度：700px； 高度：213像素； 保证金：0； 填充：0； } 所以我想 #gallery img:hover { width:700px; height:213px; position: relative; z-index:10000; background: transpa
这是一篇名为..Responsive Webdesign的文章中介绍的..的代码片段。在本文中，我有两个关于CSS的问题 如果我想在整个网站上使用em，我 了解我需要一个基本字体 大小，然后计算em 目标尺寸/基本尺寸=EM。我需要吗 然后需要设置基本字体大小 在“PX”中，首先在主体中，然后在 上面的代码字体是什么：100%/1.5 什么意思 我的第二个问题是关于 背景属性。。什么是 重复“-20%-146px；”这是什么意思？ 我知道重复：不重复和 重复-y，重复-x，但从未 为此使用了%
我有两个下拉菜单，它们给了我IE7中的问题。我浪费了整个上午来修理它。客户端正在使用IE7监控站点，因此这是最优先考虑的事项 我已经准备好了一个和一个演示。我今天的工作也是为了参考，但是演示中的问题是孤立的。我留下了一些重置css，以防任何相关内容 有两个问题： 最重要的：IE7中的顶部菜单和标题内容存在z索引问题。标题位于下拉列表上方 不太重要：在第一个链接和下拉菜单之间的顶部菜单中有一个小间隙，当鼠标从顶部链接移动到下拉菜单时，该间隙有时会导致下拉菜单消失。这至少在Firefox4和IE7中
我有以下SCSS混入，我可能写了太多多余的东西： @mixin radius($topleft, $topright: $topleft, $bottomright: $topleft, $bottomleft: $topleft) { -moz-border-radius-topleft: $topleft; -moz-border-radius-topright: $topright; -moz-border-radius-bottomright: $
我认为这是不可能的，但我不是CSS专家，所以我想我应该检查一下。我有一个半透明的div绝对位于图像上方。到目前为止还不错，但我想强制我的半透明div尊重它和图像所在的框 <div class="parent"> <div class="title-bar"> /* prolly not important */ <h2>Title</h2> </div> <img src="whatever"/> &
我有X个帖子，每个帖子都有固定的宽度和未知的高度，我希望它们在一个div包装器中有两列。然而，当我把它们都放在左侧浮动时，就会发生这种情况 如何删除空白？制作一个左div容器和一个右div容器，将您的帖子添加到这些容器中，而不是简单地使用浮动：左。尝试在第二个块后添加以下内容： <div style="clear:both"> </div> 它应该做到这一点将clear:right添加到偶数块，clear:left添加到奇数块 <style
我们使用下面的HTML元标记和样式查询来定位iPad/Safari浏览器（与windows/linux浏览器相比，iPad有一些小的变化）： 但是tablet.css文件也被加载到较小的笔记本电脑上（即小于1024px的笔记本电脑），而且在放大较大的屏幕时似乎也会起作用 使用设备宽度并不是区分实际设备/浏览器的好方法，但我在互联网上的所有搜索都表明这是最好的方法 还有其他方法吗？为此，您必须恢复到javascript 您可以使用Modernizer检测触摸事件支持 Modernizr将在标
显然，点（pt）不应该在网络上使用，只能在印刷媒体上使用。像素（px）应该使用，如果你想要一个完美的像素表示你的网站。百分比（%）和ems（em）的工作原理几乎相同，如果您希望您的站点在缩放等操作时具有可伸缩性，则应使用百分比（%）和ems（em） 五分钟前，我编写了这几行代码，并在Chrome、Firefox、Safari、IE和iPhone5上进行了测试 <html> <p style="font-size:16px;">Dette er en test</p&
首先，我要说，我对SVG的世界是全新的。我正在玩一个使用SVG和CSS3动画的简单实验 我在Inkscape中创建了SVG，并将其保存为普通SVG。然后，我将其转换为HTML，以使用一些CSS3动画 正如您从我下面的链接中看到的，整个SVG异常地反弹，可以通过从CSS中删除.arm类来删除。（这将停止具有arm类的单个红色圆圈组） 问题是，我想让红色圆圈组设置动画（旋转），而整个较大的组也在旋转 我可能做错了什么想法或明目张胆的事情？（我确实意识到这不是最好的SVG，但我只是在尝试） 注1：如
我无法用extjs包装标签。我需要动态设置该值，当该值太长时，它会破坏布局（在我的例子中是表布局） 以下是我使用的代码： { xtype: 'label', text: 'Bla bla bla bla bla', labelWidth: 20, //had tried width as well, but no use labelAlign: 'left', autoWidth: false, boxMinWidth: 10, boxMa
我有一个带有背景图像的div。我想在用户悬停div时使用rgba颜色（rgba（0,0,0,0.1））覆盖背景图像 我想知道是否有一个单div解决方案（即不使用多个div，一个用于图像，一个用于颜色，等等） 我尝试了多种方法： 这个CSS： { 背景图片：url（“the-image”）； 利润率：10px； 宽度：200px； 高度：80px； } #测试1：悬停{ 背景色：rgba（0,0,0,0.1）； } #测试2：悬停{ 背景：url（“the-image”）、rgba（0,0,0
HTML 有没有办法用CSS反转p颜色 有颜色：透明为什么不颜色：反转即使在CSS3中？我认为处理这个问题的唯一方法是使用JavaScript 试试这个 如果使用css3执行此操作，则它仅与最新的浏览器版本兼容。将相同颜色的背景添加到段落中，然后使用CSS反转： div{ 背景色：#f00； } p{ 颜色：#f00； -webkit过滤器：倒置（100%）； 过滤器：倒置（100%）； } 倒色 这里有一种不同的方法，使用混合模式：差分，它实际上会反转背景，而不仅仅是单一颜色： div{
当一个元素的宽度不足以显示其文本内容时，有没有一种方法可以使用CSS一次隐藏一个单词（而不是一次隐藏一个字母） 例如，对于以下代码，当浏览器窗口变窄以显示整个句子时，我希望它显示Lorem ipsum dolor sit…而不是Lorem ipsum dolor sit ame… HTML: （我不需要支持旧的浏览器）您可以强制容器与单行文本具有相同的高度，并使用溢出：隐藏隐藏该行下方的任何文本 /*一次隐藏一个单词*/ p、 短{ 高度：18px； 溢出：隐藏；} /*显示省略号“…”*/ p
我已经制作了一个图像滑块，在我尝试将图像制作成链接之前，它可以正常工作。 我试过几种方法，但都遇到了不同的问题 比如当我换衣服的时候 <img src="img/radish.jpg" alt="radish"> 到 然而，该图像不是一个可点击的链接，我再次找到了一种方法，通过添加 .slider li input:checked ~ a{ position: absolute; } 但这样做后，我的标签从滑块底部移动到滑块上方，我不知道如何修复 下面是尝试将图像更改为链接之前的
我需要一个相当复杂的布局。我已经试了几个小时想弄明白这一点，但还是没有运气。我需要一个固定的div旁边的5个流体div 所有流体DIV需要为不同的百分比，但所有6个DIV的组合（1个固定+5个流体）必须等于父DIV的宽度。父DIV的高度将是固定的 以下是我想要的： 但我现在的情况是： 我需要删除空格，这样所有的div组合就可以填充整个框。如果可能的话，我不想使用JS。任何帮助都将不胜感激，谢谢 <div class="parent"> <div class="s1"&g
我有一些特定类的div.box，我想为它们设置一个交替的背景色。但是，一些div被放置在另一个div.内部容器中： <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="inner-container">
基金会5左右支持 有没有人知道有RTL支持的基金会5框架的版本吗？我发现一个是RTL，但它是版本4（）。如果没有5号基金会，手动配置它需要什么？ < P>解释基础的RTL支持如何工作。如果你不使用SASS，你也可以从右到左的支持下载基础。c/p>链接到RTL基金会。CSS。在页面的末尾：“如果你喜欢香草CSS，请使用定制器下载基础和右到左支持。你的下载应该准备好使用，没有上面提到的任何步骤……”在我的基础6发布后，我不能删除链接。你可能想联系他们，并要求新的链接！
当我向下滚动时，我做了两个div；图像可以同时移动 我使用了一个位置：fixed标记 现在第一个图像正在向下滚动，但第二个图像没有 当我为第二个图像div使用position:fixed标记时，它将成为第一个图像的一部分 我如何解决这个问题 我想当我向下滚动时，两个图像都应该从左向右向下滚动-朝向向下位置 在我的网站上获取结果： 代码： 您不需要使用position:fixed浮动它们。试试这个： <div style="padding:0px 5px; position:fixed; l
我正在创建一个CSS关键帧动画，让一个元素看起来像是随意/缓慢地四处浮动。它嵌套在父对象中，一个使用translateX（）缓慢地左右移动，另一个使用translateY（）缓慢地独立地上下移动 Chrome和Safari完美地呈现了这一点，让它有一个逐渐摇摆的运动。它平滑动画（可能使用亚像素平滑？），使所有内容看起来都非常平滑。不过Firefox会逐像素设置动画，所以你可以看到它在每个像素处跳跃，而不是平滑地摇摆 在Chrome和FireFox中查看JSFIDLE以查看差异： 有没有什么方法可
我有一排盒子，每个盒子的最小/最大宽度为300/400px。我希望flexbox在可能的情况下每行显示更多的框。在宽度上，如果不能水平放置等量的300px盒，则应显示更大的400px盒，以填充剩余空间 在本例中，浏览器宽度为929px时，它显示了两个300px的盒子，理想情况下，它可以安装在其中，并且应该显示两个400px的盒子 .container{ 显示器：flex； 柔性包装：包装； 宽度：100%； 身高：100%； 最大宽度：1260px； 右边距：自动； 左边距：自动； 填充物：5
我想显示一个图像，并在它旁边（在同一行上）显示一些文本。 这很简单，但我也希望此内容（图像和文本）在引导网格中居中，以便在所有设备上保留其属性并继续缩放/折叠 <div class="row-fluid"> <div class="container"> <img src="img.jpg" class="img-responsive"> <h1>CONTENT</h1> </div
我尝试将CSS添加到按钮，但它只是作为普通超链接输出。 我是否需要使用标记 <a href="example.com" style=".button { /*Tons of correctly written, irrelevant CSS */ }">text</a> 您在以下位置忘记了“=”符号： 如果使用内联元素示例，我强烈建议您将css外包到单独的样式表中： <a href="#" style="border:1px" 它应该是这样的- 样式标记上缺
Internet Explorer 11中的web字体有问题。该字体适用于某些使用IE11的用户，但不适用于其他用户，即使是同一浏览器。Modernizr.fontface对于遇到问题的用户仍然返回true，因此我可以排除这种情况 下面是CSS @font-face { font-family: 'Balthazar'; font-style: normal; font-weight: 400; src: url('/assets/fonts/Balthazar/
我知道HTML5提供了菜单元素来实现这一点，但我不记得它们是什么 对于具有可读性的HTML5元素，有一个很好的参考吗？我相信你指的是HTML，这将是元素，通常与和结合在一起。比如： 正文{ 背景色：#EBE8E4； 颜色：#222； 字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线； 字体大小：300； 字体大小：15px； } 导航{ 背景色：#fff； 边
有人对此有想法吗？还是其他选择？在sass中： .foundation { @import 'path/to/foundation.css' } 这将嵌套所有的基础样式在基础/>代码>类。< /p>你尝试过什么吗？有什么问题吗？是的，我试过了，但在所有的修改工作完成后，这是我的sass编译器错误
我希望我的网页在密码字段中显示一个复选框。用户单击复选框并将密码视为文本。取消检查时，请重新输入密码 这就是我想要的。这是从易趣网站登录页面。 这就是我得到的 我希望此复选框位于密码字段内。我在网上找不到关于这个话题的任何东西 这是我的密码： <!-- Set a password for the account --> <div class="col-md-12" style="margin: 7px;"> <input type="password"
我遵循这一点在我的谷歌地图上制作样式，但它不起作用 这是我的密码 <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=MY_API" type="text/javascript"></script> if (GBrowserIsCompatible()) { var mapOptions = { // How zoo
我的html模板中有一个菜单： <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <li class="dropdown-submenu"></li> </ul>
有没有一种不用JavaScript，通过CSS编码生成以下形状的方法 您有两种选择： 使用SVG绘制形状（更好的方法） 使用一些简单的形状（圆形和方形）来获得 例如，一个蓝色的大圆圈，在一个白色的小圆圈内：您将得到一个圆圈（否则，您可以只得到一个圆圈并放置一个蓝色边框） 然后，两个旋转45°的正方形，一个在左侧，另一个在右侧 获得此形状的方法很多，但您应该使用svg。这可以通过一个非常简单的CSS代码实现： div{ 宽度：50px； 高度：50px； 边界半径：50%； 边框：10px实心透
我有一个具有多个标题的引导表和一个addAction（）函数，该函数将push（）我的API中的信息保存在表中。一切都很好，除非我没有信息要推，我的桌子很小，看起来不太美观 默认情况下，引导表将表的大小设置为非常小，并且在表中没有要显示的数据时写入。我想用一个默认的表大小值替换它，该值内部为空 在这里，我制作标题并调用addAction（） 返回( 过程 ); addAction（） 功能添加动作（数量、道具）{ 行动=[]； for（设i=0；i
我最近开始使用Drupal来创建一个新网站。前端通常是我关注的，我会使用外部服务来集成后端功能。在这篇文章中（可能从现在开始），我想开始使用Drupal。现在，我已经安装了一个引导模块，并希望从那里开始添加自己的css，但我似乎不知道如何/在哪里添加。我不能直接进入引导风格的文件，所以我-显然-需要创建自己的主题并将css文件放在那里。这就是我到目前为止所做的： 1：有我的css文件的代码。 2：在sites/all/themes中的引导文件夹旁边创建了一个新文件夹。 3：把css文件放在那里。
我在html中包含了一个内联svg。我的目标是识别单个恒星并应用“闪烁”效果作为关键帧。 我注意到它的变换属性有内联样式属性 我将单个星的变换原点，#星更改为变换原点：50%50%，并添加了变换：缩放（1.2），只是为了测试一个简单的缩放效果 出于某种原因，当我将鼠标悬停在#star元素上时，我看不到正在应用转换。那颗星在盘旋时消失了 这里是我的链接将变换：缩放（）应用于#星形：悬停多边形这将更改组中多边形的大小 #star:hover polygon{ transform: scale(1.
在以下来自的示例中，为什么段落框仍然可见，即使使用将其显示设置为none：：blank p{ 最小高度：30px； 宽度：250px； 背景颜色：浅蓝色； } p:空白{ 显示：无； } p:-moz-only空格{ 显示：无； } /*Mozilla特有的伪类，其工作原理如下：blank将*/ 这一段不是空的或空白的 这一段不是空的或空白的 来自您的参考： 在撰写本文时，：blank是CSS选择器级别4草稿的一部分，任何浏览器都不支持 但是，由于Mozilla的前缀p:-moz-o
当我在index.html中添加额外的css列表时（模板）工作正常，但每当我在angular-cli.json中添加相同的css列表时（我的意思是没有合适的模板），请告诉我如何解决它。见下文 这很好： <link href="assets/css/flexslider.css" rel="stylesheet"> <!-- Pretty Photo CSS --> <link href="assets/css/prettyPhoto.css" rel="st
我正在开发一个反应式动态角度形式的应用程序。此表单字段来自API请求，并动态生成 我真的需要在我的表单输入中添加“必填字段”星号（*）。如何做到这一点 下面是我的表单字段的外观 <ng-container *ngIf="input1.type=='string'" [hidden]="False"> <div> <mat-form-field> <input matInput [formControlName]="input1.field
我需要能够使用CSS变量，因为我需要有一个悬停效果（背景色），可以由我的VueJs应用程序自定义。 但是我的CSS样式表应该有一个默认值，它存储在嵌套的SCSS映射中。（map getter是一个从嵌套映射返回值的函数） 我知道我的SCSS代码是有效的，因为当我这样做时，我得到了预期的结果： .theme--dark .AppNavTile:hover { background-color: map-getter($theme-dark, AppNav, hover); //return
我使用的是角材质垫形字段。我有一个黑暗的背景，因此我试图改变形式字段的边界为白色。但我无法使用css实现它。不，无论我在css中做了什么更改，它们都不会反映回mat表单字段中。以下是指向我的代码的链接： 任何帮助都将不胜感激。 谢谢。将此CSS添加到您的表单-field-appearance-example.CSS中： 尽管如此，在聚焦字段时仍然存在一个问题。对于较新的概述表单字段，通过以下方式解决该问题： ::ng-deep { .mat-form-field-appearance
我试图让我的flexbox项目包装正确，但似乎无法让它以我需要的方式工作。我有几个部分（紫色、粉色、蓝色），粉色和蓝色的高度可能会不同，因此很难为容器设置正确的高度。粉红色通常高度较短，而蓝色通常较长，但可以较短。粉红色永远不会像紫色那么高。 桌面上的布局（不是我想要的方式）当前看起来如下所示： 我希望桌面的外观如下所示： 移动布局正确，如下所示： 我的代码目前是 #容器{显示：flex；flex-wrap:wrap；} #紫色{flex:025%；最大宽度：25%；宽度：25%} #粉
我不想在列表项中垂直对齐图标。我尝试过一些方法，但我不知道如何正确地将图标与中心对齐。这是下面示例中最明显的，带有箭头图标，靠近关闭图标。有什么想法吗 li{ 显示器：flex； } 法兰西{ flex-grow:0； 显示器：flex； 对齐项目：居中； 右边填充：10px； } .头衔{ 柔性生长：1； } 项目1 长标题项目 基本上，您不能…一些字形在其边界字体框中不居中 如果在图标周围放置边框，可以看到这一点 这不能用flexbox纠正。 li{ 显示器：flex； 对齐
我有一个关于爱奥尼亚3的简单项目，我只需要在应用程序的输入中使用自定义字体 我将字体（ttf格式）复制到“./assets/fonts” 在css中 font-family: license plate, ariel, sans-serif; 刚刚加了这个 现在，当我使用ionic serve为应用程序提供服务并在chrome中打开它时，它就可以正常工作了。（字体已经安装在我的windows上）但使用ionicDevApp，我无法在实际的iphone中看到字体 如何导入字体？关于它的任何正式的
我很难想出如何（或最好的方法）压缩CSS，如下所示： /*purple*/ #page .purple-title-background h1.et_pb_module_header, #page .purple-title-background span.et_pb_fullwidth_header_subhead, #page .purple-title-background .et_pb_header_content_wrapper { background:
因此，我试图构建一个包含4个文件的网站。vue（navigation.vue、Home.vue、something1.vue something2.vue）每个文件都有自己的模板和样式。在navigation.vue内部，我有一个临时抽屉，以便在每个vue文件上导航 （临时抽屉的文档：（我使用的是Vue材料）我使用了相同的代码） 在我的抽屉里，我有md工具栏、md抽屉和md内容标签（在其中创建我的导航菜单： 因此，我想知道他们是否可以将我的一个模板（通过单击md抽屉中的项目列表）加载到md内容标
像，但不是一个无缝的背景图像，只是一个普通的旧图像。如何做同样的事情？现在，当我在一个不重复的背景图像上尝试时，整个图像都被渐变覆盖了 div{ 宽度：1000px； 高度：1000px； 背景： 线性渐变（至底部，#fff，透明）顶部/5%32px无重复， 线性渐变（至顶部，#fff，透明）底部/5%32px无重复， 网址(https://picsum.photos/id/984/1000/1000)不重复； 背景尺寸：封面； } 仅将封面移动到图像，否则它将应用到渐变，并覆盖5%32px
我正在寻找推荐书，其中包括编码响应导航 到目前为止，我正在考虑这本书 这是一本关于响应性设计的好书。事实上，它是由“创造”响应性设计的人写的。它在亚马逊上，但30美元有点贵，而且只剩下5个存货。以下是链接： FreeCodeCamp在他们的YouTube频道上有一个很棒的视频。以下是链接： 另外，您很可能还不熟悉堆栈溢出（欢迎！），但这个问题有点离题。关于您的实际代码，实际上没有什么问题。如果您有问题寻求建议，我建议在Reddit或Quora上使用r/askprogramming。希望这有帮
我有一个TypeScript（TS），React项目，我用它来保存我所有的React组件。 我正在从这个项目中创建一个NPM包，然后在单独的React项目中使用它。我遇到了一个问题，我不知道如何将样式与TS组件一起导出 使用NPM包中的组件会导致错误： 未找到模块：无法解析“../css/footer.css” 当我创建我的打包目录（dist）时，我的所有组件都在那里，但是没有CSS。我正在运行tsc来创建此目录。我所有的组件和CSS都位于同一个src文件夹中 这是我的tsconfig.json
我需要替换的文本是：“我是工匠” 它出现在以下代码中： <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#craftsman_gateway" role="tab" data-tog
在chrome中面临不正确的字体呈现 屏幕截图显示列表中的第一项具有不同的颜色： 但列表中的所有项都具有相同的css属性： 近似值如下所示： 例如，IE 11没有这个问题： 为什么会发生这种情况？会有帮助
我希望在这方面能得到CSS的帮助。我在结合两个CSS概念时遇到困难： 对div使用文本而不是背景图像，但用作该背景的文本包含图像（即背景剪辑：文本等） 重新措辞： 创建一个包含图像的文本是相当简单和常见的（尽管我不介意确认最好的语法） 但是我想用这个技巧，把它设为一个div的背景，就是这样。在div中，我将使用常规文本和一个透明的PNG图像 我正在努力实现的目标： 基本上，我将在前景中使用PNG（即div内容），并以文字（即文本）作为背景。但是这些背景词本身应该用图像填充（为了纹理/美学等） 我
我正在使用Vue和CSS，问题是它没有按照我的意愿对齐，到目前为止，我有以下问题： 我想说的是： 他没有让我在左边排队 我的CSS： .MenuDesktop { position: absolute; width: 1500px; top: 50px; background-color: white; flex-direction: row; display: grid; grid-template-columns: repeat(8, 1fr); } Vu