目录
通过前几周对html和css基础的学习，我对前端的认识又更加丰富和深刻了，本周我主要是学习了HTML和CSS进阶部分以及对CSS基础中一些项目的复习与巩固。
首先我就先聊聊我所学习的有关HTML和CSS进阶部分的知识吧
HTML进阶
iframe元素
<iframe> 元素是 HTML 中的一个标签，用于在当前页面嵌入另一个文档。它允许你在页面中显示其他网页、媒体内容，或者嵌入来自同一域名下的其他 HTML 文档。以下是一些 元素的基本用法和属性：
基本用法：
html
<iframe src="https://www.example.com" width="600" height="400" title="Embedded Content"></iframe>src: 指定要嵌入的文档的 URL。width和 : 指定 的宽度和高度。height<iframe>title: 提供一个标题，以增加可访问性。
其他常用属性：
sandbox: 用于设定一系列规则，限制 中的脚本运行、表单提交等行为。seamless(已弃用): 用于使 的样式和外观融入其父文档。frameborder: 控制 <iframe>的边框是否显示。allowfullscreen: 允许或禁止 <iframe>中的内容全屏显示。- scrolling:决定了当网页超过整个页面或指定宽度时，需不需要滚动条
<iframe>特点：
1. 通常是行盒
2. 通常显示的内容取决于元素的属性
3. css不能完全控制其中的样式
4. 具有行块盒的特点
Flash
Flash 是一种多媒体和软件平台，曾经广泛用于网页上的交互性和动画。Flash 包括一个独立的文件格式（SWF 文件）和一个浏览器插件，允许浏览器渲染和执行 Flash 内容。
但是目前flash已逐渐被淘汰在网页中嵌入多媒体内容时，通常使用 <video>和<audio>标签
flash中常见的元素有object和embed
二者都是 HTML 中用于嵌入其他资源（如多媒体文件）的标签。它们可以用于嵌入音频、视频、Flash 动画等内容。以下是它们的基本用法：
<object>元素
html
<object data="your-file.mp3" width="300" height="200" type="audio/mpeg"> Your browser does not support the audio tag. </object>data: 指定要嵌入的资源的 URL。width和 height: 指定元素的宽度和高度。type: 指定嵌入资源的 MIME 类型。- 其他参数可以用<param> 元素设置，用于传递额外的参数给插件或嵌入的资源。
<param>
<embed> 元素：
html
<embed src="your-file.swf" width="400" height="300" type="application/x-shockwave-flash">src: 指定要嵌入的资源的 URL。width和 : 指定元素的宽度和高度。heighttype: 指定嵌入资源的 MIME 类型。
表单元素
表单元素主要是是用于收集用户数据，以下是一些常见的表单元素：
input元素
即文本输入（输入框）
常见属性：
- type
- type:text,普通文本输入框
<input type="text" placeholder="请输入账号：">
- type:password,密码框
<input type="password" placeholder="请输入账号：">
- type:date,日期选择框（有兼容性问题）
<input type="date" name="" id=""> 
- type:search,搜索框,有兼容性问题，输入文本后最后面会有X，并且可点击删除
<input type="search">
- type:range,滑块 min:0 max:5 0~5表示滑五下(平均分成五份)
<input type="range" min="0" max="5">
- type：number，数字输入框,min,max代表所能输入的最小值和最大值（有效值），step为增加或减小的单位
<input type="number" min="0" max="100" step="20">
- type:radio,单选框，对同一组的单选框设置相同名字代表其为同一组
<input name="gender" type="radio">
男
<input name="gender" type="radio">
女
- type:checkbox,多选框
单选框，多选框默认选择某值时在其前加上checked即可
爱好：
<p>
<input type="checkbox" name="loves" id="">
音乐
<input checked type="checkbox" name="" id="">
电影
<input type="checkbox" name="" id="">
阅读
<input type="checkbox" name="" id="">
其他
</p>
select元素
下拉列表选择框
通常和option配合使用，要想默认选中某值，只需在其前option属性中加上selected即可
<p>
请选择城市：
<select name="" id="">
<option value="">成都</option>
<option value="">北京</option>
<option value="">哈尔滨</option>
<!-- 默认选中陕西 -->
<option selected value="">陕西</option>
</select>
</p>
子元素：optgroup,option可嵌入其中,
<p>
请选择你最喜欢的主播：
<select name="" id="">
<optgroup label="才艺表演">
<option value="">冯提莫</option>
</optgroup>
<optgroup label="游戏主播">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</optgroup>
</select>
</p>
分组中若要多选，在select中加入multiple属性
<p>
请选择你喜欢的主播：
<select multiple>
<optgroup label="才艺表演">
<option value="">冯提莫</option>
</optgroup>
<optgroup label="游戏主播">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</optgroup>
</select>
</p>按住ctrl键可实现多选
textarea元素
文本域，多行文本框,没有空白折叠
<body>
请填写简介：
<!-- cols表示多少列，row表示多少行 -->
<textarea name="" id="" cols="30" rows="10">
<!-- 默认出现一些内容的话就直接在内容里写，不写到value中 -->
请填写:至少100字
</textarea>
</body>文本域可实现缩放
button元素
type属性：reset submit button 默认值为submit
<input type="image" src="./萨摩耶.webp">
<button type="button">
这是一个按钮
<img src="./萨摩耶.webp" alt="" style="width: 150px;">
</button>
datalist元素
数据列表
该元素本身不会显示到页面，通常用于和文本框配合,数据列表本身display值为none,将数据列表与输入框关联可使输入框输入文字时提示可能会输入的选项,回车显示的是value值
<p>
请输入你常用的浏览器：
<input list="userAgent" type="text">
</p>
<datalist id="userAgent">
<option value="chrome">谷歌浏览器</option>
<option value="IE">IE浏览器</option>
<option value="opera">欧鹏浏览器</option>
<option value="safari">苹果浏览器</option>
<option value="firefox">火狐浏览器</option>
</datalist>>
点击显示的是value值：
form元素
通常会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单元素以合适的方式提交到服务器，将数据赋值到action所填的地址去处理
属性
1. action,数据最终会送至其所填地址进行处理
将数据返回给action时，返回的是value的值
<form action="https://www.baidu.com">
<p>
账号：
<input type="text" name="loginid">
</p>
<p>
城市：
<select name="city" id="">
<option value="1">成都</option>
<option value="2">重庆</option>
<option value="3">北京</option>
<option value="4">哈尔滨</option>
</select>
</p>
<p>
密码
<input type="password" name="loginpwd">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
选中成都按回车时，返回1：
2. method 指提交方式
fieldset元素
表单分组,子元素有legend,即为分组的标题
<div>
<h1>修改用户信息</h1>
<fieldset>
<legend>账号信息</legend>
<p>
用户账号：
<input type="text" value="aaaa" readonly>
</p>
<p>
用户密码：
<input type="password" name="" id="">
</p>
</fieldset>
<fieldset>
<legend>基本信息</legend>
<p>
用户姓名：
<input disabled value="缘尽" type="text">
</p>
<p>
城市：
<select disabled name="" id="">
<option value="">Lorem.</option>
<option selected value="">Saepe.</option>
<option value="">Sint?</option>
<option value="">Nesciunt.</option>
<option value="">Similique.</option>
<option value="">Neque!</option>
<option value="">Harum.</option>
<option value="">Eaque!</option>
<option value="">Tempore.</option>
<option value="">Iusto?</option>
</select>
</p>
</fieldset>
<p>
<button disabled type="submit">提交</button>
</p>
</div> 
disabled:表示已经失效的输入域，使用其可以生成禁止修改的输入框
配合表单元素的其他元素
普通元素，通常配合单选和多选框使用
显式关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值
<p>
请选择性别：
<input id="radmale" name="gender" type="radio" >
<!-- for指链接的表单元素的id -->
<!-- 显式关联 -->
<label for="radmale">男</label>
<input id="radfemale" name="gender" type="radio" >
<label for="radfemale">女</label>
</p>点击男女即可选中该项
隐式关联
<!-- 隐式关联 -->
<label>
<input type="radio" name="gender">
男
</label>
<label>
<input type="radio" name="gender" id="">
女
</label>美化表单元素
新的伪类
1. focus
元素聚焦时的样式
input:focus{
outline: 1px auto #008c8c;
outline-offset: 1px;
color: #000;
}
2. :checked
尤指单选框和多选框时使用，但单选框和多选框为可替换元素，里面的样式一般几乎无法改变
tapindex="1",意思是点击tap键时，聚焦的元素的顺序
outline-offset外边框的偏移量
<style>
/* 选中的单选框input的下一个兄弟元素 */
input:checked+label{
color: aquamarine;
}
</style><body>
<p>
性别：
<input id="radmale" name="gender" type="radio">
<label for="">男</label>
<input id="radfemale" name="gender" type="radio">
<label for="radfemale">女</label>
</p>
</body> 
常见用法
1. 重置表单元素样式
text-align:center,代表行盒居中
<body style="text-align: center;">
<select name="" id="">
<option value="">Lorem.</option>
<option value="">Officiis!</option>
<option value="">Commodi!</option>
<option value="">Officia.</option>
<option value="">Ex.</option>
<option value="">Ut!</option>
<option value="">Unde.</option>
<option value="">Fuga?</option>
<option value="">Explicabo.</option>
<option value="">Officiis.</option>
</select>
<p>
<input type="text">
</p>
<p>
<button>提交</button>
</p>
<p>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
</body> 
2. 设置textarea是否允许调整尺寸
css属性resize:
- both:默认值，两个方向都可调整尺寸
- none：不能调整尺寸
- horizontal：水平方向可以调整尺寸
- vertical：垂直方向可以调整尺寸
3. 文本框边缘到内容的距离
1. padding
2. text-indent 首行缩进
input{
text-indent: 1em;
}4. 控制单选和多选的样式
通过给元素添加伪元素选择器，在其后加圆点的样式，再通过绝对定位设置位置即可
.radio{
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 59%;
cursor: pointer;
position: relative;
}
.radio.checked{
border-color: #008c8c;
}
.radio.checked:after{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #008c8c;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
border-radius: 50%;
}div class="radio checked">
</div> 
label子元素里不能放div元素，但可放span元素
行盒不可设置宽高
单选框项目实战
当引用新设置的样式时，要将input原来的样式隐藏掉
<p>
<label class="radio-item">
请选择性别：
<input name="gender" type="radio" name="" id="">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input name="gender" type="radio">
<span class="radio"></span>
<span>女</span>
</label>
</p>.radio-item .radio{
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
cursor: pointer;
position: relative;
border-color: #999;
display: inline-block;
}
.radio-item input:checked~span{
color: #008c8c;
}
.radio-item input:checked{
color: #008c8c;
}
.radio-item input:checked+.radio::after{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #008c8c;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
border-radius: 50%;
}
/*隐藏掉原来的样式*/
.radio-item input[type="radio"]{
display: none;
}效果展示
表格元素
在css技术出现前，网页通常使用表格布局。
后台管理系统中可能会使用表格。
要点：
- 如何实现表格隔行变色
使用伪元素选择器nth-child
- 如何设置表格第一列元素字体颜色
伪元素选择器：first-child
- 如何合并表格单元格（横向，纵向）
rowspan：“数字”，表示纵向合并“数字”行
colspan：“数字”，表示横向合并“数字”列
table{
width: 100%;
/* 表示边框的折叠方式
separate 表示边框之间分离
collapse 表示边框之间折叠 */
border-collapse:collapse;
}
table caption{
font-size: 2em;
font-weight: bold;
text-align: center;
margin: 1em 0;
}
th,td{
border: 1px solid #ccc;
text-align: center;
padding: 20px 0;
}
thead tr{
background-color: #008c8c;
color: #fff;
}
/* 隔行变色 */
tbody tr:nth-child(odd){
background-color: #eee;
}
tbody tr:hover{
background-color: #ddd;
}
tbody tr td:first-child{
color: chocolate;
}
tfoot td{
text-align: right;
padding-right: 20px;
} <table>
<caption>这是表格标题</caption>
<thead>
<!-- table row即为表格的一行 -->
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<!-- <td>数据1</td> -->
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
<!-- 合并单元格 -->
<!-- colspan 跨越5列 -->
<td colspan="5">合计</td>
</tr>
</tfoot>
</table> 
其他元素
1. abbr
<p>
<abbr title="cascading style sheet">CSS</abbr>是用于为页面添加样式
</p>缩写词
2. time
<p>
<time datetime="2019-5-1">今年五月</time>我录制了HTML和CSS的课程
</p>提供给浏览器或搜索引擎阅读的时间
3. b
<p>
我们学校有两个课程非常受欢迎,<b>HTML&CSS</b>和<b>JS</b>
</p>以前是一个无语义元素，主要用于加粗字体
4. q
<p>
最近热播的美剧《权力的游戏》中有一句经典台词：<q>在权利的斗争中,非胜即死，没有中间的状态</q>
</p>表示一小段引用文本，相当于引号
5. blockquote
<p>
<blockquote cite="">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam nostrum deleniti sit corporis temporibus minus voluptatibus nihil eos pariatur, beatae repellat esse sapiente possimus eius cumque iste perferendis. Maiores, dignissimos?
</blockquote>
</p>大段引用的文本，默认样式有margin
q和blockquote都有一个属性cite,表示引用的链接地址
6. br
<p>
收货地址：<br>
中国四川省<br>
成都市 XXX <br>
XXXXX <br>
</p>无语义
主要用于在文本中换行,不建议使用，无法改变样式
7. hr
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
<hr>
elit. Tempora assumenda aut laudantium, doloribus accusamus quod facere reiciendis ab officia modi soluta deleniti mollitia esse eligendi autem ducimus natus ullam consequatur.
</p>主要用于分割
8. meta name="keywords"将其内容提供给搜索引擎以供用户搜索关键词时，显示出网页链接，为author时，content内容为作者名字及联系方式,为description时，内容为对网页的简介
<meta name="keywords" content="在线商城美容,微整形">
<meta name="author" content="yuanjin,sjhudvhn@qq.com">
<meta name="description" content="'k'">还可以用为引擎优化
9. link
<!-- 网页的图标 -->
<!-- <link rel="icon" type="image/x-icon" href="./鼠标指针样式.ico"> -->
链接外部资源（css、图标）
rel属性：relation,链接的资源和当前网页的关系，如果是链接css，则rel值为stylesheet，链接图标，rel为icon
type属性：链接的资源MIME类型
也可不用利用link来设置图标，将该图标ico放置整个工程最外面也可
CSS进阶
@规则
1. import
@import "路径"；
导入另外一个css文件
2. charset
@charset"utf-8";
告诉浏览器该css文件，使用的字符编码集是utf-8
/* 如果出现中文字符则必须引用charset */
@charset"utf-8";
/* 意为在读取css文件时，先读取reset.css */
@import"./reset.css";
h1{
text-align: center;
font-size: 3em;
}!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 只需引用index.css
即可 -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>web字体和图标
解决用户电脑上没有安装相应字体
当用户电脑上没有安装相应字体2，强制让用户下载该字体
使用@font-face指令让用户强制下载字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 制作一个新字体，该字体名字叫做fontspace */
/* p{
font-family:"翩翩体-简","Arail","微软雅黑",sans-serif ;
} */
@font-face{
font-family: fontspace;
src: url(./font/Mallikhabrush-7B4ME.ttf);
}
p{
font-family: fontspace;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet.
晚安
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus repudiandae ab rem dicta optio architecto, ducimus ipsam aut neque labore nisi aliquam alias delectus repellat vitae nemo voluptatum amet excepturi?
</p>
</body>
</html>字体图标
iconfont.cn
png一般用于ppt
习惯上用i元素表示图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'iconfont'; /* Project id 4318341 */
src: url('//at.alicdn.com/t/c/font_4318341_l6225vfamvf.woff2?t=1699273055811') format('woff2'),
url('//at.alicdn.com/t/c/font_4318341_l6225vfamvf.woff?t=1699273055811') format('woff'),
url('//at.alicdn.com/t/c/font_4318341_l6225vfamvf.ttf?t=1699273055811') format('truetype');
}
.iconfont{
font-family: iconfont;
font-style: normal;
}
</style>
</head>
<body>
<p>
<i class="iconfont">

</i>
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4318341_l6225vfamvf.css">
</head>
<body>
<P>
<!-- 是文字不是图片 ,并且以行盒排列-->
<i class="iconfont icon-jiantou"></i>
<i class="iconfont icon-miaobianmaomi"></i>
</P>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1206816_qshsac4925m.css">
</head>
<body>
<p>
<i class="iconfont icon-danseshixintubiao-"></i>
<span>adsfasdfasdf</span>
<i class="iconfont icon-yonghu"></i>
</p >
</body>
</html>块级格式化上下文
通过BFC规则可知，创建BFC的元素可解决
- 浮动元素的高度坍塌问题
<style>
.container{
background: lightblue;
position: absolute;
float: left;
/* 绝对定位/浮动会创建BFC，BFC会计算浮动元素的高度 */
/* 副作用最小的方式 */
overflow: hidden;
/* 只要overflow不是visited，就会创建BFC */
}
.item{
float: left;
width: 200px;
height: 200px;
margin: 20px;
background-color: red;
}
/* 常用高度坍塌解决方法 */
/* .clearfix::after{
content: "";
display: block;
clear: both;
} */
</style>
<body>
<div class="container clearfix">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
- 常规流盒子无视浮动盒子排列问题
创建BFC的元素的边框盒不会与浮动元素元素重叠
<style>
.float{
width: 200px;
height: 200px;
margin: 20px;
background: red;
float: left;
}
.container{
height: 500px;
background-color: lightblue;
/* bfc */
overflow: hidden;
}
/* 创建bfc的元素，他的边框盒不会与浮动元素重叠 */
/* 如果要让创建bfc的元素与浮动盒子之间有距离，就不能设置创建bfc元素的margin-left，而应设置浮动元素的margin-right */
</style>
<body>
<div class="float"></div>
<div class="container"></div>
</body>
若container的overflow为默认值，则是以下效果：
- 父元素与子元素外边距合并问题
<style>
.container{
background: #008c8c;
height: 500px;
margin-top: 30px;
overflow: hidden;
/* 创建bfc的元素，不会和他的子元素进行外边距合并 */
}
.child{
height: 100px;
margin: 50px 50px;
background:red;
}
</style>
<body>
<div class="container">
<div class="child"></div>
</div>
</body> 
如果父元素不创建BFC的话，且子元素中有浮动元素和绝对定位元素，由于定位元素完全脱离了常规流盒子，其高度不会被计算
<style>
.container{
/* overflow: hidden; */
background-color: #008c8c;
position: relative;
}
.item{
float: left;
margin: 20x;
width: 200px;
height: 200px;
background-color: red;
/* 定位元素完全脱离了常规流元素，计算高度时会完全忽视定位元素 */
}
.child2{
position: absolute;
height: 500px;
width: 200px;
right: 0;
top: 0;
background-color: bisque;
}
</style>
<body>
<div class="container">
<div class="item">
</div>
<div class="child2"></div>
</div>
</body> 
此时container的高度为0
布局
两栏布局
通过对侧边栏设置浮动，让主区域创建BFC，避开浮动盒子即可
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
background-color: lightblue;
width: 90%;
margin: 0 auto;
}
.aside{
float: left;
background-color: #008c8c;
color: #fff;
width: 300px;
/* 若侧边栏与主区域之间有一定空隙,则设置侧边栏的margin-right,不设置主区域的margin-left,因为此时设置的是网页最左边与主区域的距离,没什么效果 */
margin-right: 30px;
}
/* 如果主区域定宽,则设置浮动,若不定宽,则想办法创建bfc元素避开浮动盒子,此时就不用设置浮动 */
.main{
overflow: hidden;
/* float: right; */
background-color: gray;
/* width: 600px; */
}
</style>
<body>
<div class="container clearfix">
<!-- 侧边栏 -->
<aside class="aside">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum magnam recusandae velit, facere sapiente, tenetur libero repellat laboriosam qui perferendis et aspernatur veniam atque. Animi architecto quod distinctio dignissimos cum! Nesciunt eos eveniet tenetur nostrum sunt est adipisci ducimus earum a ab exercitationem, recusandae, obcaecati accusantium quisquam cupiditate ad natus officia quasi, quam rem velit! Earum blanditiis consequuntur libero, delectus ut aliquid id corrupti repellendus tempore optio consequatur atque adipisci assumenda numquam quos ab cupiditate. Sit suscipit animi laudantium asperiores provident laborum, libero doloremque quibusdam repellendus odit id incidunt pariatur. Ea, dolorem. Itaque recusandae accusantium, sit nam velit doloremque nemo architecto vitae quae ipsa obcaecati maiores? Magni, nulla recusandae qui nisi quisquam dolor incidunt. Saepe quaerat ipsa odio, blanditiis natus modi dolorem labore voluptatibus, quibusdam quas pariatur necessitatibus omnis, expedita ullam voluptates impedit alias veritatis? Vero laborum voluptas distinctio corporis similique, facilis doloremque beatae, nobis officia error facere a! Aut libero dolorum tempore debitis animi? Quasi soluta odit nisi aperiam? Dolore voluptate repudiandae sapiente consequuntur labore iste quidem ipsum nam ducimus cum tempore amet in incidunt quo eaque iusto eos beatae reprehenderit ab, aspernatur non nisi. Saepe, voluptatem consequatur sunt, porro repudiandae cumque blanditiis, sit ipsum ipsa id laudantium aspernatur autem rem a deserunt possimus animi officia facilis vel consequuntur reiciendis quasi. Ut praesentium aspernatur eveniet impedit odit et quod natus facere dicta aliquam non incidunt sapiente, explicabo eius magnam consequuntur nihil, soluta necessitatibus, mollitia dolor. Magni praesentium nihil velit commodi obcaecati, fugit asperiores voluptates sapiente perspiciatis vero eveniet error tempore dolorum consectetur alias quas fuga explicabo aliquid non a? Labore, earum perspiciatis cumque nostrum distinctio omnis aliquam maxime odit adipisci rem esse iure non laborum sit iusto aperiam consequatur aliquid repudiandae doloremque velit dolorem ab qui in mollitia! Facere beatae, vitae fuga neque amet odit accusamus pariatur suscipit ullam, odio ipsam error doloremque nobis sunt in! Illum repellat ab quis, perspiciatis, quia laboriosam optio consequatur, laudantium dolor aut dolorem. Necessitatibus, quibusdam? Voluptatem earum perferendis ad eum facere a accusamus nulla quibusdam consectetur doloribus. Dolore aut consectetur minus nesciunt! Obcaecati, eaque, reprehenderit, maiores doloribus odio minus fugiat dolor ratione vero ducimus maxime. Qui inventore porro eos ipsam? Labore iste esse ducimus! Ex nemo error vel perspiciatis voluptas obcaecati quae aliquid officiis ad? Nemo maxime doloribus, asperiores, quasi mollitia totam, molestias voluptatem autem esse nam ut atque fuga? Necessitatibus vitae quam esse sunt cumque! Suscipit, consectetur molestiae blanditiis veritatis soluta ea mollitia natus totam libero laudantium accusantium inventore eligendi ducimus. Ipsa minima enim ab accusantium optio adipisci tenetur ducimus corporis quasi magni repellendus aut consequatur, labore est maiores a quidem numquam dolor hic et ad. Quod cupiditate ut, consequuntur reiciendis magnam saepe porro, est ea facilis dolorem, omnis odit ad. Minus accusamus eaque dolor similique eius, sed pariatur, sequi, quae repellat eum eligendi aliquid laboriosam aspernatur voluptate rerum iure tenetur neque labore commodi! Et eaque suscipit eveniet voluptatum illum adipisci enim nisi, ad illo tempore, itaque similique alias libero aliquid omnis nemo minima deserunt officia quaerat veritatis architecto reprehenderit quis voluptatibus. Odio tempore harum ad dolor maiores sapiente et, architecto, officia deleniti delectus molestias quaerat ab facere assumenda, quod non reprehenderit aperiam voluptate labore vitae! Ut qui iusto corporis officia facilis eum voluptatibus. At repudiandae possimus atque aspernatur, officia sunt illum reprehenderit. Dicta quisquam illum ullam omnis quod rem aut eveniet provident quo possimus reprehenderit unde, quasi laboriosam obcaecati ea labore cupiditate sint voluptatibus mollitia illo delectus quis vero cum et! Voluptatum enim quo laborum sed consequuntur corrupti, optio reprehenderit esse consectetur inventore ratione quibusdam, quidem illum quas suscipit fugiat sint expedita sapiente? Assumenda culpa eveniet doloremque officiis fuga consequuntur aut, debitis eligendi aspernatur corrupti, nulla quam modi et error autem corporis ullam. Quos nesciunt vero animi ducimus! Voluptates adipisci sunt, soluta nihil magnam fugit eaque quod, omnis maiores expedita libero amet dicta sit vitae, laudantium commodi dolorem distinctio deserunt. Optio sunt iure quidem eum cumque provident saepe reprehenderit. Sint enim distinctio mollitia accusamus explicabo quas maxime deleniti dolor aperiam asperiores necessitatibus, architecto praesentium pariatur cumque voluptas autem magni corrupti rem, omnis provident dolores aspernatur fugiat quasi. Aperiam quo asperiores temporibus blanditiis voluptatibus? Velit deleniti nihil delectus quisquam nulla. Provident fugit aut exercitationem aspernatur at distinctio neque, modi, architecto dolorum perspiciatis, ratione numquam qui sint a cumque autem rerum minus consequuntur tempora! Rerum ea natus sit et eum maiores earum libero, praesentium harum voluptates, vitae voluptatem, architecto minus eveniet. Labore mollitia doloribus nam animi minima reiciendis, ducimus soluta earum recusandae eaque, quaerat ratione est, dolores illo accusamus nobis sint libero iste nostrum dolorem laudantium! Officiis fugit libero optio! Ratione, quis harum similique animi sapiente, distinctio voluptatem nulla, esse nihil ut corrupti a tenetur eligendi veritatis velit dolorem. Sapiente magni itaque quia sunt quae fugiat, ad libero eos inventore illo impedit nobis accusamus totam ducimus. Qui dicta, non fugit aliquam accusantium tempore quibusdam minima nobis nisi fugiat, obcaecati, reprehenderit placeat asperiores ipsum nam adipisci explicabo! Iste quis corrupti, rem nobis temporibus consectetur dolorem, recusandae deleniti ut eos asperiores delectus officiis quas, aspernatur sequi beatae corporis in. Qui cupiditate amet sit? Nostrum illo cumque omnis ratione deserunt commodi blanditiis assumenda dolores laudantium, culpa tempora? Omnis nulla nemo alias explicabo fuga aliquid, nobis, ratione quos nostrum quo enim suscipit cumque perferendis inventore officiis. Id esse obcaecati vero perspiciatis dolore accusantium eveniet, temporibus non placeat ex deserunt ut cumque voluptate fugit, earum provident odit fuga harum libero autem, tempora officiis consectetur? Obcaecati accusamus in cumque corrupti nemo distinctio adipisci ducimus labore atque, aspernatur fugiat sequi? A cupiditate repellendus doloremque odit totam voluptatem molestias praesentium non, vel aliquid necessitatibus nostrum placeat voluptate dolorem velit unde? Voluptates saepe quos voluptatum placeat fugit quia ipsum facilis nisi ratione dicta corrupti porro quod sapiente, non nemo, veniam, provident maiores officiis sequi odit excepturi dolor illo autem! Ad culpa dicta ullam alias placeat unde rem ipsa inventore quod! Cupiditate praesentium omnis aut. Iusto assumenda quos, eius exercitationem perferendis quibusdam. Repellendus necessitatibus labore aut illo odit assumenda iure ab delectus nesciunt nobis culpa, fuga id repudiandae perferendis reprehenderit accusamus quia accusantium!
</aside>
<!-- 主区域 -->
<div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptate temporibus, voluptas cum officiis quo tenetur minus iusto debitis, sunt amet natus fuga unde harum eveniet? Provident, voluptatum tempora. Optio ipsum molestiae obcaecati vel. Aperiam numquam, dolores facere maxime voluptates fuga nostrum quidem voluptatum possimus in aspernatur at, rerum quis veritatis iste iure sequi! Vel accusantium commodi modi quis cum repellendus, doloribus omnis porro inventore debitis atque, quisquam, obcaecati enim saepe dolorum laudantium voluptatum quasi voluptates ipsa velit iste magni voluptatibus. Possimus, recusandae. Eveniet voluptatum provident molestiae veniam vero. Inventore distinctio culpa, magnam quia numquam illum voluptate fugiat voluptatum eius expedita libero quos? Necessitatibus autem doloremque provident nemo, sunt eligendi consectetur recusandae pariatur modi dolore veritatis minus culpa ea hic quae ratione officiis voluptate omnis, sed voluptatem dignissimos. Molestias et ipsa cumque repudiandae at. Eum dolores assumenda maxime unde maiores blanditiis non placeat repellat. Dolorum, saepe perferendis, dolor incidunt similique ut recusandae quo aut, temporibus harum placeat non soluta atque. Illum ea aperiam commodi sunt modi culpa tempora atque molestiae rem, corporis harum nisi facilis dicta sit dolorem. Quidem ab earum omnis fugit, tenetur libero voluptates ullam placeat soluta iste harum sit corporis quia officiis at, accusamus expedita laudantium ea explicabo quasi odio laboriosam quaerat. Fugiat illo perferendis aperiam eum consequatur ut quas modi, non velit officia minima eaque aut rem ea debitis delectus similique praesentium quod. Excepturi dolores et tempore quibusdam nemo, cupiditate molestias perspiciatis dolor porro, cumque animi repellat perferendis earum officia debitis est fugiat saepe quaerat quae. Tenetur repellendus perspiciatis qui maxime vitae labore iusto magni odio optio quia numquam deserunt vel obcaecati, quaerat voluptate quisquam reiciendis exercitationem vero, nisi saepe impedit dolores. Maxime doloribus mollitia voluptatum rem error atque iste delectus dignissimos ipsum itaque? Nemo rem enim aliquam numquam porro non odit perspiciatis praesentium blanditiis! Nulla distinctio ullam, omnis eos sint quae debitis, quibusdam velit voluptatum est sequi incidunt assumenda sit dignissimos. Sint vero iusto voluptas totam recusandae maxime, voluptatem dolore unde eaque id in, veniam laboriosam ducimus quasi a ea quae tempore debitis eum. Quis, illo fuga earum, debitis, eligendi qui eveniet dolor recusandae beatae ducimus officia commodi illum pariatur. Iusto ab animi quidem culpa! Ratione suscipit nihil aspernatur, inventore ut illum provident consectetur. Culpa eum facilis sit nihil omnis, molestias sint modi earum eaque veniam harum provident quod quo eveniet alias. Ut, repellendus molestias labore cumque officiis consectetur a pariatur blanditiis similique odio reprehenderit vero maiores facilis iusto nulla assumenda sequi, sunt error expedita sit aliquid. Quibusdam similique deserunt porro vero. Cumque quis rerum consequuntur earum a consectetur dicta dolore deserunt? Ipsam, quae reprehenderit. Repellat saepe officiis cumque tempora laborum quidem rem eveniet commodi fuga iure dignissimos recusandae voluptatibus repudiandae repellendus provident, totam dolores! Nam aspernatur vel, vitae veritatis repellat id esse, tempora fuga, ea nostrum eaque sint soluta impedit earum quidem amet optio dolores beatae dolorum! Iusto beatae labore nobis nam quia nemo harum inventore rem nihil dolorum. Fugit dicta, debitis porro deleniti qui quis ad beatae eum autem ratione dolore sint eius inventore similique dolorem in error? Quia, suscipit asperiores quo consequuntur autem rerum facilis doloribus quidem cum incidunt modi id natus provident laboriosam beatae voluptatem! Nostrum quae dignissimos fugit quod deleniti vero quo error quas assumenda est nam id, distinctio dicta atque ipsum pariatur itaque neque voluptates? Deleniti quam obcaecati molestias, fugit numquam tempora quasi eaque maxime adipisci neque eligendi mollitia, accusamus perferendis, nesciunt sequi temporibus eum odit. Quos provident ex iste eveniet dolorem incidunt illum delectus corporis voluptates id adipisci aut ratione recusandae ut animi nihil harum consequatur, perspiciatis soluta repudiandae illo. Commodi officiis quas, nemo consequatur consequuntur necessitatibus expedita repudiandae dolores dolor quisquam veniam, ullam ratione, aspernatur ut voluptates voluptatem sint hic voluptate! Amet expedita possimus quos eius et qui sunt debitis quam dicta ut! Voluptatibus consectetur cumque dolores molestias provident omnis voluptas nulla incidunt. Ab quisquam ex ratione porro quasi vitae, mollitia saepe illum architecto incidunt quo aliquam asperiores numquam maiores, molestiae, animi sed? Quam sit, eos quo aspernatur eligendi molestiae nostrum magnam facere quasi at, architecto consectetur odio quibusdam optio voluptatum ratione eveniet laudantium maxime nobis pariatur veniam inventore doloribus. Fuga libero numquam earum. Nulla iure obcaecati alias quia quam amet earum adipisci nam, labore suscipit possimus sunt quaerat omnis unde facere quod recusandae soluta itaque voluptatum. Commodi hic sint iure eaque sed dicta aliquam numquam dolor, alias maiores illo, pariatur nulla modi fuga illum repellat expedita minus voluptatum exercitationem quasi dolores voluptas saepe ducimus! Inventore repudiandae, similique aspernatur nam dolorem aperiam expedita praesentium itaque sint ipsa id esse aliquam. Error consequatur adipisci incidunt veniam, iste et natus pariatur quas? Facere blanditiis soluta beatae ipsum ea nulla mollitia voluptatibus sapiente harum? Rem enim est porro. Dolorum doloribus voluptatum tempora molestias ad placeat odit dolor ratione at quo nihil fugit inventore animi autem quae libero, labore unde vel atque doloremque, qui minus reprehenderit facilis. Cupiditate expedita asperiores dicta, architecto eveniet minima voluptatem cumque temporibus adipisci accusamus ducimus iste dolor exercitationem amet, porro omnis eligendi, pariatur alias labore voluptates suscipit tempore! Laboriosam libero eos earum dignissimos! Optio adipisci et repellendus delectus vitae explicabo quia, corrupti labore laborum culpa. Ipsam non distinctio mollitia vitae amet illum eos, magni fuga magnam consequuntur enim sunt iure consequatur omnis, expedita suscipit. Cum at tempora, assumenda perspiciatis incidunt similique aut nostrum rem aperiam eum voluptas porro consequuntur obcaecati magnam praesentium ipsum id culpa minus neque itaque fuga fugiat consequatur, maiores eligendi? Cum exercitationem hic commodi, sit illo quas ab accusamus nostrum iusto aut ea porro quisquam, voluptas cupiditate omnis repudiandae, voluptate sapiente veritatis architecto corporis pariatur! Et, voluptatibus dolorum quia praesentium explicabo labore earum, mollitia, odit fugit quae ad doloremque omnis. Exercitationem natus illum laudantium asperiores, fuga numquam cupiditate ex dolorem reprehenderit rem explicabo totam pariatur velit ipsum facilis magnam laborum sit unde. Aut, harum odit quaerat quibusdam ea neque praesentium iste suscipit maxime earum, perferendis id ipsa reiciendis nulla iusto quidem voluptatem vero deserunt vitae atque. Molestiae harum minima odio eius aspernatur. Officia voluptates molestiae dolores eum dignissimos optio cumque minus expedita saepe.</div>
</div>
</body>
右边的主区域会适应网页宽度而改变宽度 ，主区域宽度不变
三栏布局
左右侧边栏浮动且定宽，主区域创建BFC避开浮动盒子
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
min-width: 1000px;
}
.container{
padding: 30px;
border:3px solid ;
}
.left{
float: left;
width: 300px;
background-color: lightblue;
margin-left: 30px;
}
.right{
float: right;
width: 300px;
background-color: lightblue;
margin-left: 30px;
}
.main{
overflow: hidden;
border:2px solid ;
}
</head>
<body>
<div class="container clearfix">
<aside class="left">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates impedit a rerum labore expedita ea magni voluptas? Vel molestiae provident ducimus voluptatibus quasi! Ab repellendus dolore nisi quidem, eveniet provident.
</aside>
<aside class="right">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam molestiae, delectus vel unde perspiciatis exercitationem ratione, laborum repellat mollitia aspernatur deleniti non reprehenderit illum sapiente dolore vero quaerat, odio maxime.
</aside>
<div class="main">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur magnam exercitationem molestias repudiandae iusto numquam, doloribus deserunt velit, debitis ab ipsam tempora maiores ipsa non adipisci fugit! Nemo aliquid porro, est possimus vitae, labore iste repellendus velit illum reprehenderit dolorum in quis perspiciatis recusandae exercitationem itaque vero fugit officiis? Excepturi, deleniti quis enim corporis nesciunt temporibus possimus eligendi deserunt cum earum cupiditate culpa autem nobis dolore totam itaque impedit amet, obcaecati numquam. Nulla, fugiat nam possimus, quos, ut corrupti consectetur at modi eaque quisquam tempore architecto cupiditate? Facere ad adipisci impedit quibusdam ut quaerat id omnis et tenetur, veniam nihil libero, veritatis ipsam velit consequatur eveniet laudantium nobis, deleniti soluta vero atque reprehenderit temporibus! Rerum quos amet velit praesentium cumque doloribus! Exercitationem architecto ad quam beatae ea, a minus in praesentium suscipit, veniam ipsa nesciunt itaque eveniet cum animi vel amet aspernatur enim porro assumenda inventore id dolore modi? Dicta velit provident nisi. Velit est dolorum minus neque voluptates accusamus voluptatum dolore cupiditate saepe quia pariatur id officiis dolorem, cumque voluptatem unde rem animi veniam recusandae voluptas earum perferendis? Voluptates, accusamus praesentium nesciunt voluptatibus, repudiandae odio dolores vero harum quam laborum sunt eius! Ipsa, dolores temporibus quod blanditiis sint fugit cupiditate quam fugiat praesentium cum laudantium ipsam molestiae voluptates, porro distinctio. Temporibus iusto deserunt eaque quasi autem nulla adipisci doloremque quaerat rem quis magnam, a nostrum, modi et ab nemo rerum ex aut facilis esse. Facere laudantium harum ullam, cum rem dolorem culpa provident omnis! Laboriosam adipisci obcaecati, corrupti iure in unde doloribus ratione suscipit. Dolorum, cum explicabo doloribus inventore nulla et placeat debitis at quibusdam quos voluptates aut, vero quis quaerat suscipit maxime corrupti quasi expedita similique veritatis totam rerum eum deleniti. Numquam corporis voluptates ab officia, eveniet eum molestiae minus veniam. Libero rem dignissimos dolorum hic officiis quas fugiat molestias quasi amet, atque ad esse similique quia fugit deleniti illo quibusdam! Laborum, eveniet natus provident odio voluptatum cupiditate necessitatibus ullam deleniti iusto praesentium ab itaque repudiandae a, animi soluta debitis unde! Recusandae qui voluptate unde ab iusto, aspernatur sequi hic accusantium esse similique debitis numquam cupiditate? Asperiores iusto ipsam possimus quo exercitationem consequatur beatae aut aliquid ullam aliquam. Molestiae quam magnam maxime accusamus vitae temporibus sed aperiam deleniti sunt mollitia et, quos quas harum nihil nesciunt quae sequi consectetur illum exercitationem illo cumque asperiores fugiat necessitatibus fuga? Inventore reiciendis atque facere quae vero accusamus repellendus non magnam tempore. Provident voluptates nulla ab reprehenderit quia maiores iste dolorem reiciendis repellendus similique ullam adipisci quas eligendi explicabo totam laudantium molestias dignissimos quibusdam, iure tempora? Nihil, repellendus delectus ut ipsum, fuga perspiciatis enim provident recusandae accusantium officia eaque facere. Ratione eius recusandae quidem repellat, numquam et tempora dolorem molestiae itaque accusantium quam fuga deleniti cupiditate accusamus omnis nostrum neque consequatur nobis deserunt distinctio labore atque. Nisi odio consectetur at doloremque. Vero quibusdam nihil debitis, provident harum autem minus nostrum nam quo molestiae deserunt, consequuntur, labore mollitia perferendis. Provident blanditiis fuga autem laborum laboriosam quisquam facere doloribus fugit saepe explicabo ad suscipit natus illo vero corrupti, nihil dolores recusandae, consequuntur sapiente nesciunt consequatur soluta repellendus. Officiis et tempora exercitationem nobis atque ipsum ut, quis repellendus quam excepturi laborum at dolorum maiores eveniet ratione, consequuntur cumque animi perspiciatis fugit adipisci molestiae nulla error deserunt nisi. Molestias cum fugiat vel eos? Inventore corporis, vitae at libero nostrum voluptate iusto necessitatibus repellat ipsum omnis quo voluptatem possimus facere ad voluptates ea sunt recusandae vero a reprehenderit quisquam excepturi! Rerum nam voluptate officiis! Velit facilis, asperiores minima, molestias laudantium, nesciunt quis ad impedit odit provident a? Sint quibusdam hic officiis, repudiandae illo nemo aliquam exercitationem porro recusandae. Pariatur minus fugiat expedita deserunt enim eveniet incidunt mollitia exercitationem deleniti consequuntur facilis iusto fuga ex aliquid, hic sequi recusandae eos possimus praesentium a rerum veniam dolores tenetur? Rerum vel voluptates adipisci atque animi est, consequatur ex suscipit nostrum praesentium, repellat accusamus quasi incidunt dolor beatae, optio natus impedit dicta a quia. Dolorum et ad error! Mollitia molestiae odit dolor dignissimos repellat rerum, numquam aspernatur explicabo autem laboriosam corporis provident reprehenderit doloribus, sit deserunt aliquam illo, vitae possimus sunt ipsum! Quis quos earum magnam esse aspernatur, assumenda praesentium culpa voluptatum numquam neque quidem consectetur! Tempora inventore error sint consequatur est non a voluptates eligendi, quae, fugit reiciendis in suscipit saepe perspiciatis, eum molestiae minima laboriosam officiis? Quidem, veniam sunt iure asperiores commodi in eaque cum repellat ea odio ipsa repudiandae dicta eos quis error quod temporibus facilis laboriosam quasi quae! Quam quidem et saepe, voluptatem voluptatum consequuntur laudantium delectus minima earum suscipit. Sit incidunt iusto ducimus commodi doloremque suscipit totam eligendi dolorem magnam nesciunt! Ea dolor explicabo maxime placeat iusto aliquid, enim neque, fuga ut cum ducimus obcaecati voluptas. Non natus quia dolor molestiae veniam at, dicta porro nobis a eligendi sit harum ratione delectus voluptatum repudiandae est consectetur quis quam. Fugiat quasi odio, delectus unde suscipit possimus voluptates commodi labore assumenda laboriosam. Itaque nisi id at dolorem temporibus fugiat, inventore laborum excepturi architecto quibusdam, quisquam veniam, culpa nulla doloribus nostrum totam quas. Sapiente ratione deleniti dolore officia consequuntur praesentium alias minus repudiandae. Nesciunt magnam obcaecati qui enim voluptatem blanditiis velit, ex eum voluptatibus necessitatibus eligendi cupiditate eius? Perspiciatis facere praesentium necessitatibus harum quod illo. Labore dolore necessitatibus quasi inventore accusantium ut perspiciatis saepe, consequatur tempora quo ad eius aliquam pariatur, cumque, adipisci optio itaque quibusdam maiores doloremque veniam nobis minus voluptatibus? Fugiat adipisci modi a nostrum hic, voluptates quibusdam corporis eos laborum. Delectus illo accusamus velit, quam molestiae adipisci tenetur quia, impedit enim facilis quidem minima eveniet autem aliquam officia molestias vero blanditiis architecto a id saepe laudantium eaque ducimus. Velit deserunt eos nesciunt ea praesentium obcaecati molestiae, sapiente aperiam, reiciendis eum molestias iste incidunt amet reprehenderit? Libero nemo at distinctio in, eum asperiores possimus voluptatibus veniam voluptate quae tempora totam aliquam, dolor vel delectus similique dolorum! Alias nihil consequuntur suscipit illum aperiam labore voluptate quos. Ut porro illo facere neque magni rem quod minima hic commodi, aliquam eaque? Iusto, rem. Vitae accusantium sit rem tempora culpa temporibus!
</div>
</div>
</body> 
改变网页宽度时，主区域宽度改变，两边固定，因此实现三栏布局时，也可将两边设置为固定定位 。
注意，实现两栏布局或三栏布局时，先写浮动,再写主区域,若先写主区域,因为主区域为常规流盒子,浮动盒子会避开常规流盒子而常规流盒子又会占满整个区域(宽度),此时就达不到分栏的效果
等高布局
- css3的弹性盒
- JS控制
- 伪等高
在这里我就着重介绍伪等高吧
先将侧边栏盒子高度设置的无限大，接着通过设置侧边栏的margin-bottom来设置盒子高度（margin-bottpm为负值，盒子高度尽可能小，不撑开container高度，让container高度完全由主区域决定），container溢出隐藏即可
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.container{
background-color: lightblue;
width: 90%;
margin: 0 auto;
/* aside的背景颜色超出盒子范围,溢出隐藏即可 */
overflow: hidden;
}
.aside{
float: left;
background-color: #008c8c;
color: #fff;
width: 300px;
/* 若侧边栏与主区域之间有一定空隙,则设置侧边栏的margin-right,不设置主区域的margin-left,因为此时设置的是网页最左边与主区域的距离,没什么效果 */
margin-right: 30px;
/* 此时盒子的高度只有10px */
height: 10000px;
margin-bottom: -9990px;
}
/* 如果主区域定宽,则设置浮动,若不定宽,则想办法创建bfc元素避开浮动盒子,此时就不用设置浮动 */
.main{
overflow: hidden;
/* float: right; */
background-color: gray;
/* width: 600px; */
}
</style>
<body>
<div class="container clearfix">
<!-- 侧边栏 -->
<aside class="aside">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</aside>
<!-- 主区域 -->
<div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptate temporibus, voluptas cum officiis quo tenetur minus iusto debitis, sunt amet natus fuga unde harum eveniet? Provident, voluptatum tempora. Optio ipsum molestiae obcaecati vel. Aperiam numquam, dolores facere maxime voluptates fuga nostrum quidem voluptatum possimus in aspernatur at, rerum quis veritatis iste iure sequi! Vel accusantium commodi modi quis cum repellendus, doloribus omnis porro inventore debitis atque, quisquam, obcaecati enim saepe dolorum laudantium voluptatum quasi voluptates ipsa velit iste magni voluptatibus. Possimus, recusandae. Eveniet voluptatum provident molestiae veniam vero. Inventore distinctio culpa, magnam quia numquam illum voluptate fugiat voluptatum eius expedita libero quos? Necessitatibus autem doloremque provident nemo, sunt eligendi consectetur recusandae pariatur modi dolore veritatis minus culpa ea hic quae ratione officiis voluptate omnis, sed voluptatem dignissimos. Molestias et ipsa cumque repudiandae at. Eum dolores assumenda maxime unde maiores blanditiis non placeat repellat. Dolorum, saepe perferendis, dolor incidunt similique ut recusandae quo aut, temporibus harum placeat non soluta atque. Illum ea aperiam commodi sunt modi culpa tempora atque molestiae rem, corporis harum nisi facilis dicta sit dolorem. Quidem ab earum omnis fugit, tenetur libero voluptates ullam placeat soluta iste harum sit corporis quia officiis at, accusamus expedita laudantium ea explicabo quasi odio laboriosam quaerat. Fugiat illo perferendis aperiam eum consequatur ut quas modi, non velit officia minima eaque aut rem ea debitis delectus similique praesentium quod. Excepturi dolores et tempore quibusdam nemo, cupiditate molestias perspiciatis dolor porro, cumque animi repellat perferendis earum officia debitis est fugiat saepe quaerat quae. Tenetur repellendus perspiciatis qui maxime vitae labore iusto magni odio optio quia numquam deserunt vel obcaecati, quaerat voluptate quisquam reiciendis exercitationem vero, nisi saepe impedit dolores. Maxime doloribus mollitia voluptatum rem error atque iste delectus dignissimos ipsum itaque? Nemo rem enim aliquam numquam porro non odit perspiciatis praesentium blanditiis! Nulla distinctio ullam, omnis eos sint quae debitis, quibusdam velit voluptatum est sequi incidunt assumenda sit dignissimos. Sint vero iusto voluptas totam recusandae maxime, voluptatem dolore unde eaque id in, veniam laboriosam ducimus quasi a ea quae tempore debitis eum. Quis, illo fuga earum, debitis, eligendi qui eveniet dolor recusandae beatae ducimus officia commodi illum pariatur. Iusto ab animi quidem culpa! Ratione suscipit nihil aspernatur, inventore ut illum provident consectetur. Culpa eum facilis sit nihil omnis, molestias sint modi earum eaque veniam harum provident quod quo eveniet alias. Ut, repellendus molestias labore cumque officiis consectetur a pariatur blanditiis similique odio reprehenderit vero maiores facilis iusto nulla assumenda sequi, sunt error expedita sit aliquid. Quibusdam similique deserunt porro vero. Cumque quis rerum consequuntur earum a consectetur dicta dolore deserunt? Ipsam, quae reprehenderit. Repellat saepe officiis cumque tempora laborum quidem rem eveniet commodi fuga iure dignissimos recusandae voluptatibus repudiandae repellendus provident, totam dolores! Nam aspernatur vel, vitae veritatis repellat id esse, tempora fuga, ea nostrum eaque sint soluta impedit earum quidem amet optio dolores beatae dolorum! Iusto beatae labore nobis nam quia nemo harum inventore rem nihil dolorum. Fugit dicta, debitis porro deleniti qui quis ad beatae eum autem ratione dolore sint eius inventore similique dolorem in error? Quia, suscipit asperiores quo consequuntur autem rerum facilis doloribus quidem cum incidunt modi id natus provident laboriosam beatae voluptatem! Nostrum quae dignissimos fugit quod deleniti vero quo error quas assumenda est nam id, distinctio dicta atque ipsum pariatur itaque neque voluptates? Deleniti quam obcaecati molestias, fugit numquam tempora quasi eaque maxime adipisci neque eligendi mollitia, accusamus perferendis, nesciunt sequi temporibus eum odit. Quos provident ex iste eveniet dolorem incidunt illum delectus corporis voluptates id adipisci aut ratione recusandae ut animi nihil harum consequatur, perspiciatis soluta repudiandae illo. Commodi officiis quas, nemo consequatur consequuntur necessitatibus expedita repudiandae dolores dolor quisquam veniam, ullam ratione, aspernatur ut voluptates voluptatem sint hic voluptate! Amet expedita possimus quos eius et qui sunt debitis quam dicta ut! Voluptatibus consectetur cumque dolores molestias provident omnis voluptas nulla incidunt. Ab quisquam ex ratione porro quasi vitae, mollitia saepe illum architecto incidunt quo aliquam asperiores numquam maiores, molestiae, animi sed? Quam sit, eos quo aspernatur eligendi molestiae nostrum magnam facere quasi at, architecto consectetur odio quibusdam optio voluptatum ratione eveniet laudantium maxime nobis pariatur veniam inventore doloribus. Fuga libero numquam earum. Nulla iure obcaecati alias quia quam amet earum adipisci nam, labore suscipit possimus sunt quaerat omnis unde facere quod recusandae soluta itaque voluptatum. Commodi hic sint iure eaque sed dicta aliquam numquam dolor, alias maiores illo, pariatur nulla modi fuga illum repellat expedita minus voluptatum exercitationem quasi dolores voluptas saepe ducimus! Inventore repudiandae, similique aspernatur nam dolorem aperiam expedita praesentium itaque sint ipsa id esse aliquam. Error consequatur adipisci incidunt veniam, iste et natus pariatur quas? Facere blanditiis soluta beatae ipsum ea nulla mollitia voluptatibus sapiente harum? Rem enim est porro. Dolorum doloribus voluptatum tempora molestias ad placeat odit dolor ratione at quo nihil fugit inventore animi autem quae libero, labore unde vel atque doloremque, qui minus reprehenderit facilis. Cupiditate expedita asperiores dicta, architecto eveniet minima voluptatem cumque temporibus adipisci accusamus ducimus iste dolor exercitationem amet, porro omnis eligendi, pariatur alias labore voluptates suscipit tempore! Laboriosam libero eos earum dignissimos! Optio adipisci et repellendus delectus vitae explicabo quia, corrupti labore laborum culpa. Ipsam non distinctio mollitia vitae amet illum eos, magni fuga magnam consequuntur enim sunt iure consequatur omnis, expedita suscipit. Cum at tempora, assumenda perspiciatis incidunt similique aut nostrum rem aperiam eum voluptas porro consequuntur obcaecati magnam praesentium ipsum id culpa minus neque itaque fuga fugiat consequatur, maiores eligendi? Cum exercitationem hic commodi, sit illo quas ab accusamus nostrum iusto aut ea porro quisquam, voluptas cupiditate omnis repudiandae, voluptate sapiente veritatis architecto corporis pariatur! Et, voluptatibus dolorum quia praesentium explicabo labore earum, mollitia, odit fugit quae ad doloremque omnis. Exercitationem natus illum laudantium asperiores, fuga numquam cupiditate ex dolorem reprehenderit rem explicabo totam pariatur velit ipsum facilis magnam laborum sit unde. Aut, harum odit quaerat quibusdam ea neque praesentium iste suscipit maxime earum, perferendis id ipsa reiciendis nulla iusto quidem voluptatem vero deserunt vitae atque. Molestiae harum minima odio eius aspernatur. Officia voluptates molestiae dolores eum dignissimos optio cumque minus expedita saepe.</div>
</div>
</body>
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align
预设值
middle 位于中间
top bottom 与文字上方或者下方对齐
text-top 与文字顶边对齐，text-bottom 与文字底边对齐
数值
数字越大，input元素越靠上
<body>
<p>
<input type="checkbox" style="vertical-align: -2px;">
<span>我同意XXXX</span>
</p>
<p>
<img src="./自然风光logo.png" alt="" style="vertical-align: -37px;">
<span>
好看不
</span>
</p>
</body>
图片的底部白边
图片的父元素是一个块盒时，块盒高度自动，图片底部和父元素之间往往会出现白边，元素内字体越大，白边就越大
解决方法：
1. 设置父元素的字体大小为0
但也会有缺点：如果父元素里有文字，则该文字就会消失
2. 将图片设置为块盒
<style>
div{
border: 2px solid;
}
div img{
display: block;
}
</style>
<body>
<div>
<img src="./自然风光logo.png" alt="">
</div>
</body> 
白边出现的可能原因：
-
字母间隙（font-size）： 如果图片处于文本环境中，字母之间的空白可能导致看起来像是图片下方有白边。
-
行高与字母高度不匹配： 如果图片位于文本行内，确保文本行高与图片的高度匹配，以防止出现额外的空白。
-
行高与字母高度不匹配： 如果图片位于文本行内，确保文本行高与图片的高度匹配，以防止出现额外的空白。
堆叠上下文
z-index
堆叠上下文（stack context）,他是一块区域，这块区域由某个元素创建。它规定了该区域的内容再z轴上排列的先后顺序。
创建堆叠上下文的元素
1. html元素（根元素）
2. 设置了z-index（非auto）数值的定位元素
同一个堆叠上下文中元素在z轴上的排列
从后到前的排列顺序
1. 创建堆叠上下文的元素的背景和边框
如html元素背景和边框最靠后，定位元素(有z-index（值不是auto）)样式最靠后
2. 堆叠级别为负值的堆叠上下文
堆叠级别(z-index,stack level)相同时，代码靠后的在用户最前面
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index使auto的定位子元素，以及z-index是0的堆叠上下文
7. 堆叠级别为正值的堆叠上下文
先刷背景，再刷负数（z-index），再刷常规流盒子，再刷浮动盒子，再刷行盒,再刷定位元素（z-index值为auto），最后刷正值（z-indx）
<style>
html{
background: lightblue;
}
.container{
background: #008c8c;
width: 200px;
height: 200px;
position: relative;
margin: 50px;
/* 未创建堆叠上下文 */
}
.item{
width: 100px;
height: 100px;
background: red;
/* z-index不是auto就会创建堆叠上下文 */
z-index: -1;
position: absolute;
left: -30px;
top: -30px;
}
.normal{
background-color: rgb(239, 138, 6);
width: 20px;
height: 50px;
position: absolute;
}
</style>
<body>
<span style="background-color: darkgoldenrod;">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident commodi unde eligendi quis recusandae a eum quia. Eius sed beatae, excepturi recusandae ullam totam. In labore ex explicabo veritatis est.
</span>
<div class="container">
<div class="item"></div>
<div class="item" style="background-color: bisque; left: -25px; top: -25px;"></div>
<div class="normal">
</div>
</div>
</body>
每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插(注意整体（父元素与子元素）)
<style>
html{
background: lightblue;
}
.c1{
position: relative;
z-index: 0;
width: 200px;
height: 200px;
background: #008c8c;
}
.c2{
position: absolute;
z-index: -1;
width: 200px;
height: 200px;
background:chocolate;
left: 100px;
right: 100px;
}
.item1,.item2{
position: absolute;
width: 100px;
height: 100px;
}
.item1{
right: -50px;
bottom: -50px;
}
</style>
<body>
<div class="c1">
<div class="item1" style="background: red;"></div>
<div class="item2"></div>
</div>
<div class="c2">
<div class="item1" style="background-color: rgb(145,0,0)"></div>
<div class="item2"></div>
</div>
</body>
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
