div的border & width
长时间不用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的更多相关文章
- 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 ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- 放假回来啦！！小技能：一个div不给width，怎么让它居中捏？`(*∩_∩*)′
答案是:这个div没有浮动的话,就用text-align: center; 有的话...我也不知道了
- MVC——数据库增删改查(Razor)
一.显示信息 .Models(模板) private MyDBDataContext _context = new MyDBDataContext(); //定义一个变量取出所有数据 public L ...
- DataTabe对象的例子
前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTable对象 ...
- literal控件的例子
Literal的Mode属性,举例说明 这个属性的枚举值:PassThrough Encode Transform <%@ Page Language="C#" Auto ...
- 用Response对象的write方法和<%%>及<%=%>输出同样效果的乘法表格
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Response1.aspx ...
- css 对div用hover设置border，出现抖动和div走位问题，解决方法
样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移. 产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其 ...
- css样式之border
border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...
随机推荐
- 【Android】完善Android学习（三：API 3.0）
备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...
- 奇偶排序Odd-even sort
又一个比较性质的排序,基本思路是奇数列排一趟序,偶数列排一趟序,再奇数排,再偶数排,直到全部有序 举例吧, 待排数组[6 2 4 1 5 9] 第一次比较奇数列,奇数列与它的邻居偶数列比较,如6和2比 ...
- Codeforces Round #411 (Div. 2) A-F
比赛时候切了A-E,fst了A Standings第一页只有三个人挂了A题,而我就是其中之一,真™开心啊蛤蛤蛤 A. Fake NP time limit per test 1 second memo ...
- 【LA】5135 Mining Your Own Business
[算法]点双连通分量 [题解]详见<算法竞赛入门竞赛入门经典训练指南>P318-319 细节在代码中用important标注. #include<cstdio> #includ ...
- 20151024_002_C#基础知识(ArrayList,Hashtable,List,Dictionary)
1:ArrayList 和 Hashtable(哈希表) 1.1:ArrayList ArrayList list = new ArrayList(); list.Add(); list.AddRan ...
- Java 中的成员内部类
内部类中最常见的就是成员内部类,也称为普通内部类.我们来看如下代码: 运行结果为: 从上面的代码中我们可以看到,成员内部类的使用方法: 1. Inner 类定义在 Outer 类的内部,相当于 Out ...
- ACC026简要题解
这场AGC是时间正好在NOI之前休养生息的日子里,果断选择了放弃(虽然也从没有用大号打过).在随便做完了前几题之后就踏上了去长沙的旅程.NOI系列比赛总是休闲无比,咕咕不断,竟然连开幕式都能咕,今天A ...
- WmiPrvSE.exe进程(WMI Provider Host)不能删除
WmiPrvSE.exe进程基本信息:程序厂商:微软® Microsoft Corp.进程描述:WMI Provider Host进程属性:Windows系统进程使用网络:是的启动情况:触发启动 来历 ...
- Linux时间子系统之一：clock source（时钟源）【转】
转自:http://blog.csdn.net/droidphone/article/details/7975694 clock source用于为linux内核提供一个时间基线,如果你用linux的 ...
- python设计模式之单例模式（一）
单例设计模式的概念: 单例设计模式即确保类有且只有一个特定类型的对象,并提供全局访问点.一般我们操作数据库的时候为了避免统一资源产生互相冲突,创建单例模式可以维护数据的唯一性. 单例模式的特性: 确保 ...