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 ...
随机推荐
- iOS苹果和微信中音频和视频实现自动播放的方法
通过下面的方式可以解决,在iPhone手机微信中正常自动播放. 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ <audio prel ...
- 1.1、Logistics Regression模型
1.线性可分VS线性不可分 对于一个分类问题,通常可以分为线性可分与线性不可分两种 .如果一个分类问题可以使用线性判别函数正确的分类,则称该问题为线性可分.如图所示为线性可分,否则为线性不可分: 下图 ...
- POJ_1703 Find them, Catch them 【并查集】
一.题面 POJ1703 二.分析 需要将并查集与矢量法则相结合.par数组用以记录父节点,rank用以记录与父节点的关系.如题意,有两种关系,设定0是属于同一个帮派,1表示不属于同一个帮派. 运用并 ...
- HDU - 1588 矩阵前缀和
题意:给定\(k,b,n,m\),求\(\sum_{i=0}^{n-1}f(g(i))\) 其中\(f(i)=f(i-1)+f(i-2),f(1)=1,f(0)=0\),\(g(i)=k*i+b\) ...
- naginx安装入门
一.nginx是什么 nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件.它是一个俄罗斯人lgor sysoev开发的,作者将源代码开源出来供全球使用. nginx比它大哥apach ...
- win10更新后电脑没声音问题
2018-07-18 问题描述: win10系统更新之后,发现电脑突然没声音了 解决方案: 找到了一个软件,测试超级好用,下载链接 链接:https://pan.baidu.com/s/1iKTHp7 ...
- docker run、commit报错
1.docker commit 报错 Error response from daemon: devmapper: Error mounting '/dev/mapper/docker-253:2-1 ...
- @font-face引用指定字体库(一)
创建 文件夹 font 存放指定字体库 在css文件中使用字体库: html, body{ font-family: "Microsoft YaHei",Arial,Helveti ...
- jquery:字符串(string)转json
第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...
- Apache Beam中的函数式编程理念
不多说,直接上干货! Apache Beam中的函数式编程理念 Apache Beam的编程范式借鉴了函数式编程的概念,从工程和实现角度向命令式妥协. 编程的领域里有三大流派:函数式.命令式.逻辑式. ...