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 つあります:
div {display:inline-block;*display:inline; *zoom:1;...}div {display:inline-block;...}div {*display:inline;}既知の 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>
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; }
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; }<!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>总体：弹窗相对于浏览器窗口固定（即滚动条拖动时不影响弹窗位置）且水平垂直居中，弹窗总宽度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> <!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>関連主要記事: 位置決めとセンタリングの問題に関するディスカッション
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
