长时间不用css，发现有些基础知识竟有些遗忘，由于项目中的一些css样式，进行了以下相关测试。

div的width及height均设置为0后，div的border会怎样显示。经过测试后，发现border的显示与div的width/height独立，显示不受它影响。

以下为例子：

代码如下：

<!doctype HTML>

<html>

<head>

    <title>测试</title>

    <style type="text/css">

        div {

            width: 0;

            height: 0;

            border: 100px solid blue;

        }

    </style>

</head>

<body>

    <div></div>

    <script></script>

</body>

</html>

宽高均设置为0后，显示的结果如下图：

上例说明：border不受div的宽高影响。然而，为什么会显示成这样呢，再进行如下测试；

         div {

            width: 0;

            height: 0;

            border-top: 50px solid blue;

            border-right: 50px solid black;

            border-left: 50px solid green;

            border-bottom: 50px solid pink;

        }

显示如下图所示：

也就是，宽高均设置为0的div，它的border是以其为中心点进行组合的；但是若将border设置为不同的呢，效果又会是怎样的，如下：

div {

    width: 0;

    height: 0;

    border-top: 50px solid blue;

    border-right: 20px solid black;

    border-left: 10px solid green;

    border-bottom: 100px solid pink;

}

显然，并不一定完全为中心点，但是会以div为出发点，进行显示，效果如下所示：

那如果我们只想显示一个右箭头时，该怎样实现呢，再次尝试：

div {

    width: 0;

    height: 0;

    border-top: 50px solid transparent;

    border-left: 50px solid black;

    border-bottom: 50px solid transparent;

}

效果如下：

到这里，我需要的效果已经达到了。当然通过改变border的其他值或增加css其他属性，还可以进行各种形状的变换，大家可以多加尝试哈~

传送门：https://www.cnblogs.com/starof/p/4459991.html

(并未参考太多例子及文章，效果很简单，想要更多复杂效果，可自行搜索哈)

div的border & width的更多相关文章

  1. background 的一些 小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

    1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width ...

  2. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  3. 放假回来啦！！小技能：一个div不给width，怎么让它居中捏？`(*∩_∩*)′

    答案是:这个div没有浮动的话,就用text-align: center; 有的话...我也不知道了

  4. MVC——数据库增删改查(Razor)

    一.显示信息 .Models(模板) private MyDBDataContext _context = new MyDBDataContext(); //定义一个变量取出所有数据 public L ...

  5. DataTabe对象的例子

    前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTable对象 ...

  6. literal控件的例子

    Literal的Mode属性,举例说明 这个属性的枚举值:PassThrough  Encode  Transform <%@ Page Language="C#" Auto ...

  7. 用Response对象的write方法和<%%>及<%=%>输出同样效果的乘法表格

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Response1.aspx ...

  8. css 对div用hover设置border，出现抖动和div走位问题，解决方法

    样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移. 产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其 ...

  9. css样式之border

    border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...

随机推荐

  1. 元类编程-- 实现orm,以django Model为例

    # 需求 import numbers class Field: pass class IntField(Field): # 数据描述符 def __init__(self, db_column, m ...

  2. Maven-Dependency Mechanism

    依赖管理是maven的一个广为人知的特性, 这也是maven擅长的一个领域. 为单一的工程管理依赖不是很难, 但当你着手处理多模块工程和包含数十或数百个模块的应用时, maven可以帮助你很好地保持高 ...

  3. btrace 常见问题

    执行btrace命令报错:Unable to open socket file: target process not responding or HotSpot VM not loaded ---- ...

  4. 【BZOJ】4430: [Nwerc2015]Guessing Camels赌骆驼

    [题意]给定三个长度为n的排列,求在三个排列中顺序相同的数对个数. [算法]逆序对 [题解]很容易联想到NOIP火柴排队,涉及顺序问题显然和逆序对息息相关. 一个数对如果在三个排列中顺序不同,一定是1 ...

  5. 【BZOJ】1598: [Usaco2008 Mar]牛跑步

    [题意]给定有向图,边严格从大编号指向小编号,求前k短路.n<=1000,m<=10000,k<=100. [算法]归并+拓扑排序||A*求第k短路 [题解]因为此题自带拓扑序的特殊 ...

  6. js 重置表单

    //方法一document.getElementById("myform").reset(); //方法二 ].reset(); //方法三 使用input按钮 <input ...

  7. this可以通过call改变的测试

  8. URI设计原则

    以下是与 REST API 相关的重要术语: 资源(Resource) 是一个对象或对某物的表示.它有一些相关联的数据,并有一组方法进行操作. 例如:动物,学校和员工是资源.这些资源都有着删除,添加, ...

  9. devinet_ioctl

    Kernel: 4.12.6 deinet_ioctl:获取或者设置接口的地址,掩码,标记等信息: 注意,使用SIOCSIFFLAGS关闭设备,如果使用了别名,则删除对应ip,如果其为主ip,并且从i ...

  10. 1000: 恶意IP 课程作业

    1000: 恶意IP Time Limit: 1 Sec  Memory Limit: 16 MB Description Water同学最近好不容易学会了用Tornado建起一个个人的Website ...