CSS深入理解学习笔记之border
1、border-width
border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。
border-width支持关键字:thin、medium(默认)、thick,其大小分别是1px、3px、5px(IE7除外)。
border-width默认值为何是medium(3px):因为border-style为double的情况下至少要3px才能看出效果。
2、border-style
border-style为dashed的一些有趣数据:
border-style为dotted的浏览器差异:
IE的圆点效果可以用来实现IE7/8下的圆角效果。
border-style为double的计算规则:两边边框永远相等,中间间隔±1。
border-style为double实现三等分图标:
3、border-color
border-color与color的关系:border-color默认与color值相同,类似的还有box-shadow、text-shadow等。
4、border与三角等图形构建
利用border的solid风格,可以巧妙的实现三角的构建:
也可以通过拼接的方法,上下两个小梯形,形成圆角的效果:
5、border与透明边框
透明边框的功用:
- 增加点击区域。
- 增加可视渲染区域。
6、border在布局中的应用
border实现等高布局(border大小不能为百分比,所以左侧是固定宽度的):
CSS深入理解学习笔记之border的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解学习笔记之float
1.float的历史 float设计的初衷仅仅是为了文字环绕效果. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- CSS深入理解学习笔记之vertical-align
1.vertical-align基本认识 支持的属性值: ①线类:baseline(默认),top,middle,bottom ②文本类:text-top,text-bottom ③上标下标类:sub ...
- CSS深入理解学习笔记之margin
1.margin与容器尺寸 元素尺寸:①可视尺寸 clientWidth(标准):②占据尺寸 margin与可视尺寸:①适用于没有设定width/height的普通block元素:②只适用于水平方向尺 ...
- CSS深入理解学习笔记之overflow
1.Overflow基本属性 overflow:visible(默认)/hidden/scroll/auto/inherit; visible:超出部分可见. hidden:超出部分隐藏. scrol ...
- CSS深入理解学习笔记之line-height
1.line-height的定义 定义:两行文字基线之间的距离. 注:不同字体之间的基线是不同的. 2.line-height与行内框盒子模型 行内框盒子模型: ①内容区域(content area) ...
- CSS深入理解学习笔记之relative
1.relative和absolute的相煎关系 限制作用:①限制left/top/right/bottom定位:②限制z-index层级:③限制在overflow下的嚣张气焰. relative和f ...
- CSS深入理解学习笔记之z-index
1.z-index基础 z-index含义:指定了元素及其子元素的"z顺序",而"z顺序"可以决定元素的覆盖顺序.z-index值越大越在上面. z-index ...
- CSS深入理解学习笔记之padding
1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...
随机推荐
- Win通过端口号结束进程
准备: 01在cmd中查看命令使用 格式:命令名称 /? 02netstat 03findstr C:\Users\Good>findstr /? 在文件中寻找字符串. ...... strin ...
- 扩展jQuery---选中指定索引的文本
<script type="text/javascript"> //1.扩展jQuery $.fn.selectRange = function (start, end ...
- POJ1358 Agri-Net
题目链接 就是裸的最小生成树,复习一下. prim算法: G=(V,E),V是点集,E是边集 假设T=(U,TE)是最小生成树.U,TE初始化为空 首先从V中任取一点 假设取V1,然后U={V1},只 ...
- Android SharedPreferences应用实例(记录App的使用次数)
1.介绍 2.使用方法 3.java后台 package com.lucky.test46sharedpreferences_apply; import android.content.SharedP ...
- 洛谷 P4568 [JLOI2011]飞行路线
题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的 ...
- Sasha and a Bit of Relax(前缀异或和+二维数组+思维)
Sasha likes programming. Once, during a very long contest, Sasha decided that he was a bit tired and ...
- Cannot reinitialise DataTable 问题
加个 destroy:true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
- 03-树2 List Leaves (25 分)
Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...
- n个骰子的和,组成数字m的可能
//n个骰子的和,组成数字m的可能 function f(n,m) { if(n==1){ return 1; } var len=m-n; var sum=0; while (len>=0){ ...
- 2019.3.13 Java实现分数的四则运算
Java实现分数的四则运算 自己的写法 markdown太久没写格式不会用了--将就着看 Fraction.java package com.lanou; public class Fraction ...