草庐IT

BOX_MARGIN

全部标签

html - 流式布局 : Can a float with a margin be forced to be 100% width?

我正在编写我的第一个流动布局,我不得不说它比固定宽度的布局要花费更多的时间。但是,我看到了优势,所以我想让它发挥作用!这是我的情况:我有一个带有一些文本的标题,它使标题的高度可变,具体取决于浏览器文本的大小。左侧有一个固定宽度的导航栏。导航向左浮动,负边距与宽度的像素数相同,这有效地使其插入零宽度空间。整洁!我的主要内容部分向右浮动。它有一个导航宽度的左边距,因此内容避免隐藏在导航链接下方。导航在来源中排在第二位,因此辅助技术的用户可以首先访问内容。这很有效,但前提是主要内容部分的内容有环绕整个页面宽度的文本行。如果内容只有短行或列表,则内容部分的宽度与其内的内容相同。由于内容部分向右

html - 使用 box-sizing 创建内边框

我想创建一个HTML表格,其中每个单元格都是可点击的,点击一个单元格会在单元格内的单个div上添加一个边框。我希望div的边框完全存在于包含它的td的现有范围内,根本不需要调整表格或其单元格的大小。我似乎无法让这件事正确发生。这previousquestion似乎解决了同样的问题,并指向一些关于box-sizingCSS选项的文章。我有一个fiddle,我试图实现它但没有成功:http://jsfiddle.net/YsAGh/3/.*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-

html - 与 float 和 margin 相关的奇怪行为

问题是div与.parent类的位置。它不在窗口的顶部,而是在下方100px,正好是.child的margin-bottom的值。谁能解释一下这里发生了什么?这是我的HTML文档:.parent{}.child{margin-bottom:100px;}button{float:left;height:30px;}clickme! 最佳答案 这是由于不完整处理floats引起的和notmasteringMarginCollapsingMarginCollapsingonEmptyblocksIfthereisnoborder,pad

html - margin-bottom 在 flexbox 中不起作用

我有一个问题,我有一个flexbox,但我不完全希望每个元素都根据给定的属性进行间隔,所以我想玩一下边距。我在框的顶部有一个标题,但我希望它与其余元素之间有间距。所以我希望将我的p元素列表组合在一起,但距离标题更远。但是,当我执行margin-bottom时它没有任何效果(当我增加或减少margin-bottom时没有任何变化)。我最初是用百分比来做的,后来改为像素,但这似乎也不是问题。在代码片段中,我对它的外观没有任何问题,但在更大的浏览器上,标题和p元素之间几乎没有任何空间,这就是问题所在。.container{display:flex;position:relative;flex

javascript - 在 box-shadow 上使用边框半径

下面代码的结果是这张图片:问题是不是所有的Angular都有边界半径。这是因为父级具有最大宽度,而border-radius仅适用于跨度的末端。有解决办法吗?也许与JS?要检测每条新线并添加另一个带有边界半径背景的跨度?由于响应能力,我无法在跨度中添加中断。在桌面版上,它是一长行。h1span{background-color:#272e3a;-webkit-box-shadow:20px00#272e3a,-20px00#272e3a;box-shadow:20px00#272e3a,-20px00#272e3a;padding:5px;border-radius:4px;font-

javascript - 如何在鼠标悬停时在 HTML 标记中的文本周围显示 "box"?

我正在为InternetExplorer编写BHO,我在其中搜索网页中的特定词并将在HTML标记中找到的词封装起来,以用于样式设置。我有代码可以在将鼠标悬停在标签上时更改样式属性,但我想做的是在单词周围显示一个“框”,但我不想将文本移动到它所在的任何其他位置原来的。为了说明,我制作了一张图片(想象一下“溢出!”这个词在它自己的HTML标签中):图片#1是之前,#2是鼠标悬停在单词上的时候!任何人都可以帮我提供有关如何解决此问题的任何建议吗?Javascript?CSS样式? 最佳答案 在要突出显示的文本周围引入一个标记,并连接onm

html - IE7 : an excessive margin in form for textarea

我正在尝试处理我的应用程序中的IE7错误。这是HTML/CSS代码在Firefox/Opera/Webkit/IE6中是可以的,但在IE7中文本区域有100px的左边距。如果有人有纠正此问题的提示,非常感谢!这是显示此示例HTML的IE7屏幕截图:http://daneel.net/pub/img/ie7_bug_decalage.jpg 最佳答案 这看起来像是继承的边距错误(类似于但不同于float的双边距错误)。textarea继承了表单周围div的边距。PositionIsEverythingdescribesitinmore

html - 绝对位置和 margin : auto

我有一个小问题,我希望我的页脚以position:absolute保留在屏幕底部。但是我将它放在屏幕中间的margin:auto不再起作用了。HTML:TESTDenAllerstrafste"Ful-Ambi"Live-BandvangrootAntwerpenenomstreken!HomeWieiswieFoto'sRepertoireLinksContactTESTDevelopedbyYoshi©vAntstAdCSS:/*PAGELAYOUT*/html{padding:0px;margin:0px;}body{background-image:url(../IMA

html - 删除CSS中复选框的 "box"

我正在尝试删除复选框字段的实际框,并使文本可点击。我怎样才能用JS和css做到这一点?我开始使用按钮,但后来改用复选框,因为复选框的“状态”比按钮更容易发现。但是现在我正在使用css完善页面以获得更好的格式和布局,这些框妨碍了我,我更希望文本在没有框的情况下可以点击。 最佳答案 您可以使用display:none;用CSS隐藏它HTMLasdf​CSS/*forallinputsoftypecheckbox*/input[type="checkbox"]{display:none;}/*forjustthesingleelement

html - 为什么 flex-box 适用于 div,而不适用于表格?

下面的简单代码片段生成一个占用可用屏幕空间的网页,顶部是页眉,底部是页脚,主要内容占用尽可能多的空间(虚线边框使其更易于查看):html,body{width:100%;height:100%;margin:0;padding:0;}body{display:flex;flex-flow:column;}h1,small{flex:01auto;}div{flex:11auto;border:1pxdotted;}SomeHeaderSomeTextSomeFooter如果我修改CSS和HTML以使用table代替div,它不会扩展表格以占用可用空间:html,body{width:1