长时间不用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. SpringMVC+MyBatis 返回时间格式转换的解决方案

    Spring MVC 4.X ResponseBody 日期类型Json 处理 摘自http://tramp-zzy.iteye.com/blog/2090330  2014-07-10 方法一:全局 ...

  2. 【JAVA】Pattern和Matcher

    ZZ: Java正则表达式:Pattern类和Matcher类 一.捕获组的概念 捕获组可以通过从左到右计算其开括号来编号,编号是从1 开始的.例如,在表达式 ((A)(B(C)))中,存在四个这样的 ...

  3. CentOS 7 vim显示中文乱码

    使用xshell的时候,发现有时候中文显示有乱码,一开始以为是Xshell没设置好,后来检查了一下xshell<<文件<<属性<<终端:右侧编码,显示的是Unico ...

  4. Java 必看的 Spring 知识汇总

    Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅仅限于服务器端的开发.从简单性.可测试性和松耦 ...

  5. java enum用法

    基本用法 enum Day { SUNDAY, MONDAY, TUESDAY, WENDSDAY, THURSDAY, FRIDAY, SATURDAY; } 枚举是常量,所以应该用大写. 枚举是对 ...

  6. poj 2104 可持久化线段树

    我们先离散化,然后根据权值建立线段树,假设我们现在有一颗权值线段树,表示在区间1-n中每个数出现了几次,那么我们可以二分的求出来这个区间的k大值,类似sbt的select操作,那么因为点的权值插入是无 ...

  7. C++之初始化问题

    首先,我们应该明确的是在C++中初始化不是赋值,因为初始化是必要的,如果读取了未初始化的值将会导致不明确的行为.初始化指创建变量并且给它赋初值,而赋值则是擦除对象的当前值并用新值代替.C++支持两种初 ...

  8. pycharm模板参数

    # -*- coding: utf-8 -*-# @Time : ${DATE} ${TIME}# @Author : cxa# @File : ${NAME}.py# @Software: ${PR ...

  9. hadoop InputFormat 类别

    FileInputFormat是所有使用文件作为数据源的InputFormat的积累.它提供两个功能:一个是定义哪些文件包含在一个作业的输入中:一个为输入文件生成分片的实现.自动将作业分块 作业分块大 ...

  10. ACE_INET_Addr类 API

    ACE_INET_Addr类,在这个ACE_网络框架中,应该是比较重要的辅助类,该类主要封装了C SOCKET 的地址对象,通过外观封装的模式,把struct sockaddr_in封装在内.方便用户 ...