一、盒模型之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的宽度*/
/*width: auto;*/
/*默认0*/
/*height: 0px;*/
}
span {
/*内联*/
display: inline;
/*不支持宽高*/
}
img {
/*内联块*/
display: inline-block;
width: auto;
height: auto;
}
</style>
<!-- 验证宽高设置 -->
<style>
.sup {
/*width: 100px;*/
/*height: 100px;*/
background-color: orange
}
.sub {
width: 200px;
height: 200px;
background-color: cyan
}
.s1, .s2 {
width: 200px;
height: 200px;
background-color: brown
}
img {
/*width: 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>
display演示
二、盒模型之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>
overflow演示
三、盒模型之隐藏
一、隐藏的基本属性
简述：通过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>
margin用法
五、盒模型之样式支持与层级结构
一、样式支持用法
、盒模型<!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" >
</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 {
width: 200px;
height: 100px;
background: red;
}
.html, .css, .js {
width: 80px;
height: 40px;
background: orange
}
.nav {
width: 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>
w3c基本框架演示
原文地址：https://www.cnblogs.com/ageliu/p/9715359.html
时间： 2025-01-12 19:00:00