CSS教室コミュニケーションエリアの問題点まとめ_html/css

質問 1: ブラウザ互換バージョンの inline-block 表示を実装する方法

質問 2: アダプティブレイアウトを実装する

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS教室コミュニケーションエリアの問題点まとめ_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:18 AM

質問 1: ブラウザ互換バージョンの inline-block 表示を実装する方法

display:inline-block; は、ie6 および ie7 では、デフォルトの表示モードがインラインである要素に設定されている場合にのみ有効になります。 ie7の一般的な方法であるie6との互換性を実装してください。

display:inline-block 属性を使用する: inline 要素または block 要素をインラインブロック要素にすることができます。簡単に言うと、float 属性を追加せずに独自の幅と高さを定義できます。同時に要素を親要素の中央に表示しやすくします！

inline 要素が inline-block を使用している場合、すべてのブラウザーは正常に表示されます。注: inline-block 属性を使用すると、IE でレイアウトがトリガーされるため、要素に設定された幅と高さが有効になり、表示効果が他のブラウザーと一致します。IE6/7 は display: inline をサポートしているとは言えません。 -ブロック！

inline-block がブロックレベルの要素に使用される場合、ie6 と ie7 で問題が発生します。 ie6/ie7では、ブロック要素のレイアウトはdisplay:inline-blockによってのみトリガーされ、それ自体は行レイアウトであるため、トリガー後もブロック要素は行レイアウトのままであり、インラインのようにレンダリングされません。 Firefox などの他のブラウザのリンクされたオブジェクト。

実際に効果的な方法は 2 つあります:

方法 1: インラインオブジェクトとしてレンダリングされるブロック要素を直接設定し (display:inline 属性を設定)、ブロック要素のレイアウト (ズームなど) をトリガーします。 1など）。さまざまなブラウザと互換性のあるコードは次のとおりです。

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

ログイン後にコピー

方法 2: まず、display:inline-block 属性を使用してブロック要素をトリガーし、次に、display:inline を定義してブロック要素をインラインオブジェクトとしてレンダリングします (2 つのディスプレイこれは IE
の典型的なバグです。最初に display:inline-block を定義してから、表示を inline または block に戻すと、レイアウト
は消えません)。コードは次のとおりです (...他の属性の内容は省略されています):

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

ログイン後にコピー

質問 2: アダプティブレイアウトを実装する

既知の HTML 構造とレンダリングは次のとおりです:

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

ログイン後にコピー

要件は、レンダリングで2カラム間の距離が10pxの場合は、この2カラムレイアウトのCSSを記述してください。 related主要な記事：

4水平方向の2列レイアウトの実装方法（左列固定、右列適応） :

水平 2 列レイアウト: 固定幅の左列、アダプティブ右列

方法 1 (推奨): assolute 属性を使用して実装します。注意してください: 固定幅の列の高さ > アダプティブ列の高さwidth 列

    <!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>

ログイン後にコピー

方法 2: float 属性 (ブロックレベルの要素を縦に並べて横に並べる) と margin 属性 (2 つの列の間の幅を設定する) を設定することによって

            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; }

ログイン後にコピー

方法 3: Flex レイアウトを使用する

    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; }

ログイン後にコピー

方法 4 : フローティング要素と重複する BFC 機能の使用

        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 機能について

質問 3: タブの実装図内の次のレンダリングと注釈に従って HTML と CSS を完成させてください:

最初のタブはによって選択されます。デフォルト。

回答:

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

ログイン後にコピー

質問 4: 次のレンダリングと要件に従ってポップアップウィンドウの HTML と CSS を完成させてください:

<!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>

ログイン後にコピー

回答バージョン 1:

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

ログイン後にコピー

回答バージョン2つ:

    <!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>

ログイン後にコピー

解答バージョン 3:

    <!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>

ログイン後にコピー

解答バージョン 4:

    <!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>

ログイン後にコピー

関連主要記事: 位置決めとセンタリングの問題に関するディスカッション

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。