CSS课堂交流区问题汇总

问题一：如何实现浏览器兼容版的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结构和效果图如下：

<div class="parent">
    <div class="side">侧栏</div>
    <div class="main">主栏</div>
</body>

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

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

解答版本一：

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>Document</title>
        <style type="text/css">
        /*圣杯布局*/
        .parent {
            color: #fff;
            font-size: 25px;
            text-align: center;
            padding-left: 210px;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .main {
            background-color: blue;
            float: left;
            width: 100%;
            height: 100px;
            line-height: 100px;
        }
        .side {
            background-color: red;
            float: left;
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin-left: -100%;
            position: relative;
            left: -210px;
        }
        /*双飞翼布局*/
        .parent1 {
            color: #fff;
            font-size: 25px;
            text-align: center;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .box {
            margin-left: 210px;
        }
        .main1 {
            background-color: blue;
            float: left;
            width: 100%;
            height: 100px;
            line-height: 100px;
        }
        .side1 {
            background-color: red;
            float: left;
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin-left: -100%;
        }
        /*flex布局*/
        .parent2 {
            color: #fff;
            font-size: 25px;
            text-align: center;
            display: -webkit-flex;
            display: flex;
        }
        .side2 {
            background-color: red;
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin-right: 10px;
        }
        .main2 {
            background-color: blue;
            height: 100px;
            line-height: 100px;
            -webkit-flex: 1;
            flex: 1;
        }
        </style>
    </head>
    <body>
        <!-- 圣杯布局 -->
        <div class="parent">
            <!-- 主栏是页面的主内容，需要优先加载html -->
            <div class="main">主栏</div>
            <div class="side">侧栏</div>
        </div>
        <!-- 双飞翼布局 -->
        <div class="parent1">
            <!-- 主栏是页面的主内容，需要优先加载html -->
            <div class="box">
                <div class="main1">主栏</div>
            </div>
            <div class="side1">侧栏</div>
        </div>
        <!-- flex布局 -->
        <div class="parent2">
            <div class="side2">侧栏</div>
            <div class="main2">主栏</div>
        </div>
    </body>
    </body>
    </html>

演示结果：

解答版本二：

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

  • 方法一（推荐）：使用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为选中状态。

解答：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        #parent{width:574px;height:200px;border: solid 1px #999;text-align: center;box-sizing: border-box;z-index:1;}
        .item{position: absolute;display: none;background: #ffffff;top:60px;left: 10px;}
        ul{width: 100%;display: flex;}
        ul li{height:40px;background: #f1f1f1;flex-grow: 1;border-bottom: 1px solid #cecece;border-right:1px solid #cecece;list-style: none;}
        ul li a{ text-decoration: none;color: black;font: 14px "微软雅黑";line-height: 40px;}
        li:hover{border-bottom: none;background:none;}
        li:hover div{display: block;}
        li:first-child div{display: block};
    </style>
</head>
<body>
<div id="parent">
    <ul>
        <li><a href="#item1">课程内容</a><div class="item item1" id="item1">课程内容</div></li>
        <li><a href="#item2">学习计划</a><div class="item item2" id="item2">学习计划</div></li>
        <li><a href="#item3">技能图谱</a><div class="item item3" id="item3">技能图谱</div>
        </li>
    </ul>
</div>
</body>
</html>

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

总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。

标题栏：左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单行文字且超出隐藏并显示“...”，背景色为#eeeeee。

内容区：由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，字体均为12px的宋体。

段落：行高1.5倍。

按钮：水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。

关闭：宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png”

解答版本一：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        *{margin: 0;padding: 0;}
        .parent{width: 300px;border:1px solid #cccccc;border-radius: 5px;position:fixed;left:50%;top:50%;transform: translate(-150px,-75px);}
        .nav{font:14px/40px "微软雅黑";background:#eeeeee;padding:0 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
        .close{background: url(../x.png);position: absolute;cursor: pointer;height: 10px;width: 10px;top: 10px;right: 10px;}
        .content{background: white;font:12px/20px "宋体";}
        span{margin: 20px;}
        p{margin: 20px;line-height: 1.5;}
        .button{margin: 0 auto;width: 80px;height: 30px;background: blue;color: white;border-radius: 5px;margin-bottom: 20px;text-align: center;display: flex;align-items: center;justify-content: center;}

        </style>
    </head>
    <body>
    <div class="parent">
        <div class="nav">
            <span>标题栏</span>
            <div class="close"></div>
        </div>
        <div class="content">
            <p>内容区段落</p>
            <div class="button">确定</div>
        </div>
    </div>
    </body>
    </html>

解答版本二：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹窗</title>
        <style type="text/css">
            *{
                margin:0; padding:0;
            }
            html,body{
                height: 1000px;
            }
            .pop{
                box-sizing:border-box;
                width: 302px;
                border-radius: 5px;
                border: 1px solid #cccccc;
                position: fixed;
                z-index: 1;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%);

            }
            .head{
                width: 100%;
                height: 40px;
                font:14px "微软雅黑";
                vertical-align: center;
                background-color: #eeeeee;
                text-overflow:ellipsis;
                overflow: hidden;
                white-space: nowrap;
                position: relative;
                vertical-align: center;
            }
            .head p{
                text-overflow:ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin:10px 20px;
            }
            .icon img{
                width: 10px;
                height: 10px;
            }
            .icon{
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                width: 10px;
                height: 10px;
            }
            .body{
                margin: 20px;
                background: #ffffff;
                font:12px "宋体";
                text-align: center;
            }

            .body button{
                margin:0 auto;
                border-radius: 5px;
                text-align: center;
                width: 80px;
                height: 30px;
                color: white;
                background: blue;
            }
            .body p{
                margin: 0 auto 20px;
                line-height: 1.5;
                white-space: pre-wrap;
                width: 100%;
            }

        </style>
    </head>
    <body>
        <div class="pop">
            <div class="head">
                <p>标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏</p>
                <span class="icon">
                    <img src="../x.png">
                </span>
            </div>
            <div class="body">
                <p>内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落</p>
                <button type="submit">确定</button>
            </div>
        </div>
    </body>
    </html>

解答版本三：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            /* 只为看fixed效果 */
            .body
            {
                height: 12000px;
            }

            /*
                回退自身一半宽度和长度（估计值），使之位于中央 fixed定位。
                只有左上和右上角需要圆角。
            */
            .theBox
            {
                position: fixed;
                top: 50%;
                left: 50%;
                /*margin-left: -151px;
                margin-top: -100px;*/
                transform:translate(-50%,-50%);
                width: 300px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border: solid 1px #cccccc;
            }

             /*
                标题栏，用flex布局。justify-content控制元素均匀分散在两边，align-items控制元素垂直居中
               文本的溢出控制，text-overflow overflow  white-space搭配使用。
            */
            .titleBar
            {
                height: 40px;
                padding:0 20px;
                font-size: 14px;
                font-family: "Microsoft Yahei";
                background-color: #eeeeee;
                text-overflow : ellipsis;
                overflow: hidden;
                white-space: nowrap;
                display: flex;
                justify-content:space-between;
                align-items : center;
            }  

            /* cursor控制鼠标指针样式*/
            .XBtn
            {
                border: 0px;
                        background-image: url("../x.png");
                height: 10px;
                width: 10px;
                cursor: pointer;
            }

            /* 内容区域 设置有关文本的一些属性。*/
            .container
            {
                padding: 20px;
                font-size: 12px;
                font-family: "宋体";
            }

            /* 子元素选择器。设置行高。*/
            .container p
            {
                        line-height: 1.5em;
            }

            /* 按钮属性，用属性选择器选中。*/
            input[type = "button"]
            {
                display: block;
                margin: 20px auto 0;
                background-color: rgba(15, 89, 255, 0.85);
                color: white;
                width: 80px;
                height: 30px;
                text-align: center;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div class = "body">
            <div class = "theBox">
            <div class = "titleBar">标题栏<button class = "XBtn"></button></div>
            <div class = "container">
                <p>内容区段落</p>
                <input type = "button" value = "确定" />
            </div>
        </div>
        </div>
    </body>
    </html>

解答版本四：

    <DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>弹窗</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .popup_window{
        postion:fixed;
        width:300px;
        margin:25% auto 25%;
        border:1px solid #cccccc;
        border-radius:5px;
    }
    .title_bar{
        display:inline-block;
        padding:0 20px 0;
        width:260px;
        height:40px;
        font:14px "微软雅黑";
        background:#eeeeee;
        line-height:40px;

    }
    .close{
        float:right;
        position:relative;
        background-image: url("../x.png");
        width: 10px;
        height: 10px;
        top:-40px;
        right:10px;
        cursor: pointer;
    }
    .title_tip{
        width:150px;
        line-height:40px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
    }
    .content{
        padding:20px;
        background:#FFF;
    }
    .content p{
        font:12px/1.5 "宋体";
    }
    .sumbit_button{
        margin:20px auto 0;
        border-radius:5px;
        text-align:center;
        cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div class="popup_window">
        <div class="title_bar">
            <p class="title_tip">嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿嘿嘿哈嘿</p>
            <div class="close">
                <span>X</span>
            </div>
        </div>
        <div class="content">
            <p><strong>总体：</strong>弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度302px，高度未知（由内容区的内容决定），
            圆角半径为5px，边框为1px的实线，边框颜色为#cccccc。<br /><strong>标题栏：</strong>左右留白20px，高度为40px，文字为14px的微软雅黑且垂直居中，只显示单
            行文字且超出隐藏并显示“...”，背景色为#eeeeee。<br /><strong>内容区：</strong>由一个段落和一个按钮组成，四周留白20px，背景为白色，段落与按钮距离20px，
            字体均为12px的宋体。<br /><strong>段落：</strong>行高1.5倍。<br /><strong>按钮：</strong>水平居中、宽80px、高30px、蓝底、白字、文字居中、圆角半径为5px。<br />
            <strong>关闭：</strong>宽10px、高10px、距离上边框10px，距离右边框10px，鼠标为手型，假设关闭图标相对css的路径为“../x.png”</p>
            <div class="sumbit_button">
                <input type="submit" name="button" id="button" value="确定" style="width:80px;height:30px;color:white;background:blue;"/>
            </div>
        </div>
    </div>
    </body>
    </html>

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

时间： 2024-11-02 00:51:02

CSS课堂交流区问题汇总的相关文章

《页面架构》课堂交流区问题汇总

本课程为网易云课堂 - - 前端开发工程师 - - <页面架构>学习总结 居中布局 问题一:水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? ???? 解决方案: 方法一:子元素设置:display:inline-block + vertical-align:bottom <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g

个人对php，js，css字符串截取的办法汇总

下面的是个人对php,js,css字符串截取的办法汇总,对大神来说可能没什么含量,求少喷哦,当然可以学习教程增强自己的编程能力. 首先是PHP版本的. 其实只用mb_strimwidth一个函数就可以了,该函数的说明如下: mb_strimwidth -  获取按指定宽度截断的字符串 string mb_strimwidth ( string $str , int $start , int $width [,  string $trimmarker = "" [, string $en

css清除浮动的方法汇总

这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ----------------------------------以下是原文 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布

css使用遇到的问题汇总

利用css简单排除元素的第一个子元素 例如:排除表格的第一行 /*除了表格的第一行其他都显示为红色*/ table tr+tr{ background-color:red;/*除了表格的第一行其他都显示为红色*/ }

css 课堂笔记

css:层叠样式表  Cascading( [kæ'ske?d??] 级联)Style Sheet css基本语法结构:选择器{ 属性:值; 属性:值: ... } 三种主要的选择器: 标签选择器: 以HTML标签命名的选择器,直接控制对应的标签 p{font-size:16;} 类选择器: 在标签内加入class属性,选择器名为“.”加上对应的class属性值 .p1{font-size:16px;} ... <p class="p1">.......</p>

HTML CSS 中DIV内容居中汇总

转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valig

浏览器的CSS各种hack，大汇总

对着IE久了也有感觉了,在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑,所以hack这东西还是要掌握一点的.不废话直接贴图 记得之前在项目里面针对IE6的hack是这样写的_bakcground:#fff;其实这只是能给IE6用罢了. 黄色部分为选择器hack IE Hack IE系列浏览器的hack大略如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

CSS便捷开发小工具汇总

1.Prefix free 可以帮助开发者省去编写各种CSS3属性前缀的工作,只需要在页面中引入prefixfree.js即可. 2. Normalize 是一个CSS Reset工具, 相比传统的Reset, 它保留了有用的默认样式, 并对一些HTML 5 标签进行了一些一致化修正. 3. Grunt 是基于Node.js的自动化任务运行工具, 在完备的插件系统帮助下可以执行各种自动化任务, 常用的包括CSS/JS的自动合并压缩, LESS/SASS 的自动编译等. 原文地址:https://

Css颜色定义的方法汇总color属性设置方式

颜色的定义方式用rgb()里面带上十进制的数字来定义. color:rgb(211,123,135); 用预定义的颜色名称. color:red; rgba()最后一个参数是不透明度. color:rgba(1,23,45,0.5); 用hsl()函数 color:hsl(78,70%,90%); 用hsla()函数 color:hsla(234,100%,45%,0.9); 用hex表示. color:#02a2e2;