长时间不用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. 任何用户密码都能以sysdba角色登入

    这是因为在安装Oracle的时候默认是使用了操作系统验证: 数据库用sysdba登录的验证有两种方式,一种是通过os认证,一种是通过密码文件验证:登录方式有两种,一种是在数据库主机直接登录(用os认证 ...

  2. 「模板」 01 Trie实现平衡树功能

    不想多说什么了.费空间,也不算太快,唯一的好处就是好写吧. #include <cstdio> #include <cstring> const int MAXN=100010 ...

  3. Proxmap Sort

    这个排序是桶排序和基数排序的改进,理解了前两者,这个排序很容易理解 先回忆下桶排序是怎么回事,它与桶的区别在于入桶规则,桶排序里是1入1号桶,2入2号桶 这个排序把数字分区了,然后给出一个所谓的键,例 ...

  4. modelsim10 SE 仿真lattice Xp2工程

    1.首先要建立Lattice XP2库 在modelsim10 SE启动后.首先指定Lattice Diamond 1.4 给定的仿真器库源代码编译目录: C:\lscc\diamond\1.4\ca ...

  5. 【BZOJ1560】【JSOI2009】火星藏宝图 [DP]

    火星藏宝图 Time Limit: 10 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description Input Output Samp ...

  6. 【BZOJ】1486 [HNOI2009]最小圈

    [算法]二分+spfa [题解]据说这个叫分数规划? 0-1分数规划 二分答案a,则对于任意的环有w/k≤a即w-ak≤0,若满足条件则a变小,否则a变大. 因为w=w1+w2+...+wk,所以变形 ...

  7. 深入理解 JavaScript（五）

    根本没有“JSON 对象”这回事! 前言 写这篇文章的目的是经常看到开发人员说:把字符串转化为 JSON 对象,把 JSON 对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下 ...

  8. Python 下调用C动态链接库 -- (转)

    在linux开发的动态链接库需要被python调用,首先需要生成.so文件. 生成动态链接库的方法网上有很多,主要就是首先根据源文件编译生成.o,然后链接这些.o文件-shared生成.so.需要注意 ...

  9. Python 源码学习之内存管理 -- (转)

    Python 的内存管理架构(Objects/obmalloc.c): _____ ______ ______ ________ [ int ] [ dict ] [ list ] ... [ str ...

  10. Exception 和 Error 包结构