一、盒模型之display（显示方式）
一、display组成部分解释
1、块（block）：其可以独行显示并且其自身支持宽高，其中宽可以设置为默认，高可以由子级或内容撑开（可以嵌套所有类型但是其中的p段落标签一般只允许内联嵌套）。
2、内联也叫行（inline）：其可以同行显示并且不支持宽高是因为其宽高是由内容决定的（一般嵌套内联）。
3、内联块（inline-block）：包含块和内联的所有特点，但是如果设置了宽高的话就一定要使用设置的宽高，如果值设置一种则按比例缩放（一般只作为最内层级）。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title> <!-- 默认值 --> <style type="text/css"> div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /* auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置 --> <style> .sup { /* 100px;*/ /*height: 100px;*/ background-color: orange } .sub { width: 200px; height: 200px; background-color: cyan } .s1, .s2 { width: 200px; height: 200px; background-color: brown } img { /* 350px;*/ height: 350px; } </style> </head> <body> <div></div> <span></span> <img src="./img/icon.jpg" alt=""> <img src="./img/icon.jpg" alt=""> <div class="sup"> <div class="sub"></div> </div> <span class="s1">123</span> <span class="s2">456</span> </body> </html>
二、盒模型之overflow（也为显示方式）
一、overflow基本组成属性
1、hidden：限制显示区域，超出父级区域的内容会被隐藏。
2、scroll：以滚动条的方式显示父级区域被裁剪的内容。
3、auto：将如果被裁剪的内容以滚动条的方式显示。
4、visible：默认值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>voerflow</title> <!-- 显示区域只能由父级大小决定 --> <style type="text/css"> /*子级区域大于父级*/ .sup { width: 100px; height: 100px; /*默认值*/ /*border: 3px none black;*/ /*清除边框*/ /*border: 0;*/ /*border: none;*/ /*最简单的设置*/ border: solid; } .sub { width: 200px; height: 200px; background-color: red } /*对父级进行overflow设置*/ .sup { /*以滚动的方式允许子级所有内容显示*/ overflow: auto; /*overflow: scroll;*/ /*只运行子级在父级所在区域的部分显示,超出的部分影藏*/ /*overflow: hidden;*/ } </style> </head> <body> <!-- display: block大环境下 --> <!-- <div class="sup"> <div class="sub"></div> </div> --> <div class="sup"> 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 </div> </body> </html>
三、盒模型之隐藏
一、隐藏的基本属性
简述：通过opacity（0,1）来设置背景的透明度0表示透明、1表示不隐藏
二、实现隐藏的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隐藏</title> <style type="text/css"> /*盒子间会相互影响*/ div { width: 100px; height: 100px; } .d1 { background-color: red; /*以背景颜色透明度隐藏,不需要掌握*/ /*盒子还在,内容或子级标签均会被显示*/ background-color: transparent; } .d2 { background-color: orange; /*以盒子透明度隐藏:0~1*/ /*盒子真正意思上透明,但盒子区域占位还在*/ opacity: 0; } .d3 { background-color: cyan; /*盒子从文档中移除,盒子的区域占位消失*/ /*当盒子重新获得显示方式,该盒子依旧从消失位置显示*/ display: none; } .d4 { background-color: yellow; } /*需求:通过悬浮body让d3重新显示*/ /*1.明确控制的对象 2.确定对该对象的修饰 3.找出修饰与对象的关系*/ /*body:hover .d3*/ .d1:hover ~ .d3 { display: block; } </style> </head> <body> <div class="d1">内容</div> <div class="d2">内容</div> <div class="d3"></div> <div class="d4"></div> </body> </html>
四、盒模型之border用法与margin用法
一、border用法
border用法二、margin用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>margin</title> <style type="text/css"> /*前提:sup显示区域宽全屏,高200px, sub显示区域宽高个100px*/ /*需求1:sup左上右顶格显示*/ html, body { /*body默认具有margin: 8px*/ margin: 0; } .sup { width: auto; height: 200px; background-color: red; } .sub { width: 100px; height: 100px; background-color: orange; } /*需求2:sub在sup的水平中央显示*/ /*.sup { 错误 text-align: center; }*/ .sub { /*上下0,左右auto*/ /*auto:左右auto,自适应(平方)剩余可布局空间*/ margin: 0 auto; } /*需求3:sub在sup的垂直中央显示*/ /*垂直会遇到margin父子坑*/ /*.sub { 不行 margin: auto; }*/ .sup { height: 100px; padding: 50px 0; } /*.sup { height: 100px; border-top: 50px solid red; border-bottom: 50px solid red; }*/ /*需求4:sub在sup的水平居右显示*/ .sub { margin-left: auto; /*margin-right: 0;*/ margin-right: 10px; } </style> </head> <body> <div class="sup"> <div class="sub"></div> </div> </body> </html>
五、盒模型之样式支持与层级结构
一、样式支持用法
、盒模型<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>样式支持</title> <!-- 认识a标签一般怎么操作 --> <!-- 需求:具有页面转跳功能的图片 --> <style type="text/css"> a { color: #333; text-decoration: none; display: block; } </style> <!-- 需求:图片在sup水平垂直中央显示 --> <!-- part1 --> <style type="text/css"> .sup { width: 500px; /*height: 500px;*/ background-color: red; } /*水平居中*/ /*display对margin的支持*/ /*block支持所有margin布局*/ /*inline与inline-block只支持margin上下布局*/ .sub { display: block; margin: 0 auto; } /*垂直居中*/ .sup { /*去除高度设置*/ padding: 50px 0; } </style> <!-- part2 --> <style type="text/css"> .box { width: 500px; height: 500px; background: url('img/icon.jpg') no-repeat center orange; } </style> </head> <body> <!-- 认识a标签一般怎么操作 --> <!-- 需求:具有页面转跳功能的图片 --> <!-- <a href=""> <img src="img/icon.jpg" alt=""> </a> --> <!-- 需求:图片在sup水平垂直中央显示 --> <!-- part1 --> <div class="sup"> <img class="sub" src="img/icon.jpg" alt=""> </div> <!-- part2 --> <div class="box"></div> </body> </html>
二、层级结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级结构</title> <style type="text/css"> .d5 { width: 200px; height: 180px; background: red; } .d2, .d3, .d4 { width: 80px; height: 40px; background: orange } .d4 { margin-left: 160px; margin-top: -80px; } /* .d3 { margin-left: 80px; margin-top: -40px; }*/ /*.d4 { margin-left: 160px; margin-top: -40px;*/ /* }*/ /*没有层级结构情况下:*/ /*1.盒子布局间相互影响程度很大*/ /*2.要严格遵循从上至下布局顺序进行布局*/ /*问题点:牵一发动全身*/ </style> <style type="text/css"> /*.menu { 200px; height: 100px; background: red; } .html, .css, .js { 80px; height: 40px; background: orange } .nav { calc(80px * 3); height: 40px; } .css { margin-top: -40px; margin-left: 80px; } .js { margin-top: -40px; margin-left: 160px;*/ } /*menu的布局只与nav有连带关系,与实际显示内容的html,css,js不具有任何连带关系*/ </style> </head> <body> <!-- 无层次结构 --> <div class="d1">w3c</div> <div class="d2">html</div> <div class="d3">css</div> <div class="d4">js</div> <div class="d5">menu</div> <!-- 有层次结构 --> <!-- <div class="title">w3c</div> <div class="nav"> <div class="html">html</div> <div class="css">css</div> <div class="js">js</div> </div> <div class="menu">menu</div> --> </body> </html>
三、作业
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>w3c</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/top.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div class="wrap"> <div class="top"> <div class="start"> <h1 class="title"></h1> <div class="search"> <div class="sc_position"> <div class="s_p_border"></div> <div class="s_p_btn">GO</div> </div> </div> </div> <div class="nav"> <ul class="nav_list"> <li class="n_l_1"></li> <li class="n_l_2"></li> <li class="n_l_3"></li> <li class="n_l_4"></li> <li class="n_l_5"></li> <li class="n_l_6"></li> <li class="n_l_7"></li> </ul> </div> </div> <div class="main"> <div class="m_left"> <div class="nav_box"> <h2>html 教程</h2> <ul> <li>html</li> <li>html5</li> <li>xhtml</li> <li>css</li> <li>css3</li> <li>tcp/ip</li> </ul> </div> <div class="nav_box"> <h2>浏览器脚本</h2> <ul> <li>javascript</li> <li>jQuery</li> <li>Ajax</li> </ul> </div> </div> <div class="m_center"> <div class="ct_box ct_intr"> <div class="ct_intr_box"> <h2>领先的 Web 技术教程 - 全部免费</h2> <p>在w3school，你可以找到你所需要的所有的网站建设教程。</p> <p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p> <p>从左侧的菜单选择你需要的教程！</p> </div> </div> <div class="ct_box"> <div class="c_b_1"> <div class="c_b_txt"> <h2>完整的网站技术参考手册</h2> <p>我们的参考手册涵盖了网站技术的方方面面。</p> <p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p> </div> </div> <div class="c_b_2"> <div class="c_b_txt"> <h2>在线实例测试工具</h2> <p>在 w3school，我们提供上千个实例。</p> <p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p> </div> </div> </div> </div> <div class="m_right"> </div> </div> <div class="end"></div> </div> </body> </html>