当前位置：Gxlcms > html代码 > CSS课堂交流区问题汇总_html/css_WEB-ITnose

CSS课堂交流区问题汇总_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：25人阅读

问题一：如何实现浏览器兼容版的inline-block显示

display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效，请实现兼容ie6、ie7的通用的方式。

使用display:inline-block属性:可以使行内元素或块元素能够变成行内块元素，简单直白点讲就是不加float属性就可以定义自身的宽、高，同时又能使该元素轻松在父元素居中显示！

如果是内联元素使用了inline-block，那所有的浏览器显示都是正常的。注：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果 , 而不能说IE6/7支持 display:inline-block！

如果是块级元素使用了inline-block，那在ie6和ie7中是有问题的。ie6/ie7中块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会像火狐等其他浏览器块元素呈递为内联对象。

实际有效的方法共有2种：

方法1：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。兼容各浏览器的代码如下：

div {display:inline-block;*display:inline; *zoom:1;...}

方法2：先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 样式声明中才有效果，这是 IE 的一个经典 bug
，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout
不会消失）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;...}div {*display:inline;}

问题二：实现一个自适应布局

已知HTML结构和效果图如下：

     侧栏
    主栏

要求如效果图中标注，两栏间距为10px，请写出这个两列布局的CSS。

相关重点文章： 横向两列布局（左列固定，右列自适应）的4中实现方式

解答版本一：

                                    Document                                                         主栏
            侧栏
        
                                                        主栏
            
            侧栏
        
                            侧栏
            主栏

演示结果：

解答版本二：

横向两列布局：左列固定，右列自适应

方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度

            body{ margin:0; padding:0; font-size:30px; font-weight:bold; }            .parent{ text-align:center; line-height:200px; }                .side{ position:absolute;left:0;top:0; width:200px; height:200px; background:red; }            .main{ margin-left:210px; background:blue; height:200px; }

方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）

    body{ margin:0; padding:0; font-size:30px; font-weight:bold; }        .parent{ text-align:center; line-height:200px; }        .side{ width:200px; height:200px; float:left; background:red; }        .main{ height:200px; margin-left:210px; background:blue; }

方法三：使用Flex布局

        body{ margin:0; padding:0; font-size:30px; font-weight:bold; }            .parent{ text-align:center; line-height:200px; display:flex; }             .side{ width:200px; height:200px; background:red; margin-right:10px; }            .main{ background:blue; height:200px; flex:1; }

方法四：利用BFC不与浮动元素重叠的特性

    .side2 { width: 200px; height: 100px; float: left; background: red; margin-right: 10px; }    .main2 { /* 创建BFC */ overflow: hidden; background: blue; height: 100px; }

关于BFC特性

问题三：实现一个Tab

请按以下效果图和图中标注完成HTML和CSS：

默认第一个Tab为选中状态。

解答：

                        课程内容课程内容
        学习计划学习计划
        技能图谱技能图谱

问题四：请按以下效果图和要求完成一个弹窗的HTML和CSS：

总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。标题栏：左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单行文字且超出隐藏并显示“...”，背景色为#eeeeee。内容区：由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，字体均为12px的宋体。段落：行高1.5倍。按钮：水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。关闭：宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“https://www.gxlcms.com/x.png”

解答版本一：

                            Document                                        标题栏            
        
                    内容区段落
            确定

解答版本二：

                            弹窗                                                    标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏
                                                                
                            内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落

解答版本三：

                            Document                                                     标题栏
                            内容区段落

解答版本四：

                    弹窗                                    嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿
                            X                    
        
                    总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），            圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。
标题栏：左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单            行文字且超出隐藏并显示“...”，背景色为#eeeeee。
内容区：由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，            字体均为12px的宋体。
段落：行高1.5倍。
按钮：水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。
            关闭：宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“https://www.gxlcms.com/x.png”

相关重点文章：一个定位和居中问题的探讨

CSS课堂交流区问题汇总_html/css_WEB-ITnose

问题一：如何实现浏览器兼容版的inline-block显示

问题二：实现一个自适应布局

问题三：实现一个Tab

问题四：请按以下效果图和要求完成一个弹窗的HTML和CSS：

人气教程排行