![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Deep CSS
Luffy_ying
这个作者很懒,什么都没留下…
展开
-
float
CSS中浮动的出现已经有很长时间的历史了,但是它的初衷是为了解决和Word中文字环绕效果类似的图文环绕效果,而不是图片一行,文字一行。所以它的特有的行为表现就和这个功能紧密联系在一起。 1.浮动的特性:包裹性(宽高还在) 具有包裹性的其他小伙伴有: display:inline-block/table-cell/... position:absolute/fixed/sticky ove原创 2016-12-31 14:56:04 · 383 阅读 · 0 评论 -
absolute
一、absolute and float 是兄弟关系,因为二者有两个共性: 包裹性 破坏性 二、有时我们在做定位的时候,经常这样: .father{position:relative;} .child{ position:absolute;top:10px;left:10px} 但是实际上,relative and absolute根本没有多大关系,当独立使用absolute的时候,你原创 2016-12-31 23:07:51 · 440 阅读 · 0 评论 -
border
一、border-width不支持百分比 边框不会因为设备大就增大,css中类似的还有:outline,box-shadow,text-shadow,... 二、支持关键字 thin:1px medium:默认值 , 3px (border-style:double 至少3px才有效果) thick:5px 三、类型 border-style:solid 实线 border-st原创 2016-12-31 23:55:28 · 403 阅读 · 0 评论 -
padding
一、对于block水平元素 (1)当padding的值 突然增大(很大,大于元素宽高),一定会影响尺寸 (2)当width:非auto,不会影响尺寸 (3)当width:auto或者box-sizing为border-box,而且padding值没有暴走,不会已经尺寸 二、对于inline元素 水平padding影响尺寸,垂直padding不影响尺寸,但是会影响背景色(占据空间) 实现原创 2017-01-01 12:19:21 · 1018 阅读 · 0 评论 -
relative
一、relative and absolut relative对于absolute的限制: (1)限制定位 当absolute使用top/left/bottom/right进行定位时,是相对最近已定位的父元素而言的 (2)限制层级 与最近已定位父元素的层级相同 (3)限制超越overflow absolute可以不管overflow:hidden(或者overflow:scroll等原创 2017-01-01 12:49:55 · 604 阅读 · 0 评论 -
margin
一、元素尺寸 我们看下标准盒模型 最里面的黑色实现框内宽为可视尺寸:clientWidth(标准) 之外的一层虚线内宽为占据尺寸:outerWidth(包含margin) 二、margin 与可视尺寸 (1)是用于没有设定width/height的普通block水平元素 不包括float absolute/fixed inline table-cell (2)只适用于水平方向原创 2017-01-01 15:13:23 · 353 阅读 · 0 评论 -
overflow
一、overflow基本属性 (1)visible默认 超出部分表现出来 (2)hidden 超出部分隐藏 (3)scroll 滚动条 (4)auto 哪侧溢出 那边出现滚动条 (5)inherit 二、作用的前提 (1)非display:inline (2)对应方位的尺寸限制 width/height/max-width/max-height/absolute拉伸 三、ove原创 2017-01-01 18:14:23 · 946 阅读 · 0 评论 -
line-height
line-height---行高(两个baseline之间的距离,基线) 一、属性值 (1)normal:默认 字体大小/100 (2)number 由当前元素的font-size大小决定 如:if(line-height=1.5) than line-height = 1.5 * 20px = 30px; (3)使用具体值 (4)使用百分值 如if(line-height=15原创 2017-01-01 18:46:30 · 327 阅读 · 0 评论