https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮动的包裹与破坏 包裹 收缩 坚挺 隔绝 - BFC 具有包裹的其他属性:(是不是可以生成块级上下文的其他属性?) display: inline-block.table-cell... position: absolute(近亲).fixed.sticky overflow: hidden.scro…

支持负值的属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐的位置与前后元素都没有关系元素vertical-align垂直对齐的位置与行高line-height没有关系.vertical-align垂直对齐的位置只与font-size大小有关. 一.vertical-align支持的属性值及组成: 1.支持继承: inherit 继承 2.其他四类属性值:a. 线类: baseline(vertic…

overflow基本属性值 visible(默认值):超出依然显示 hidden :超出隐藏 scroll :超出,滚动显示.子元素不超出也会有滚动条的那条轨道. auto:如果超出,滚动显示.如果不超出,也不会有滚动条的位置. inherit:ie8+,继承父元素的overflow属性值. overflow-x/y(ie8+)规范: 如果overflow-x.overflow-y的值相同,则等同于overflow设置了这个值. 如果overflow-x.overflow-y的值不相同,且其中一…

一.line-height line-height: 指两行文字基线之间的距离. 行高200px表示两行文字基线之间的距离是200px: 二.基线:baseline 字母x下边缘的位置 基线是任意线定义的根本(底线,中线,顶线,文本上边缘线,文本下边缘线等) 不同语言体系,基线位置不一样. 相同语言的不同字体,基线位置也不一样 三.行高让单行文本垂直居中 并不是真的垂直居中!!只有字体大小为0的时候,才能真正的垂直居中. 四.行内框盒子模型 1. 内容区域(content area) 围绕文字看…

[padding地址](https://www.imooc.com/learn/710) 一.padding与容器尺寸之间的关系 padding会影响元素的尺寸(通常情况下是通过增加/挤压内容区域) padding对于block元素的表现 1.没宽度设置的情况:垂直方向向外扩张,水平方向向内挤压. 上下padding会增加元素占据的尺寸(即看上去高度在增加), 左右因为元素宽度已经auto,不会变化.但是内容区域会在水平方向上被挤压. 2.不管有没有高度设置:垂直方向的向外扩张 也不会挤压垂直方…

margin - 人若犯我,我必犯人! [margin地址](https://www.imooc.com/learn/680) 一.margin与容器尺寸的关系 relative可定位,但是不改变容器尺寸和占据的空间margin不同,margin也在盒模型中.从border开始往里边,是可视尺寸clientWidth部分.加上margin,是占据尺寸outerWidthmargin可以改变元素尺寸,正值宽度变小,负值宽度变大.margin也可以定位 二.margin的百分比单位 margin:…

一.z-index语法.支持的属性值等 z-index: 在支持z-index的元素上, z-index规定了元素(包括子元素)的垂直z方向的层级顺序, z-index可以决定哪个元素覆盖在哪个元素上边.(这个学过ps的,想象一下图层的概念,z-index就像是调整图层的上下顺序.) z-index在css2.1中需要和定位元素(position为relative.absolute.fixed.sticky等这些)配合使用才有作用. 属性值 z-index:auto; z-index:整数值;(…

relative地址 relative 对 absolute的限制作用 限制left/top/right/bottom(方位值)定位 限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的.如果父元素设置了relative,方位值就会相对于这个父元素,所以说relative限制absolute的方位值目标对象. 限制z-index层级 限制描述: 父元素没有relative的时候,绝对定位元素的z-index值越大,则层级越高. 但是如…

absolute地址 absolute绝对定位 绝对定位与浮动鲜为人知的兄弟关系 即是说,absolute后,元素和浮动元素的特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在凡间. 所以,absolute元素的特性: 包裹性 容器使用absolute后,就形成一个inline-block包裹了内部元素,具有包裹性. 破坏性 子元素绝对定位,脱离父元素文档流,父元素高度塌陷. 这俩特性和float是一模一样的,所以说其兄弟关系. absolute和relative的关系…

border地址 border特性: 能形成BFC但是不能清除浮动.但是bfc也是把子元素的margin包裹进来,但是拿自己的margin穿透没办法的. 边框宽度不支持百分比 透明border可以突破可视区域的限制 border-style:double巧用 double可以利用来配合border-style:solid制作三条杠小icon 具体代码见下边 border-style:dotted来做圆 <h3>原理:border-style:dotted在ie中是圆点,在其他浏览器是小方点&l…