![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 58
「已注销」
这个作者很懒,什么都没留下…
展开
-
relative学习笔记
relative对absolute的限制作用:限制left/top/right/bottom定位: 父元素使用了relative定位后,使用了absolute的子元素无法越过父元素进行定位;限制z-index层级: 使用了relative定位的同级元素,其本身的z-index值将决定其子元素的z-index层级;限制在overflow下的嚣张气焰: 子元素设置了absolute定位时,其原创 2018-03-04 20:01:59 · 926 阅读 · 0 评论 -
padding学习笔记
对于inline元素padding影响水平尺寸 不影响垂直 但是影响背景色inline水平元素的padding百分比值 同样相对于宽度计算默认的高度宽度细节有差异padding会断行inline就算是空白元素,padding高和宽也不想等 是因为:inline元素的垂直padding会让“幽灵空白节点”显现,也就是规范中的”strut”出现。对于block元素即使是设了box-s原创 2018-03-04 20:01:17 · 470 阅读 · 0 评论 -
overflow学习笔记
overflow当overflow-x 与 overflow-y值相同时 ,等同于overflow当overflow-x 与 overflow-y值不相同时,且其中一个值为visible,另一个被赋予,hidden,auto,scroll那这个visvible会被重置为auto; overflow: 作用前提非 display: inline 水平对应方位的尺寸限制: width/hei原创 2018-03-04 20:00:45 · 347 阅读 · 0 评论 -
margin学习笔记
margin与可视尺寸 滚动容器上下留白,非Chrom浏览器底部不留白(padding上下边距设置无效)此时应使用margin margin与百分比单位 margin 重叠 宽高 2:1 margin 重叠 margin重叠的计算规则 善用margin重叠margin:auto * 高度无法自动填充 margin 负值定位原创 2018-03-04 20:00:15 · 457 阅读 · 0 评论 -
line-height学习笔记
line-height定义,又称行高 line-height 两行文字之间基线(或中线,或顶线)之间的距离,不是指行间距不同的字体 基线位置也不一样不同的语言基线是不一样的 line-height为零,两行文字重合通常我们说:line-height 可以使单行文本自动垂直居中(事实上并没有垂直居中,而是稍偏下,具体缘由见下回分解)图片也是属于文本,当文本字体是14px时,通过l原创 2018-03-04 19:59:34 · 223 阅读 · 0 评论 -
float深入学习笔记
float的设计初衷: 仅仅是为了实现文字环绕效果float的感性认知:包裹性: 1. 收缩:元素应用了float后,宽度收缩,紧紧地包裹住内容(即元素的宽度收缩到元素内的内容的宽度大小) 2. 坚挺:原来没有高度,但元素应用了float后,元素的高度突然扩展到内容的高度大小 3. 隔绝:元素应用了float后,盒子里面的内容发生了任何事情,都与盒子外的内容无关(BFC) 破坏性: 1.原创 2018-03-04 19:58:57 · 197 阅读 · 0 评论 -
border深入学习笔记
border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。实例: border-style:dotted solid double dashed; 上边框是点状 右边框是实线 下边框是双线 左边框是虚线double的妙用绘制菜单图形 <div class="a"></div>.a{width:40px; height: 6px;border-top:原创 2018-03-04 19:58:14 · 142 阅读 · 0 评论 -
absolute深入学习笔记
absolute与float的兄弟关系:都具有包裹性(父元素应用绝对定位后,父元素的宽度会收缩,但保持包裹住子元素的状态)都具有破坏性(子元素应用绝对定位后,父元素的高度会塌陷)absolute与relative:当子元素只是浮动到父元素的左上角(left:0; top:0;)处时,父元素不必设置 position: relative; ,子元素直接设置 position: absolute原创 2018-03-04 19:57:13 · 706 阅读 · 0 评论 -
vertical-align学习笔记
vertical-align 支持的四种类型(支持inherit 继承) - 数值百分比类 vertical-align起作用的前提 vertical-align应用于inline水平和table-cell元素 - block不生效 - 间接改变元素属性,vertical-align也会失效,如float,absoulate table-cell(作用于自原创 2018-03-04 20:02:37 · 572 阅读 · 0 评论