代码之家 › 专栏 › 技术社区 › bellotas

边框CSS-意外行为

border css html

bellotas · 技术社区 · 7 年前

我已经创建了一个 div 在里面 HTML 我有一个 CSS class 为了它。我将举一个代码示例来更好地解释它:

HTML

<div style="text-align:center;" class="container">
  <span class="message col-xl-12 col-lg-12 col-md-12 col-sm-12 col- 
   xs-12">Test</span>
</div>

我的问题是,我没有得到CSS类“message”的行为

起初,我是这样做的:

    .message{
  margin-top: 30px;
  height: 3em;
  line-height: 3em;
  font-size: 25px;
  text-align: center;  
  border-style: solid;
  border-color: #0A76BC;  
  border-bottom: 2px;
  margin-bottom: 5%;
}

但我的发现完全出乎意料。我出现的正是 border 课程中没有提到这一点(上边框),但其余部分:

所以我做了完全相反的事情,我工作了:/

.message{
  margin-top: 30px;
  height: 3em;
  line-height: 3em;
  font-size: 25px;
  text-align: center;  
  border-style: solid;
  border-color: #0A76BC;  
  border-top: 2px;
  border-left: 2px;
  border-right: 2px;
  margin-bottom: 5%;
}

我唯一能得到的就是 container 从…起 bootstrap 具有一些特殊功能。有人能解释一下吗?

2 回复 | 直到 7 年前

Axnyff 7 年前

border-bottom: 2px; 是 border-left-style ,则, border-left-width 和 border-left-color .因为你没有定义 左边框样式 使用默认值: none 。它将覆盖 border-style 。

border-bottom: 2px solid;

将按预期工作。

Cocest 7 年前

增加了Axnyff的回答。为了理解CSS(级联样式表)是如何工作的以及为什么会出现奇怪的行为,我们需要解释它们之间的区别以及它们是如何相互覆盖的。有三种方法可以将CSS应用于html元素,即内联、内部和外部CSS。

内联CSS:
内联CSS或样式,定义为元素的属性样式值覆盖内部和外部CSS。
内部CSS:
在页面标题部分声明的内部CSS覆盖外部CSS 只有
外部CSS:
内联和内部CSS使用替代外部导入的CSS文件。css 扩大

当涉及到使用内部和外部CSS时,使用id选择器声明的CSS会覆盖使用类选择器声明的另一个CSS,该类选择器使用相同的属性设置相同元素的样式,例如:

CSS

#test_id { color: red; }
.test_cls { color: green; }

HTML

<div id="test_id" class="test_cls">which color?</div>

上面div元素内的文本将为红色,因为 #test_id 推翻 .test_cls 班

如果不小心,使用类对同一元素应用多个CSS可能会导致奇怪的结果,而当两个或多个声明的CSS类具有相同的属性时,就会发生这种情况。示例:

CSS

.bdr1 { border: 2px solid red; } 
.bdr2 { border: 4px solid green; }

HTML

<div class="bdr1 bdr2">Which border style is going to be applied?</div>

碰巧 .bdr2 是应用的,但如果我们想应用 .bdr1 班我们改变了CSS .bdr1 以上内容:

.bdr1 { border: 2px solid red!important; }

要覆盖

.bdr2 { border: 2px solid green; }

但要小心使用“!important”。