长时间不用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. 快速排序Quick sort

    快速排序Quick sort 原理,通过一趟扫描将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归 ...

  2. 【转】 GRASP(通用职责分配软件模式)模式

    转自:http://www.cnblogs.com/sevenyuan/archive/2010/03/05/1678730.html 及:http://blog.csdn.net/lovelion ...

  3. python实现备份gitlab版本库并更改文件名

    脚本的功能是实现备份gitlab版本库,并修改备份后的文件名,成功后发送邮件至相关负责人,脚本如下: #!/usr/bin/env python # -*- coding:utf-8 -*- impo ...

  4. 「6月雅礼集训 2017 Day11」jump

    [题目大意] 有$n$个位置,每个位置有一个数$x_i$,代表从$i$经过1步可以到达的点在$[\max(1, i-x_i), \min(i+x_i, n)]$中. 定义$(i,j)$的距离表示从$i ...

  5. HDU 1114 Piggy-Bank （dp）

    题目链接 Problem Description Before ACM can do anything, a budget must be prepared and the necessary fin ...

  6. javascript 事件绑定

    一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...

  7. 火狐浏览器下点击a标签时出现虚线的解决方案

    1.兼容性问题 火狐浏览器下点击a标签时出现虚线 2.解决方案 a:focus { outline: none;}

  8. perl HTML::HeadParser获取html头部信息

    use LWP::Simple; use HTML::HeadParser; use utf8; binmode(STDOUT, ":encoding(gbk)"); #设置win ...

  9. Linux汇编教程04：寻址方式

    这一节,我们主要来讨论寻址方式,这一点十分重要. 我们上一节有稍微提了一下,内存地址引用的通用格式: 地址或偏移(%基址寄存器, %索引寄存器, 比例因子 ) 结果地址 = 地址或偏移 + %基址寄存 ...

  10. 在Github里集成Readthedocs服务

    Readthedocs支持Markdown格式和sphinx格式的文档排版,是部署项目文档的绝佳平台.利用Github的托管服务,我们可以方便地将文档托管于Github,并利用Readthedocs查 ...