我使用此css将设置为最大高度
谁能给我一个大概的答案,高度:100%和最小高度:100%之间有什么区别?高度将使元素的大小达到其容器的100%
最小高度将使元素最小为容器大小的100%
但你为什么要这么做呢?如果最小高度为100%,我认为它不会有任何影响
在IE7中进行一些研究后,它可能会为您提供一个问题的解决方案:
高度:100%将变为容器高度的100%最小高度:100%如果需要,应该扩展到超过容器的高度
请记住,IE中不支持最小高度。以下是W3C()的解释:
以下算法描述了两个属性[最小高
标签: Css
css-selectorscss-specificity
我正在为一个web应用程序编写一个javascript UI对话框。问题是,用户可以为web应用程序创建自己的主题,其中可能包括元素css选择器(h1{…},div{…}等),它们会覆盖UI对话框的css格式。该对话框是一个通过类选择器格式化的div元素(id无效,因为该对话框可能出现多次)。有没有一种方法可以阻止用户模板样式的元素选择器影响UI对话框,而不必使用巨大的css重置样式和!重要信息针对每种类型的UI对话框?像jQuery这样的UI库如何在对话框中显示UI样式
例如,用户主题包括:
我的表单中的文本区域和提交按钮有问题
下面是一个看似正常的情况的第一个屏幕截图:
如果我将textarea设置为30列,会发生以下情况:
文本区域刚好覆盖了按钮。我希望按钮被按下。或者任何低于它的东西。要实现这一点,我需要设置什么?最有可能的情况是(您应该显示更多CSS代码以确保)您的标签/字段在固定高度的元素中浮动
在文本区域后面使用一个带有clear:both的元素。你需要包含你的html/css来获得这个问题的答案。首先,你需要提供一个html/css代码的示例。
我正在清理一些旧的、糟糕的css,其中包括:
body {
font-size: 100.01%
}
在研究过程中,我发现,这解释了将字体大小设置为100.01%的原因,但没有说明此“修复”的目标浏览器
现代浏览器还面临这个问题吗?如果是的话,哪个版本和什么版本?答案来自Adrian Senior
这是字体的奇数100.01%值
大小可补偿多个浏览器
漏洞。首先,设置默认主体
以百分比表示的字体大小(而不是em)
消除了一个IE/Win问题
从中增加或缩小字体
比例(如果以后设置)
其他元
所以我一直试图把一个div并排放在这里,但我已经没有选择了
<div id='body'>
<div id='header'>
</div>
<div id='container'>
<div id='navigation'></div>
<div id='content'>
<div id='shoutout-box'></div>
&
可能重复:
我正在使用CSS cursor属性(“cursor:url(images/target.png),crosshair;”)更改鼠标指针的图像,并且注意到当用户单击鼠标指针时,它会从图像的左上角取点
如何将其更改为光标图像中的给定x&y点
编辑:给了我答案(我想这是一个重复的问题)-谢谢“mu太短了”只是一个想法(不知道它是否有效):您是否考虑过在需要偏移的一侧使用一个较大的图像,并在其上留有一些透明的空间?不,我没有,但这不会使光标图像离右上角更远吗?很抱歉,我的问题中犯了一个错误
CSS元素样式分组顺序是否有标准或最佳实践?我知道这不是一个主要问题,但我想确保我总是生成可读的代码,特别是对于具有多种样式的元素
例如:
#element {
font-family: Arial;
font-size: 8pt;
color: #666666;
border: 1px solid #ccc;
position: relative;
top: 5px;
left: 5px;
}
#元素按文本样式、边框、位置的顺序对样式进
这是我的CSS:
#nav-primary ul li:nth-child(1) a:after { }
现在在任何地方都可以使用(在我的网站上使用),除了InternetExplorer8
有没有可能在IE8中使用第n个孩子?
这是此浏览器的最差版本。。。任何东西都不能正常工作,我也找不到解决办法
@编辑:
我想要实现的简化版本:。这只是一个开始。CSS将更加复杂,所以我需要能够瞄准每一个链接。希望在每个链接中添加类不是唯一的方法
@编辑2:
我刚刚注意到
#nav-primary ul l
如何使用CSS在图像上移动div?我试了很多,但失败了
CSS
.mytooltip
{
border: 1px solid #FF0000;
background-color: #C0C0C0;
width: 100px;
height: 100px;
position: inherit;
top: 250px;
left: 150px;
z-index: 9999;
}
.myfloorplan
{
position:
我无法在safari中获得最高利润。CSS工作正常,#divcontainer有上边距,在firefox和其他浏览器中居中,但在safari中没有
我想一个10px的空间,以显示上面的容器将容纳所有其他内容
以下是CSS:
/* CSS Document */
body {
color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground
标签: Css
pseudo-elementcss-specificity
我有两条CSS规则相互遵循:
.some td:first-child:before {
content:url('path/to/image.png')" " ;
}
.some .other:before {
content:url('path/to/image2.png')" " ;
}
以下是HTML代码片段:
<table class="some">
<tr>
<td class="other">Text goes here
我已经尝试了这个网站上的一切,让我的雅虎管道集中在页面上,而不集中在管道内的文本,没有任何工作。我真的需要第二双眼睛!
以下是我的代码:
CSS:
#pipe_container{
width: 850px;
height: 350px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #fff;
text-align: center;
因此,我使用@media查询在我的站点的移动版本上使用不同的css文件。以下是我的html的标题:
<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />
<link media="only screen and (max-device-width: 800px)" h
我正在使用下面的CSS制作视网膜图像,它在FF、Chrome、Safari中工作得非常好,但在IE中却不是
IE使用背景大小是否有修复方法?如果有,我如何使用当前代码实现它
CSS:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
backgr
我正在开发一个Rails 3.2应用程序,该应用程序带有Twitter引导。我试图在Bootstrap和overrides.css.less中覆盖Bootstrap的颜色
我已经能够用更少的变量覆盖颜色。例如:
@navbarBackground: @blue;
@navbarBackgroundHighlight: @blueDark;
但是,我想偏离颜色变量。我似乎不能用像5092CC这样的十六进制颜色。我不想在更少的时间里重新定义颜色变量,因为我已经读到了可能会导致问题的
标签: Css
3d
cross-browsertransformwebkit-transform
当我将此样式与#board(灰色)搭配使用时
Firefox中的外观:
但在chrome中:
我们需要的是Firefox中的那个。那么,我们应该怎么做才能在chrome中获得相同的外观呢?通常,最佳做法是将透视图放置在包含元素上,例如主体或包装div
演示:
亲爱的@amustil,谢谢你回答我的问题。我已经在Firefox和Chrome上试过了。它在Firefox中仍然运行良好,但在chrome中只显示一个矩形(我想要的是一个梯形视图。)@change您使用的是哪个版本的chrome?我在
我的导航菜单有问题。这是我的CSS:
ul.main {
background-color: #CCC;
display: inline-block;
}
ul.main > li {
list-style-type: none;
display: inline-block;
position: relative;
}
ul.subNav {
background-color: #333;
我正在寻找一种方法,在纯CSS中,使用动态的“海绵状”高度元素
您有一个设置高度的列表,并且根据列表元素的数量,它们的组合高度总共占UL高度的100%
e、 g.1个元素的高度为100%,2个元素的高度均为50%,3个元素的高度为33%,以此类推
我已经设置了一个最小高度,这样它就不会低于某个特定的大小,但我遇到的问题是,元素2-n被第一个元素完全推出了UL(它占据了整个100%的高度),而不是像我想要的那样海绵状
也许我缺少了一些强制列表元素留在容器中的属性,或者一些使列表元素缩小到最小高度的
有没有办法避免包装div
当内容不仅仅是文本时的内容,例如几个按钮?空白:nowrap应该可以做到这一点
#foo{
空白:nowrap;
宽度:100px;
}
您可以使用
position:absolute;
您可以在CSS中设置这两个属性:
空白:nowrap和最大宽度:某物您的意思是溢出:隐藏?请让as知道“包装”是什么意思,“包装”意味着空白:nowrap;不适用于非文本,内容被包装(占用1行以上)请显示空白:nowrap不适用于按钮的情况按钮元素是HTML和CSS术语中的文本内容
有没有一种方法可以用更少的内存使用css calc()例程
如果我转到并键入以下输入(这只是常规css规则):
但是,输出应该完全相同(因为它是常规css)
较少编译器生成的css输出是width:calc(-350%)
有什么方法可以让它工作吗?值:
width: ~"calc(100% - 450px)";
不过,在LESS 1.4中,转义是不必要的,因为只有当计算被括号包围时,才会进行计算。例如:
prop: 20 + 10px; -> prop: 20 + 10px;
p
我正试图创建一个纯粹而简单的CSS下拉菜单,它将在每个项目下以全幅模式打开,但也将保持每个下拉菜单在其父项目下。
这张图片更好地解释了我想要实现的目标:
我只是不知道如何将嵌套的UL保存在每个li中,但也有一个全宽的背景来包装它
这是我在Codepan上准备的一个演示:
/*不太相关的样式*/
h1{字体大小:20px;填充顶部:20px;}
.container{位置:相对;边距:20px自动0自动;宽度:75%;}
.header{background:#eee;}
.nav{背景:#c
我有一个29帧的树木生长动画,我希望它在最后一帧停止(当它完全生长时)。我一直在寻找一个解决方案,让它在最后一帧停止,但似乎没有什么影响它。我可以让它循环,或者只是重置到第一帧
有人能给我解释一下为什么这部动画一直重置回第一帧吗?非常感谢
以下是我目前掌握的代码:
.tree-right {
-webkit-animation: treeright 2.0s steps(29);
-moz-animation: treeright 2.0s steps(29);
-ms-animation: t
HTML:
<ul>
<li class="a">Hi-1</li>
<li class="b">Hi-2</li>
<li class="b">Hi-3</li>
<li class="a">Hi-4</li>
<li class="b">Hi-5</li>
<li class="b">Hi-6</li>
</
我在用Bootstrap3写博客。在我的自定义CSS中,我最近添加了
body {
text-align: justify;
...
}
我喜欢大屏幕(平板电脑、台式机)上的效果。但在小屏幕(手机)上,由于栏目较窄,加上我的博客偶尔使用了类似这样的冗长的技术术语,所以“合理文本”的效果不太好
我能否仅在更大的屏幕上响应文本对齐:对齐
是否可以仅通过CSS执行此操作,或者,我是否需要编写一些自定义JS来执行此操作?是的,如下所示(断点设置为48em):
如果视口宽度大于48em,
标签: Css
Sass
css-transitionscss-transforms
我想知道如何在SASS中设置列表元素以display:none开始,然后在动画开始时将其设置为display:block,然后在动画结束时将背景色:35;fff更改为100%的白色
我不太确定你的动画会是什么样子
但试图以此作为你解决问题的参考:
这是演示您不能使用显示:无,因为您的元素将无法接收动画样式。相反,我会使用可见性:hidden。此外,如果希望样式在动画完成后保持不变,则应使用动画填充模式:forwards 问题是当它应该是1时,它会淡出到0不透明度
CSS Lint认为这里有问题。W3CCSS验证程序也是如此。他们可能是对的,我是错的,但是有人能帮我理解为什么这是错的吗
CSS:
.my-class {
width: calc(((100% - 15%) / 3 - 1px) * 3 + 10%); /* for 3 columns */
}
Expected RBRACE at line 2, col 22.
错误消息:
.my-class {
width: calc(((100% - 15%) / 3 - 1px
这是一些简单的CSS,它使用媒体查询更改表的显示。如果宽度小于某个值,它将隐藏表头,并使每行5列跨3行显示(2/2/1)。您可以在JSFIDLE中加宽和缩小窗口,并看到它正在工作
我将html复制粘贴到一个空白的html文件中。
我将css复制粘贴到一个空白css文件中。
我使用以下链接将两者链接起来,以便html文件如下所示:
<link rel="stylesheet" type="text/css" href="jsfiddle.css" />
<table>
我想更改引导navbar中的背景和文本颜色,但没有按预期更改。。。以下是我的自定义CSS:
.navbar-default .navbar-fnt {
color: #FFFFFF;
}
.navbar-default .navbar-backgrnd {
color: #CC3333;
}
以及相关的HTML:
<div id="menu" class="navbar navbar-default navbar-fnt navbar-backgrnd">
我的问题与此类似:
这是我的HTML:
<select id="select-card">
<option value=""></option>
<option value="card">**** **** **** 1982</>
</select>
<p>Or enter a new one...</p>
**** **** **** 1982
这里我得到的数据宽度为“57px”。但该值以百分比(50%)表示。。您可以看到下面的代码片段
有人能解释一下如何得到百分比值吗?我试着寻找,但没有任何帮助
Ruby:
data_width = find_element(css: 'div > div > div').css_value('width')
<div class="someclass" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-val
我想把整个网站的灰度。当然,我可以手动编辑CSS并调整每个颜色,背景色&co.属性,我还可以调整Photoshop中的每个图像
但是有没有更简单的方法,例如使用纯CSS
例如,在你的网站上放置一个100%x100%的叠加div,将每种颜色变成灰度
有什么提示吗?有,只需使用滤镜灰度即可
CSS
*{
-moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray; /* IE6-9 *
我遇到了跨多行垂直对齐项目的需要。从字体列表中可以看出,可怕的图标并没有与下面的所有复选框对齐。如何将图标与复选框行对齐?表中有更多的列被删除以在此处过帐。在复选框上有左边距和右边距
HTML:
F轨迹
Инженерные системы
window.jQuery | | document.write(“”)
尝试使用相同大小的图标。或者设置div.controls i{width:10px;}
你能编一把小提琴吗?我会把另一个答案标记为已接受的答案。我必须继续对页面的其余部分进行编码,这
我正在尝试为默认颜色模式查找默认wordpress样式
我能够找到所有其他颜色模式的css样式,如(浅、蓝色、咖啡色等),但我无法找到具有“默认”颜色模式的文件
有人知道它在哪里吗?这些管理样式实际上来自和目录中的文件
但是,如果您需要添加或修改样式,您应该考虑,而不是触摸核心CSS文件。担心这是真的。现在我害怕了。感谢您的时间:)
也许这是一个非常基本的问题,但现在我真的在努力解决它。我的电脑屏幕和电视具有相同的分辨率(1920x1080px)。由于分辨率相同,我假设计算机上的30x30px图像与电视上的图像相同。但在电视上,它比网站的其他部分更大。当我使用em而不是px时也是如此。此外,所有以px或em为单位的文本都太大
谁能告诉我如何处理这个问题?我拥有的电视是索尼KDL-50W755C。由于这两个屏幕的像素密度,您的元素看起来不一样。没什么可做的,元素在其中一个上看起来更大,但比例应该保持不变。您可以使用视口相对单位
如果可能的话,我想用CSS将一个绝对定位的div(或其他html元素)放在它自己的top和left属性的中心。默认情况下,绝对定位的元素将其左上角与top and left属性对齐。请参见下图,其中灰框是相对定位的容器,红点是页面上蓝色div的CSS位置(top:0;left:0;):
我想知道最好的选择是将蓝色的div放在它自己的位置上,就像下面页面上的三文鱼色div一样。
如果可能的话,我想在百分比,而不是像素的位置
到目前为止,我只提出了一个JavaScript解决方案。这就是计算子对象
flexbox布局算法与垂直偏置的块布局或水平偏置的内联布局相反,方向不可知。
~
有人能解释一下这到底是什么意思吗?
与flexbox相比,这些布局在“轴偏差”方面有哪些障碍?如果代码中有div(没有任何css样式,div默认为“display:block”):
1
2.
3.
div将垂直显示在页面上,如下所示:
一,
二,
三,
如果代码中有3个内联标记(“b”标记默认为“display:inline;”):
1
2.
3.
它们将水平显示在页面上,如下所示:
123
Flexbo
我为我的框架创建了一个模型。我创建了HTML代码、CSS代码和JS代码等一切,效果非常好
我唯一的问题是,我不能使它成为中心和响应。。。
这是我的模式Div的CSS代码:
.ji-modal {
width: 700px;
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
position: fixed;
top: 70px;
left: 325px;
dis
我有一个三角形,我需要它绕左下角的三角形旋转360度。我需要这一点是固定的,只是三角形绕着它旋转
这是我的密码
图{
背景色:#000;
位置:相对位置;
溢出:隐藏;
利润率:20px1%;
高度:200px;
文本对齐:居中;
光标:指针;
}
.图标{
位置:绝对位置;
排名:0;
左:20%;
宽度:50%;
身高:50%;
背景:url(“http://imgh.us/triangle_6.svg)无重复中心;
背景大小:100%100%;
内容:'';
-webkit转换:-web
我如何在我的网站的页面中心制作视频
.wp视频短码视频,video.wp-video-shortcode{
最大宽度:100%;
显示:内联块;
}
.mejs mediaelement{
位置:绝对位置;
排名:0;
左:0;
宽度:100%;
身高:100%;
}尝试为wp视频类添加边距
.wp-video
{
margin: 0px auto;
}
你应该在谷歌上搜索“研究成果”。如果下面的答案回答了你的问题,请标记为已回答。谢谢…父div在他的页面上已经是100%宽度
在中,我希望使红色框始终与灰色“页脚”框的右边缘对齐,而不管“页脚”框的宽度如何变化。也就是说,红色框最初位于正确的位置,但当您单击“扩展页脚”按钮时,“页脚”框变长,红色框不会随之移动(因为我现在将其作为绝对位置)
如何将红色框固定到灰色“页脚”框的右边缘
JSFIDLE的代码:
HTML:
JS:
您正在使用left:52px,它将相对于定位的父对象(.footerContainer)从左侧定位红色框52px。要使其与右边缘齐平,请使用right:0
$('btnClick')。在('cl
我想忽略Scout应用程序(SASS)中的一些文件
当我保存它们时,所有文件都转换为.css
有可能避免转换吗
我只想在“style.sass”中这样做:
还有一个包含完整代码的文件“style.css”。如果在文件名前添加下划线,则应忽略该下划线,如下所示:
您的文件:filename.sass
转换文件:_filename.sass
如果您有一个想要导入但不想要的SCSS或Sass文件
要编译为CSS文件,可以在开头添加下划线
文件名的名称。这将告诉Sass不要将其编译为普通CSS
文件
这是我的代码,元素的宽度现在是400px,但由于我给出的两个属性都是矛盾的,我知道其中一个会适用,有没有一种方法可以让最大宽度优先于最小宽度?如果不是,为什么?我尝试在最大宽度前后添加最小宽度属性,这两次都发生了相同的事情。请解释
p { background:red;
min-width:400px;
max-width:200px;
}
从:
“最大宽度”替代“宽度”,但“最小宽度”替代“最大宽度”
因此,我认为,没有办法根据max
标签: Css
css-multicolumn-layoutformstack
我试图在此表单上跨越3列中的复选框字段-\
所以,我写了
.fsBody .fsForm .fsFieldCell {
column-count:3;
}
但它将所有类似的字段跨到3列中。我只需要跨越一个特定字段,就可以跨越3列。我认为这与字段id有关。如何实现它?我查看了您链接的示例,似乎您将错误的元素更改为3列
试试这段代码,看看它是否适用于您的问题
.fsBody .fsForm .fsFieldCell .fieldset-content{
column-count:3;
您好,我在更改wordpress顶部导航菜单时遇到困难
以下是完整的css路径:
我已尝试应用此css代码
.secondary-navigation .menu-top-menu-container .menu pp menu-item menu-item-type-post_type menu-item-object-page menu-item-73 {
color: blue;
}
但它没有效果:(
有人能指出我做错了什么吗?试试这段代码,让我知道结果是什么。谢谢
.se
在定制我的产品时。我理解,用户可以使用自己的字体覆盖默认字体,如下所示:
$custom-typography: mat-typography-config(
$font-family: 'Lato, monospace'
);
尽管如此,我注意到显示了两种字体,默认的Roboto,然后Helvetica也包含在倒逗号中:
$font-family: 'Roboto, "Helvetica Neue", sans-serif',
那是第二种字体吗?我想如果我可以选择一个辅助字体。如果这不
我试图让我的标题标签出现在页面顶部,但在主div标签的上方(有一个包装类)。header标记编码在html文件中的wrapper div上方,如下所示。我的标题标记大部分被背景图像覆盖,因为我将标题的背景设置为白色,但由于背景为黑色,它隐藏了标题标记的部分。请帮忙。多谢各位
<body>
<header>
<ul>
<li><a>Home</a></li>
我正在使用[ngClass]根据物料表行值选择css类。在鼠标悬停事件中,我正在更改标志值,该值正在获取cssclass,并且工作正常。但当我调试它时,我意识到它会创建后台线程,并在后台不断检查geticoncsclass,这可能会造成性能问题。如何解决
HTML
<mat-icon [ngClass]="getIconCssClass(element)" mouseOver="mouseOverCss(element)" mouseOutCss(element) ></mat
我有下面的css
在myCss.css中
.playlist { margin: 200 200; }
.playlist .channel { background: grey; }
在JSX中
import "./myCss.css"
.
.
render (){
return (
<div className="playlist" id="playlist">
</div>
)
我查了一下这个问题,没有发现任何有用的东西。将父对象和子对象分别设置为flex-direction:columnw/space-between/space似乎不起作用
我已经在这个代码笔中重新创建了所有内容,但我真的不知道如何在空间方面使页面看起来像这样
我错过了什么
干杯
代码笔:
HTML
它不起作用,因为。所有EL没有高度,因此它没有放置空间的位置
你可以试试
.all-els
height: 60% // added
display: flex
flex-directio
我有3张卡,其中包含元素。这些卡片是网格项目,但我在卡片中有一个flexbox,我希望卡片中的每个部分都尽可能与其他2张卡片对齐。问题是底部的按钮溢出容器,看起来很难看。我知道必须有一种方法来防止flexbox中的所有flex项溢出,而不必繁琐地调整边距
:根目录{
--主色:rgba(255,111,15,0.8);
}
.网格父级{
显示:-网络工具包盒;
显示:-ms flexbox;
显示器:flex;
-webkit盒方向:水平;
-webkit盒方向:正常;
-ms柔性方向:行;
1 2 3 4 5 6 ...
下一页 最后一页 共 2157 页