第8章 内边距,边框,轮廓和外边距
8.1 基本元素框
文档中的每个元素都会生成一个矩形框,称之为元素框;
8.1.1 宽度和高度
宽高无法应用到行内百置换元素身上.默认情况下
- width: 左右内边界的距离
- height: 上下内边界的距离
正常流动模式下,元素很少直接设定高度,通过box-sizing可以改变宽高的意义.
8.2 内边距padding
默认情况下,元素背景延伸到内边距区域,通过background-clip可以修改背景的显示范围
8.2.1 复制
连写是,从上开始,顺时针TRouBle这个挺有意思的.
1,2,3,4个写法分别对应的值,还是看那个图方便些,用文字描述非常容易搞晕
8.2.2 单边内边距
就是padding-left等
8.2.3 内边距百分数值
这里要非常注意,百分数值相对父元素内容区的宽度计算.不仅是左右内边距,上下内边距也是一样的.
- 定位元素,弹性布局,栅格布局是相对于容纳块计算的
8.2.4 行内元素的内边距
上下内边距只影响背景填充位置,不影响行内框的高
左右外边距有实际影响 ,在换行后根据7.3.4的规则处理
8.2.5 置换元素的边距
会影响置换元素的行高.
但是表单元素是个例外
8.3 边框border
默认情况下
- 元素的背景在边框以内(在虚线边框中影响很大)
- 边框颜色是前景色
8.3.1 边框的式样border-style
规范上一共有10种规范,由于应用场景和兼容性问题,主要只用里面4种就行了
- solid: 实线
- dotted: 圆点
- dashed: 虚线
- none: 不显示
多个式样
一个元素的上下左右可以用不同的边框
p { border-style: solid dashed dotted none; }
单边式样 即单独给某一边设置边框
8.3.2 边框的宽度border-width
惟一需要注意的就是,相交点的渲染原理.通过这个来设置三角形.
8.3.3 边框颜色border-bolor
透明边框 可以通过利用这个属性,来调整高亮效果,以避免重排页面
8.3.4 简写的边框属性
这个没啥好记得.用烂了的
8.3.5 整个边框
照样不记
8.3.6 行内元素的边框
处理方式在7.3.4里有笔记 了
8.3.7 圆角边框border-radius
圆角的半径是一个圆或随圆的半径.这里还是要借助书上那几副图才好理解.
- 设置的圆角值,是指,在边框指定的位置处向内弯曲
- 圆角会改变背景和边框的绘制方式
- 但不会改变元素框的形状
- 如果半径太大,覆盖到其他角,就会显示圆形
终于说是把圆角的原理给搞懂了
复杂的圆角形状/
- 斜线前面是指各圆角的横向半径
- 斜线后面是指各圆角的纵向半径
- 都支持简写,具体规则和Padding一样
div { border-raidus: 1em / 2em;}
div { border-raidus: 1em 1em / 2em 2em 2em 2em}; // => 两者等价
圆角过渡 这是说,当上下左右边框颜色或者宽度不一样时,怎么过渡的..这个场景很少,并且完全由浏览器控制,所以知道有这么个玩意儿就行了
单独的圆角属性 即单独给某一个角设置
8.3.8 图像边框
这一索感觉有点复杂,可能平时用的少的原因吧.
加载边框 border-image-source
图像路径
裁剪边框图像 border-image-slice
在图像上放4条线,交叉得到的9个区域分别填充到对应的边框上.
- 如果裁剪线重合,图像就只出现在角上,边上为空
- 如果裁剪后的尺寸小于边的尺寸,则要自动拉伸
fill关键字可以让中间部分的边框显示出来,是绘制在背景之上的
调整图像的宽度 border-image-width
默认情况下,边框图像完全填满边框区域.通过设置这个值,可以裁剪边框自身
- 百分比相对边框的整体尺寸,而不是border-width的值
- 两边的百分比加起来大于100%后,会自动减少比例
外推边框 border-image-outset
- 就是把边框向外移动一点的作用
这些属性肯定很少用到,复现一下即可,不必深究
边框重复方式 border-image-repeat
- stretch 默认值,拉伸
- repeat 从边框中间向两边平铺,到达边界后截断
- round 用边框长度除以图像尺寸,向上取整,然后平铺,可能会拉伸压缩
- space 用边框长度除以图像尺寸,向下取整,然后平铺,中间留白,这个在chorme下实验有拉伸
简写属性 这个简写属性太麻烦了,可读性不高.难得去简写.不记了
几个例子
开始记笔记的时候,记得我想吐啊,这些属性也太操蛋了,但是看到示例代码的效果,其优雅的写法,深深的折服了我啊.所以基础还是要硬着头皮过一下.
8.4 轮廓outline
轮廓一般绘制在边框外侧
- 轮廓不占空间
- 可以不是矩形
- 用户代理通过在
:focus状态时渲染轮廓 - 不能单独为一边设置效果
8.4.1 轮廓样式outline-style
和边框样式差不多,只是多了个auto由用户代理自定义
8.4.2 轮廓宽度
8.4.3 轮廓颜色
8.4.4 简写属性
8.4.5 与边框的区别
上面的所有东西和边框差不多.惟一就是没有简写属性...
或许在某些不需要高度计算的场景下,可以用到轮廓.甚至是所有场景下都可以替换掉边框了,因为他不会对盒子模型造成任何影响.
8.5 外边距
默认值是0,但是很多浏览器会为一些元素设置具体的值,比如p标签一般都有上下margin.
8.5.1 外边距的长度值
没啥好记的
8.5.2 百分数值
与内边距一样,百分数是相对于父元素的内容区宽度计算的
- 不仅宽度是这样
- 高度也是相对于内容区宽来计算的
8.5.3 单外边距属性
也没啥好记的
8.5.4 外边距折叠
相邻的两个或多个上下外边距会折叠为其中最大的那个外边距.
- 实际原理是,数值小的外边距会被重置为0,只取数值大的外边距
- 在父元素上设定内边距或边框等可以阻止外边距折叠
8.5.5 负外边距
左右设置负外边距时,超出了父元素,视觉效果看上去,子元素比父元素宽,但实际他们的宽度还是一样的.
上下设置父外边距时,超出了父元素,会实际减小父元素的宽度
8.5.6 行内元素的外边距
- 行内非置换元素上,上下外边距没任何用
- 左右会有影响,且断行后的影响方式还要参考
box-decoration-break属性值来渲染
