Div border 不显示的原因

本文详细介绍了CSS中border-style属性的使用方法及其各种值的效果,包括如何定义不同类型的边框如实线、虚线等,并解释了为什么需要指定border-style才能使边框生效。
<div style="
    border: 10px;
    border-style: solid;
    height: 100px;
    width: 200px;
    margin: auto;
    color: rgb(0, 255, 214);
    background-color: rgb(14, 196, 241);
">
</div>

显示如下:

 

其中:border-style缺少则border不显示。

<div style="
    border: 10px;
    height: 100px;
    width: 200px;
    margin: auto;
    color: rgb(0, 255, 214);
    background-color: rgb(14, 196, 241);
">
</div>

显示如下:

 

原因:

因为border-style 的默认值是:not specified(未指定)。

所以想要显示border就要指定border-style的值。

描述
none定义无边框。
hidden与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。

参考:CSS border-style 属性

转载于:https://www.cnblogs.com/shuaizizhi/archive/2012/11/09/2762425.html

### CSS 中 `div` 添加边框后生效的原因分析 在处理 CSS 的过程中,可能会遇到给 `div` 元素添加 `border` 后发现其并未正常显示的情况。以下是可能的原因及其对应的解决方案: #### 1. **父级容器的高度未定义** 当子元素设置了 `border` 而父级容器高度为自动(auto),可能导致视觉上的错觉——看起来像是 `border` 起作用。实际上是因为父级容器没有足够的空间来容纳子元素。 - 解决方案:确保父级容器有明确的高度或最小高度属性。 ```css .parent { height: 100%; /* 或其他具体值 */ } ``` #### 2. **盒模型的影响** 默认情况下,CSS 使用标准盒模型(content-box)。这意味着宽度和高度仅指代内容区域,而包括 padding 和 border。因此,在某些布局下,增加 `border` 可能会超出预期尺寸范围,从而影响整体表现。 - 解决方法:可以切换到另一种盒模型模式即 border-box 来避免此问题。 ```css * { box-sizing: border-box; /* 应用于全局所有元素 */ } ``` #### 3. **浏览器兼容性问题** 部分旧版浏览器可能存在渲染差异或者特殊行为,特别是 Internet Explorer 系列。例如历史版本中的 IE 对于无 “hasLayout” 属性的对象无法正确应用一些样式[^3]。 - 处理办法:针对特定浏览器提供额外的支持代码;对于现代项目建议放弃对极老版本的支持转而专注于主流平台优化体验。 #### 4. **层叠顺序冲突** 如果存在多个相互覆盖的选择器规则,则较后面声明的那个将会被优先采用。所以即使写好了某个样式的 `border` 定义也可能因为更高权重的另一条指令将其覆盖掉而导致看见效果。 - 推荐做法:审查整个样式表文件查找是否有重复定义并调整相应重要度标记如 !important[]()。 ```css .my-div { border: 2px solid black !important; } ``` 以上就是关于为什么有时候我们在尝试通过 css 给 html 页面里的 div 加入边界线却看到实际变化的一些常见原因探讨以及相应的修正措施介绍完毕啦! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值