4.内容计数器https://demo.cssworld.cn/4/1-11.php5。CSS计数器的字符串参数与嵌套示例页面的区别https://demo.cssworld.cn/4/1-18.phpinput和button空格的值为pre，当文本足够多时，会不会自动换行。按钮的white-space值是正常的，当文本足够多的时候，会自动包裹paddingbox-sizing。设置box-sizing:border-box，一般情况下，大小不会改变。如果padding的值足够大，那么width就无能为力了。例如：.box{width:80px;填充：20px60px；box-sizing:border-box;}，此时宽度无效，最终宽度为120px，里面的内容显示preferredminimumwidth属性值不支持负数，但支持Percentage，inline元素会打破行百分比计算规则：padding的百分比值无论是水平还是垂直，都是相对于宽度设计计算的。应用示例：https://demo.cssworld.cn/4/2-3.phppadding和图形生成示例页面https://demo.cssworld.cn/4/2-4.phpmargin属性值支持负值，支持百分比inline垂直方向的元素边距不生效示例：元素默认值为当前元素给元素添加负边距值，宽高不受影响。给子元素赋值，给子元素加负值。父元素的宽度不变，子元素的宽度发生变化。使用以上功能来做：自适应布局：https://demo。cssworld.cn/4/3-1.php两侧对齐布局marginmerge一般发生在垂直方向场景1.相邻兄弟元素的marginmergep{margin:1em0;}2.Parentandfirst/lastChildelementmargin合并https://demo.cssworld.cn/4/3-3.php计算规则positive和positive取最大值negative和negative取最负值如何防止margin合并防止margin-top合并1.设置父元素为blockFormattingcontext(BFC)元素（例如：overflow:hidden）2.父元素设置border-top值3.父元素设置padding-top4.在父元素和第一个子元素之间添加内联元素元素分离和防止margin-bottom合并1.父元素设置为块格式化上下文元素（例如：overflow:hidden）2.父元素设置border-bottom值3.父元素设置padding-bottom4.父元素和第一个子元素添加内联元素s在它们之间用于分隔5.父元素设置height,min-height或max-heightmarginautopadding规则1.如果设置了一侧，一侧是auto，那么auto就是剩余空间的大小。示例1https://demo.cssworld.cn/4/3-4.phpExample2html代码显示效果2.如果两边都是auto，则平分剩余空间3.marginauto实现纵横居中的html代码显示效果，marginautocenteredborder属性值不支持百分比，支持固定值；比如1pxborder-width关键字thin:thin,相当于1pxmedium(默认值):uniforminthickness,相当于3pxthick:thick,相当于4px为什么medium是默认值，因为border-style:double必须至少为3px要有效果border-style关键字dashed:dottedlinedotted:小点dottedlinesolid:实线double:双线borderborder-colorborder-color默认颜色为color的值，类似css属性outlinebox-shadowtext-shadow等的实际应用https://demo.cssworld.cn/4/4-1.php只需要一个地方就可以达到类似的效果。实际使用三个手柄增加点击区域绘制三角形图形绘制多边形边框等高布局https://demo.cssworld.cn/4/4-4.php内联元素和流字x为基线vertical-align：基线；定位ex，不受字体和字号及单位影响https://demo.cssworld.cn/5/1-1.phpline-height属性值不支持负数，支持百分比，支持固定数字：line-height:1.2supportspx:line-height:10px不能影响替换元素line-height:normal跟设置字体有关系。不同的字体可能不一样。不管inline元素的line-height怎么设置，最后谁最大谁生效。line-height决定行内元素的大小https://demo.cssworld.cn/5/2-1.php行距等于line-height-font-sizehttps://demo.cssworld.cn/5/2-2.phpline-height让单行文字近似垂直居中：很明显，只是近似垂直居中line-height让多行文字近似垂直居中：https://demo.cssworld.cn/5/2-4.phpNovertical-align:middleeffectLine-height继承https://demo.cssworld.cn/5/2-5。phpvertical-align生效的条件如下。css属性都支持display:inlinedisplay:inline-blockdisplay:inline-tabledisplay:table-cell下面的标签也支持imgbuttoninput等替换元素td其他block元素(display:block)不支持！！！属性值线类基线（默认值）topmiddlebottom文本类text-toptext-bottom上标下标类subsuper数值百分比类-20px20px2em20%示例使用vertical-align值实现文本和小图标对齐示例页面https://demo.cssworld.cn/5/3-2.php使用vertical-align值实现文字和小图标对齐示例页面https://demo.cssworld.cn/5/3-3.phptable-cell和Vertical-align属性关系说明示例页面https://demo.cssworld.cn/5/3-4.php图片底部有空隙的示例页面https://demo.cssworld.cn/5/3-5。PHP计算规则vertical-alignpercentage值是相对于line-height计算的margin和paddingtopercentage值是相对于width计算的line-height的百分比值是相对于font-size计算的两端对齐列表的gap问题示例页面https://demo.cssworld.cn/5/3-6.php数学公式实现水平和垂直居中。这个布局还是很不错的https://demo.cssworld.cn/5/3-10.phpcsshtml流的破坏和保护Float特性封装自适应块和格式化上下文块是一个元素一旦float的属性不是none，display值为block或table文档流销毁无边距merged属性值Textwrappinghttps://demo.cssworld.cn/6/1-1.php两列自适应布局使用float销毁流的示例页面featurehttps://demo.cssworld.cn/6/1-2.phpclear属性值none默认值left左侧浮动right右侧浮动both两侧浮动有效条件只对块元素有效，这就是为什么::after等伪元素要清除浮动时需要加上display:block，因为伪类默认内联元素clear:both不清除浮动，而是让自己不显示在带有浮动元素的一行。它并没有完全清除浮动，所以它保留了稍后元素到浮动的特性。1、如果clear:both元素是float元素，即使margin-top负值设置为-9999px也没有效果。2.Clear:bothcomeslater元素可能仍然有文字环绕。https://demo.cssworld.cn/6/2-1.php块格式化上下文（BlockFormattingContext,BFC)如何触发BFChttps://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context函数1.处理marginmerge2.清除浮动3.fluidlayoutoverflow属性值visibledefaultvalue隐藏内容被修剪，其余内容不可见滚动内容被修剪，但浏览器显示滚动条以查看其余内容规定溢出属性的值应该从父元素继承。永远不可能实现一个方向的溢出切割或者滚动，导致内容在一个方向溢出的效果。但是scrollautohidden这三个属性值是可以共存的。滚动条不晃动。点定位和溢出标签切换效果示例页面足够学习和使用，体验不是很好https://demo.cssworld.cn/6/4-2.phpfocus锚点定位和溢出标签切换效果示例页面https：//demo.cssworld.cn/6/4-3。phpabsolute属性不能与float共存。浮动失效可能不适用。元素，如果元素的位置是相对的或静态的，则包含块是从其最近的块容器祖先框到contentx框边界3。如果元素位置：固定，则包含块是初始包含块，即,html4.如果元素position:absolute，则包含块从position不是静态的最近的祖先元素建立一个非依赖定位实例，需要熟练记忆。例1HTML代码效果，如果文档流很多，会自动出现滚动条，不影响定位，比如demo元素有滚动条就不行。详见示例2：示例2html效果解决方案：修复“绝对定位”和导航图标定位示例页面https://demo.cssworld.cn/6/5-5.php不依赖“绝对定位”和布局示例页面超越常规布局https://demo.cssworld.cn/6/5-6.php《无依赖绝对定位》及以下内容拉列表定位示例页面https://demo.cssworld.cn/6/5-7.phptext-align实现右外定位效果示例页面https://demo.cssworld.cn/6/5-10.phpabsolute和溢出的定义：溢出对绝对元素的裁剪规则用一句话表达：绝对定位的元素并不总是被父溢出属性裁剪，尤其是当溢出在绝对定位元素和它的包含块之间时。上面这句话是官方文档的直译，好像有点啰嗦。换句话说：如果overflow不是定位元素，绝对定位元素和overflow容器之间没有定位元素，则不会被裁剪：overflow:hidden.box{　宽度：300px；高度：100px；　背景色：#f0f3f9；　溢出：自动；}.box>img{　宽度：256px；高度：192px；　位置：绝对；}例子：https://demo.cssworld.cn/6/5-11.phpabsolute和纵横居中不固定宽高使用transform:translatehtml代码效果固定宽高使用margin:autohtml代码效果模拟固定定位相对计算规则相对定位元素到left/top/right/bottom的百分比值是相对于包含块计算的，而不是本身。注意：虽然定位位移是相对于自身的，但百分比的计算值并不是。同时使用relative的top/bottom和left/right时，其表现与absolute不同。它们只在一个方向上起作用。计算规则如下。默认文档流是从上到下，从左到右。因此，top/bottom同时使用时，bottom会被移除，left/right同时存在时，rigt会被移除。relative定位和margin定位对比示例的区别达到了同样的效果。区别如下。元素生成了，但是一个普通的元素2。如果是桌面端，让根元素加上overflow:hidden3。如果是移动端，防止touchmove事件的默认行为，防止滚动。Clip可以切割absolute和fixedtransform。溢出的影响1。Transform裁剪overflow元素本身（IE9以上的Chrome和Opera不裁剪）2.Transform裁剪overflow子元素（IE9以上的Chrome和Opera也裁剪）fixed会导致修复失败。cssworldtocascadingrulez-index定义：只有定位元素（位置不是静态的元素）才会生效。理论上，数值越大，等级越高。z-index可以是负值来堆叠上下文英文：stackingcontent，是一个三维的概念，如果一个元素有堆叠上下文，那么这个元素在z轴上是“上级”的。层叠层级英文：stackinglevel，决定了同一层叠上下文中元素在z轴上的显示顺序。css2.1css3级联上下文的级联规则1.元素为flex布局元素（父元素显示：flex|inline-flex），z-i索引值不是auto2。元素的不透明度值不是13。元素的变换值不是none4。元素的最小混合模式值不正常5。元素的过滤值不是none6。隔离值的元素是isolate7。元素的will-change属性取值为以上2-6中的任意一项。8、元素的-webkit-overflow-scrolling设置为touch。强大的文本处理能力隐藏元素的新方法font-size:0text-indent:-999px存在隐患word-break和word-wrap的区别https://demo.cssworld.cn/8/6-5.phptext-transform还是很有用的。它可以自动将输入值转换为隐藏元素的大写或小写背景图像。添加或不加载1。如果隐藏的元素同时设置为background-image，那么加载的图片仍然是不可见的。如果子元素设置为visibility:visible，子元素将被显示。这与显示示例不同：https://demo.cssworld.cn/10/2-3.phpoutline放大镜https://demo。cssworld.cn/11/1-1.php自动补满剩余空间https://demo.cssworld.cn/11/1-2.phphtml代码效果