iframe元素
框架页：iframebordor
在一个网页中嵌入另一个网页
iframe元素：可替换元素
可替换元素：
1.通常是行盒
2.显示的内容取决于元素的属性
3.css不能完全控制元素的样式
4.具有行块盒的特点
<a target="window" href=""></a>
<a href=""></a>
<a href=""></a>
<iframe name="window" src="" frameborder="0">
</iframe>
表示点击target属性值为“window”的a元素时他的页面会在name属性值为“windows”的元素中打开
在页面中使用flash
object和embed都是可替换元素
object
<object data="地址" type="类型">
<param name="" value="参数（即额外信息）">
</object>
embed
和object一样，只不过是兼容性不一样。如果要考虑兼容性，只需要将两个元素嵌套就好
表单元素
一系列元素，主要用于收集用户数据
input元素
输入框
type属性：表示输入框类型
date：日期选择框
password：密码框
text：文本框
sreach：搜索框
range：滑动框（可以设置最大值最小值）
color:颜色选择框
number：数字输入框（可以设置最大值最小值，step属性可以决定每次改变的数）
checkbox：多选框
radio：单选框（要加入name来分组）
fail：文件选择框
value属性：输入框的默认值
placeholder属性：提示内容，文本框没有内容时显示
input元素可以制作按钮
当type值为reset、button、submit时是按钮
select元素
下拉元素选择框，子元素只能是option和optgroup，optgroup是给选项进行分组(默认单选)，加上multiple后可以进行多选
textarea元素（文本域、多行文本框）
<textarea name="" id="" cols="30" rows="10"></textarea>
button按钮元素
type属性：reset、button、submit、默认值submit
表单状态
readonly属性：表示只读，不会改变表单显示样式
disabled属性：是否禁用，会改变表单显示样式，表示不能点击
配合表单元素的其他元素
label
普通元素，通常配合单选框或者多选框使用
-显示关联：for属性属性值是表单元素的id属性，把标签和表单元素关联
-隐式关联：将表单元素直接放进label中
datalist（数据列表）
该元素本身不会显示到页面，通常用于和普通文本的配合
<P>
请输入常用的浏览器：
<input list="useragent" type="text">
</P>
<datalist id="useragent">
<option value="1">100</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
</datalist>
form元素
通常情况会将其它表单元素（此时必须写上name或者value）放在他内部，当提交表单时会将表单以合适的方式提交到服务器
属性：
action：服务器
method：提交方式
fieldset元素
可以将表单分组
子元素
legend：分组标题
美化表单元素
伪类元素
1.focus：元素聚焦时的样式，比如鼠标点击文本框时边框会有变化
2.checked：表示单选框、多选框被选中后的样式
常见用法
1.重置表单元素样式
2.设置textarea是否允许调整尺寸
-both：默认值，两个方向都可以调整尺寸
-none：不能调整尺寸
-horizontal：水平方向可以调整尺寸
-vertical：垂直方向可以调整尺寸
3.文本框边缘到内容的距离
方式一：padding
方式二：text-indent（首行缩进）
4.控制单选框和多选框的样式
选中效果：可以根据checked间接设置，各种选择器后将display直接设置为none
表格
在css出现之前用表格布局网页
后台管理中用到表格元素
前台页面：面向用户的页面，注重样式布局
后台页面：面向管理员，界面要求不高，功能要齐全
表格不再适用于网页布局的原因：渲染时间过长，因为他是整体渲染完再显示
表格元素
表格（table）：表头（thead），表格主体（tbody），表尾（tfoot）
子元素（tr），标题单元格（th），单元格（td）
在表格里面进行单元格的合并：colspan属性、rowspan属性
其他元素
-1.abbr元素
表示缩写词（使用title元素加注释）
-2.time元素
主要用于向浏览器解释
-3.b（bold）元素
在以前是无语义元素，用于加粗字体。在html5中语义化后用于在语音阅读时重读。
-4.q元素
表示一小段引用文本，默认样式是加上双引号
-5.blockquote元素
表示大段引用的文本，默认样式是加上padding
-6.br元素
用于在文本中换行
-7.hr元素
无语义元素，主要用于分割文本部分
-8.mete元素
给网页添加源数据，给搜算引擎添加关键字，添加描述等，用于搜索引擎优化（以前有专门的叫作SEO，现在叫做营销）
-9.link
rel属性：relation，和网页的关系
type属性：连接的资源类型
@规则
at-rule（css指令）
1.import
@import"路径"：导入另一个css文件
2.charset（必须写到第一行）
@charset=“utf-8”
告诉浏览器该css文件使用的字符编码集为"utf-8"
web字体和图标
可以使用图片和背景图来实现图标，本节课用字符来实现
web字体
用户电脑上没有这个字体，浏览器强制用户下载这个字体
使用@font-size创造一个新字体
字体图标（字体图标库：iconfont.cn）
unicode方式（最好用）和fontclass常用
块级格式化上下文（BFC）
是一块独立的渲染区域，规定了该区域常规流块盒的布局
BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在内部创建BFC区域：
-根元素：意味着元素创建的BFC区域，覆盖了网页中所有的元素
-浮动和绝对定位元素
-overflow不等于visible
-display等于table
不同的BFC区域，他们渲染时互不干扰
创建BFC的元素，隔绝了它内部与外部的来联系，内部的渲染不会影响到外部
具体规则：
创建BFC的元素,他的自动高度需要计算浮动元素。解决高度坍塌副作用最小的方式：将overflow设置为hidden
创建BFC的元素，他的自动高度需要计算浮动元素
创建BFC的元素，他的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并
布局
两栏布局&三栏布局
【边栏定宽+浮动】+【主区BFC+自适应】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.contin{
min-width: 1000px;
width: 95%;
background-color: aquamarine;
}
.contin .left{
float: left;
width: 300px;
border: 3px solid black;
margin-right: 5px;
}
.contin .right{
float: right;
width: 300px;
border: 3px solid black;
margin-left: 5px;
}
.contin .main{
overflow: hidden;
border: 4px solid #008c8c;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="contin clearfix">
<div class="left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod hic recusandae veritatis ad, nesciunt facere earum sapiente commodi aliquid asperiores tenetur, enim, nihil eum quae doloribus officiis ipsum quis architecto necessitatibus eveniet voluptate? Architecto eum nam laudantium odit ratione ex cupiditate animi incidunt. Veritatis adipisci totam nulla ipsum magnam atque facilis vitae cumque ducimus. Fugit reiciendis impedit perferendis modi amet, accusamus consequuntur. Dolores quia iusto numquam, dignissimos perferendis optio deserunt, veniam error at doloribus sit, voluptate vel fugit! Nulla reprehenderit et non, in repellendus nihil quis mollitia nemo ullam, velit iste excepturi ipsam, magni dolore enim. Ipsa provident voluptates quam. Consequatur earum qui ut magnam est incidunt ea, ullam optio, quae praesentium similique neque obcaecati cum pariatur possimus. Quam dolor quod eius voluptas itaque consequuntur temporibus, assumenda, quo iusto a, nemo corrupti tenetur? A deleniti quos soluta itaque voluptatum, dolorem assumenda excepturi distinctio ratione repellat aut aliquam recusandae doloremque quas neque amet provident expedita voluptatem consequuntur in nisi, nam totam nihil! Autem excepturi nam adipisci laboriosam blanditiis officia facere ea magni distinctio nulla esse voluptates omnis, ducimus alias impedit corporis tempora. Aliquam dolor quos odit quisquam accusantium fugiat reiciendis itaque atque sequi maxime laboriosam, fuga quidem harum unde! Sequi atque impedit, asperiores ipsam temporibus hic porro numquam voluptates at dicta fugit, exercitationem a, unde labore voluptatibus sint aliquid recusandae enim error! Dolores velit vero, quas, qui quod aliquid et cumque sapiente aperiam accusantium recusandae voluptatibus deleniti iste repudiandae est provident eaque minus id praesentium ex molestias, maiores dicta nesciunt officiis? Repellat pariatur quis consectetur. Eum qui omnis labore provident sed atque consequuntur molestias delectus optio quia totam quisquam assumenda tenetur, repellat iste tempore est veritatis, debitis excepturi tempora earum impedit odit voluptatibus maxime! Totam molestiae harum esse illo excepturi beatae veniam, veritatis sed quod numquam nobis vel, facilis porro. Recusandae accusantium quis iusto placeat earum accusamus, ratione dolore itaque vel atque, ad magni iure animi tenetur inventore, facere ea corrupti aspernatur tempora explicabo repudiandae minima natus mollitia incidunt. Architecto, dolore vero! Possimus et necessitatibus est ut molestias nobis dolorem expedita, iure esse sed porro perspiciatis magni. Veniam quo minima voluptate, culpa possimus explicabo provident natus rem sunt maxime laboriosam, dicta quaerat consectetur, quasi expedita repellendus a. Dolores tempore omnis est, velit facere unde nulla maiores nihil autem exercitationem quidem tenetur, deserunt debitis a culpa accusamus voluptate! Dolorum sit laboriosam aut odit deleniti illo, animi rerum iusto consequuntur impedit? Commodi dolor officiis repellat dolorem fuga eum, voluptas vero dicta eaque ipsa itaque tenetur doloremque, praesentium, maxime nam unde nostrum ullam vel sint officia quam labore eius dignissimos! Magnam laudantium eveniet, maxime, ea nisi ipsam modi rerum optio odio voluptas laboriosam aperiam soluta, dolore blanditiis earum nesciunt. Labore deserunt repellendus perferendis accusamus at facilis, fugiat possimus. Minima sit tempore magni tempora ducimus ut nobis veritatis id non. Et excepturi provident eum exercitationem in recusandae tenetur! Consequuntur debitis distinctio asperiores porro explicabo atque magnam delectus assumenda, a odit totam maiores quod aut rem voluptatem error quo deleniti. Iste sit ab repudiandae cum optio, distinctio suscipit labore? Dolores odit illum necessitatibus commodi id. Nisi, iure quos. Cum atque dignissimos voluptates nemo laboriosam obcaecati soluta nisi incidunt laborum minus, reprehenderit eos, quos labore reiciendis omnis veritatis. Quia pariatur distinctio magni dignissimos saepe! Sit harum quae obcaecati aliquam autem suscipit eaque consectetur eius maxime optio, quisquam minus ipsa, alias non earum provident tenetur ad iste aperiam tempora nulla facere voluptas impedit libero? Molestias maxime ab, asperiores recusandae distinctio, accusamus quis laborum ex in suscipit pariatur deserunt rem, repellat ipsa sint aliquid vero fugiat nostrum? Magnam at, blanditiis quidem delectus facere inventore unde in ipsum cumque aliquid. Molestiae ipsam consequatur cumque, saepe sunt earum, obcaecati cupiditate, quo ullam rerum facere molestias repellat fuga tempora culpa debitis ut recusandae maiores laborum odit aut quis beatae. Cum deserunt quasi iusto aliquam modi fugit magnam dolorum, accusamus in, vel ad consequatur assumenda eius esse tempora libero? Voluptatem sequi recusandae nulla. Consequuntur, nisi! Nihil nisi vel repellendus tempore illum. Neque sapiente aliquam, cumque dolore quis nemo repellat ex amet reiciendis commodi! Id quisquam aperiam deserunt pariatur repudiandae esse doloribus facere unde veritatis, neque nisi architecto et repellat tempora molestias ratione error. Nulla enim ratione eum provident est, delectus quidem quod saepe, optio corrupti omnis nam ipsam dolores. Molestias, accusamus vero. Modi iusto accusamus nisi quaerat minima, tenetur, at repellat ipsam illum sequi dicta quos repudiandae est deleniti corporis, reprehenderit magni. Quas harum quibusdam quos iure sunt neque veritatis aut exercitationem. Similique vel, ea minima repudiandae sit praesentium quisquam nisi dicta temporibus officiis expedita animi fuga vero, ipsum amet laboriosam neque iste dolor iure doloribus nulla ex nobis. Totam nemo veritatis pariatur dolor nam molestias aspernatur vero cum nihil rerum velit expedita ab adipisci voluptas ut nostrum repudiandae odit laboriosam, magnam dolore natus. Alias laudantium amet optio minima hic earum? Totam quas error blanditiis et sed odio, facere at! Eum tempora culpa quas provident aspernatur iste exercitationem aliquam dicta. Saepe vero quos molestiae perferendis tempore eos excepturi aut repellat temporibus quidem aliquid vitae ipsa doloremque aspernatur, ipsum repellendus laudantium alias mollitia? Quidem exercitationem, ex assumenda distinctio nobis itaque impedit dicta voluptatibus nostrum quod earum temporibus rem aliquam unde voluptatem sequi tenetur illo, quisquam dolore cupiditate iusto sapiente facere repudiandae. Eligendi numquam culpa ad, mollitia sequi, magnam itaque ex quos blanditiis rem excepturi, odit eveniet nesciunt provident consectetur natus enim autem voluptatum? Aliquid minima repellendus magni eos magnam et accusantium in quod praesentium, illo totam velit obcaecati fugiat aliquam voluptas omnis, voluptate accusamus. Doloribus, nam nisi? Corrupti sequi fuga porro enim quia magnam doloribus maiores vel alias ipsa provident ea natus qui doloremque deserunt, suscipit explicabo minima repellendus quisquam atque. Totam officiis at consequatur, rem, neque similique tempora, iste inventore quas voluptas saepe temporibus. Illum ipsa cupiditate expedita accusamus ea tempora ad ut reiciendis repellendus nisi officia quidem similique delectus architecto amet minima, iure praesentium accusantium soluta, tempore sequi quo? Facilis ipsa voluptatum, esse, inventore minima, est error deserunt ea ipsum fugiat quam eius dolores vero tenetur similique consectetur magnam. Praesentium, delectus beatae.</div>
<div class="right">Aut eveniet dolores qui quam placeat perspiciatis labore, eum sit nulla deserunt suscipit laborum exercitationem libero nam! Error quaerat facilis, ipsum cumque deserunt explicabo repellendus? Molestias quos magnam suscipit temporibus delectus aspernatur dolorum, enim vero, eos ducimus repellendus eius illum consequuntur sit velit dolore perspiciatis tenetur? Unde ullam labore quae voluptate sint repellat facilis molestiae rem consectetur ratione provident magni harum repudiandae ducimus, quos quidem eos aliquid dignissimos modi accusamus neque esse. Consectetur deleniti debitis amet sint illo, quo asperiores aut aspernatur suscipit voluptate nihil unde molestias alias tempora veritatis. Facilis tempore praesentium voluptatibus labore repellendus minima tempora aperiam, iure eveniet harum reiciendis est adipisci, quaerat sunt earum aut deserunt dolores dolore inventore nam eaque dolor. Quasi, vel illum velit ducimus numquam, error tempora autem et quidem dolore nam? Corrupti, itaque sequi! Cum voluptates illum sit cumque est dolore temporibus maxime vero alias, commodi vel odit odio deleniti porro veniam neque repellat velit dolorem inventore molestias mollitia harum! Necessitatibus illo nihil cum voluptate sapiente animi voluptatem fugit quidem ipsam ut earum, facere iure quisquam impedit neque libero at fugiat aut minus odio incidunt quas sunt laborum! Nostrum quae dolorem minima. Atque saepe, animi, quas dignissimos ipsum consequuntur ut quo quisquam sunt placeat, modi numquam! Repellat sed illum ex. Atque dignissimos ad expedita facere dolores sunt ipsam harum, maxime dolore consectetur nisi repellendus numquam quo accusantium totam rerum voluptatibus aliquam ex! Recusandae, qui deserunt vero odit molestias labore laboriosam magnam asperiores eos nisi ipsa, fugiat tempora quia itaque reiciendis dolor ut ratione doloremque debitis eius cum omnis nemo voluptatum exercitationem? Explicabo rerum modi, aliquam error alias mollitia nihil necessitatibus eaque pariatur cum deleniti fuga enim quos fugiat est commodi exercitationem voluptate optio magnam veniam similique ab quo sapiente. Recusandae earum, corrupti quia saepe aspernatur ex id. Dolores commodi distinctio mollitia odit sequi nam deleniti? Temporibus, vero illo voluptatibus esse at iste, nobis voluptates sint ipsam, rerum atque autem quia. Adipisci, soluta animi, aliquam deserunt ad impedit quaerat blanditiis dolores quos dolore quae tempora nostrum officiis ipsam aperiam cupiditate. Nobis facilis, soluta ducimus provident adipisci ad laudantium fuga velit veniam atque, aperiam tenetur. Eius optio repudiandae dolore, labore nisi at exercitationem provident consequatur, quia, impedit suscipit. Expedita alias illum iste praesentium aspernatur itaque placeat! Maxime sint, ipsa at voluptatibus sunt rem natus quis facere dicta quisquam nemo eum magni modi? Fugit sapiente a perspiciatis at molestiae atque ratione libero velit magni amet suscipit saepe quia, iusto, voluptatem, ex praesentium consequatur dicta officia fuga pariatur. Molestias unde officiis nostrum repellat enim porro eos sapiente fugit asperiores, delectus voluptatem optio nihil quas consectetur nobis natus ad. Fugit quod libero facere error. Nesciunt, ipsa reprehenderit rerum iste quis, eligendi optio ipsum in consequatur necessitatibus voluptas suscipit ullam. Minima porro voluptates eligendi quos nesciunt! Rem nostrum nihil vel! Molestias natus at exercitationem id. Ipsam et amet cum minus doloribus, ducimus consequuntur nemo rerum, dolorum nobis numquam dolorem harum. Recusandae libero iure aspernatur asperiores nemo expedita quasi consequatur suscipit maiores praesentium error reprehenderit molestias id, odit aut soluta quisquam! Excepturi aspernatur ipsa culpa sapiente, temporibus cumque consequuntur natus quod aliquam fugiat quia voluptas ut animi debitis cupiditate sit ab, maiores libero quo, nisi quam earum alias quibusdam? Accusantium nisi architecto necessitatibus suscipit amet magni. Accusantium earum magnam non laboriosam suscipit, laborum voluptatum sequi nihil quod totam inventore, a tempora omnis similique in blanditiis molestias nisi ipsa adipisci, aliquid porro beatae velit commodi quae! Cum repellat sunt impedit ratione, deleniti rerum excepturi ad quos est fugiat debitis amet libero facere nisi laboriosam dicta. Libero eligendi, nesciunt accusamus magnam voluptas dicta similique quia perspiciatis tenetur quae corrupti consectetur vel obcaecati. Quam est iste cum, debitis molestiae quaerat repellendus reprehenderit accusantium consequuntur assumenda iusto tempore quidem sequi similique, nam rerum excepturi, enim neque nisi numquam maiores illum quod hic ipsa. Officia cumque dolores blanditiis veritatis esse magni eligendi sed aliquid aliquam repellat eveniet saepe sequi est laudantium architecto tempora cum autem obcaecati deserunt, quod provident quasi accusamus! Necessitatibus animi hic molestiae quasi ipsum optio voluptates molestias iusto? Pariatur quibusdam numquam est aperiam veritatis culpa eos doloribus esse eveniet, recusandae, tempora expedita harum eum ullam corrupti id sit voluptas nisi? Inventore rem alias laborum delectus laboriosam ea beatae aperiam obcaecati praesentium ipsum dolor omnis, numquam vitae, facilis cupiditate. Voluptate sunt officia unde, dolorem error molestiae reiciendis dolore vero, enim non odio? Officiis, nostrum modi officia omnis est ipsam veniam cum, nihil voluptate culpa error esse inventore unde itaque exercitationem ab eaque sed? Incidunt, deleniti odio. Voluptates veritatis error similique fuga quis ea possimus iste explicabo, corporis, dolorem ex dolores natus modi, asperiores unde? Quod atque officiis consequuntur soluta quas doloribus quis est earum sed quisquam. Voluptatum facilis voluptas facere sapiente voluptatibus animi sed eligendi similique atque iure aperiam, nisi eos quas. Assumenda unde qui, sapiente laudantium a beatae cum blanditiis dolorum esse obcaecati adipisci harum debitis ab perferendis neque asperiores excepturi. Illum vitae facere quo necessitatibus at magnam fugiat ratione inventore cum! Quo, at commodi praesentium, eaque cupiditate dicta provident dolore, beatae nemo fuga officia. Nobis in a aut exercitationem quas tenetur, voluptas explicabo deserunt iure, consequuntur fugit earum ab odio asperiores officiis pariatur possimus ut nulla quae animi veritatis maxime? Quod, sint placeat mollitia nemo doloremque molestiae animi architecto, nulla, sequi maxime labore cumque deserunt odio voluptatibus eius quidem voluptates in consequuntur? Est pariatur placeat quidem eveniet saepe non neque, earum minus odit recusandae dolor sequi corrupti, tempore molestias ratione veniam illum optio quas officiis. Quod debitis amet delectus, doloribus harum dolorem neque vitae voluptas, veritatis at facere modi. Quasi optio unde illum, dolore sequi eligendi ipsam error reprehenderit minus, ullam ad animi mollitia possimus nisi illo. Ea magni facilis quis eligendi beatae hic odit deleniti blanditiis delectus. Est eligendi, suscipit, magni tempora, nobis aspernatur vitae exercitationem nemo repellat accusamus libero sapiente? Nemo perspiciatis maiores suscipit, magni odio nisi doloribus delectus aliquam nobis incidunt distinctio voluptates ipsa beatae nulla non corrupti nihil quo laborum enim at dicta provident, recusandae, fuga laboriosam. Animi fuga dolores aspernatur numquam, doloremque quia natus itaque?</div>
<div class="main">Inventore distinctio veniam praesentium quidem illum minus a ipsum fuga veritatis. Asperiores nesciunt, ad ratione recusandae ab ex fuga eligendi, dolorum porro odio assumenda. Facilis natus nihil fuga dicta, debitis architecto vel dolorem possimus mollitia totam repellat numquam et incidunt consectetur expedita amet unde perspiciatis nisi sit maiores dolore. Hic, corporis est quam ullam sequi nostrum quae laborum exercitationem inventore placeat error nemo, totam in odio sapiente? Recusandae sunt similique magni, odio dolorum laboriosam aliquam nihil molestias fuga, ad earum! Qui possimus, explicabo aspernatur dolore at distinctio. Dolor nulla incidunt asperiores non ab! Totam aliquam, deserunt ab magnam facere iusto dolores pariatur, fugiat adipisci tempore dicta itaque vero assumenda! Laudantium, officiis possimus? Quas mollitia deserunt assumenda blanditiis voluptatem, fugit ullam delectus, consequuntur, ex laudantium alias est. Eveniet magni, atque eum corrupti aliquam laborum maxime laboriosam sunt perspiciatis aliquid, ut autem, dolores accusantium nam hic facilis tenetur at cum officiis a nostrum suscipit commodi error? Suscipit dolorum hic corrupti quos odit dolores nesciunt tempora! Minima quae est ab possimus culpa. Quia deleniti provident harum vero aliquid doloribus officia repellendus ducimus corrupti enim officiis aspernatur, architecto recusandae nobis dolorum tempora asperiores nostrum adipisci blanditiis labore obcaecati optio molestiae. Non excepturi quidem error quis sequi doloremque numquam veritatis, neque voluptatum incidunt fuga labore beatae eligendi nam libero, unde laborum assumenda. Magni rem facilis earum nihil vel quasi fugiat distinctio placeat doloremque? Dolor cupiditate, explicabo vitae maxime repellendus mollitia consequatur sed eum vel dolore deserunt veritatis quisquam deleniti. Temporibus vero nesciunt voluptatum voluptatem quia, odio dolore id suscipit similique perspiciatis distinctio. In quas explicabo illum eveniet nulla. Quo corporis quas minima non, fuga provident numquam eos consequatur expedita maxime reprehenderit id aperiam assumenda placeat totam! Exercitationem, rem. Sint quae dolore consectetur ut veniam harum minus corporis. Soluta suscipit odio facilis molestias vitae voluptatum, alias recusandae modi eos. Eos officiis accusantium maxime? Inventore exercitationem nobis ex dolore tempore consectetur, culpa facilis suscipit saepe iste esse eveniet vitae sit ducimus laborum enim quisquam quaerat dicta voluptas id aliquid quia. Corporis fugit fugiat sequi quod modi voluptatem architecto ad repellendus! Saepe id dolore facere nesciunt aut modi recusandae quod rerum, maxime autem voluptas quasi eveniet illo qui quisquam soluta excepturi provident! Accusamus maiores itaque obcaecati consequuntur quibusdam. Nulla, ad laboriosam. Beatae dolores autem ullam rem illo. Debitis exercitationem incidunt aut praesentium nulla reiciendis eos, quasi sequi odio magni facilis molestiae. Deleniti, dolores! Accusamus in dolor, deleniti sed harum asperiores minus, dolorem deserunt sint molestias ratione, corporis cupiditate? Corporis minus qui earum quaerat quidem et veniam dolores? Dolorem debitis deserunt possimus veritatis quaerat laborum dolores repellat! Perspiciatis voluptas doloribus facere quibusdam. Deserunt alias ex dolorum, numquam nihil reprehenderit hic nam ipsum repellat facilis quos delectus at nemo amet modi vel consequatur optio minus quisquam, odit porro. Magni cumque totam voluptatem laborum magnam dolorum fugit provident velit omnis? Tempora velit laudantium cumque voluptate harum qui cum obcaecati consequuntur dolore! Aperiam nostrum rerum, recusandae, eligendi, praesentium error nisi eveniet deserunt nesciunt repellat totam quaerat libero quia ea cupiditate? Pariatur dolores ipsum commodi necessitatibus recusandae aspernatur sed non corporis quasi culpa ut ipsam nostrum quibusdam consequuntur totam mollitia quae earum id omnis, minima nulla porro. Consequuntur itaque, ipsa blanditiis quae ex dolor ut quod, cupiditate recusandae eligendi distinctio cum earum veniam obcaecati facere magni. Atque, doloribus sunt harum dolor consectetur deleniti reprehenderit doloremque temporibus velit eos minus et, ipsam at architecto accusantium. Provident illum officia consequuntur officiis alias tempora cupiditate aut voluptatem corporis vero a nemo, magnam quae sunt atque! Minus commodi expedita, eveniet odio fuga tempora impedit cumque? Odio dignissimos quod, saepe voluptates non voluptatem vitae corrupti molestias cum numquam ipsum. Tempore accusamus fugit incidunt rem voluptas non. Maiores modi quae repellendus, tempora ducimus at eum autem harum? Inventore sed ducimus provident aut similique ad ab officiis fugiat sit dolor laboriosam temporibus tenetur eius voluptatem magnam accusantium reiciendis, numquam totam nisi. Animi voluptate in similique eos voluptatem adipisci voluptas nulla, impedit ipsum officiis blanditiis fugit quidem obcaecati eum commodi magnam sint, dolor incidunt consectetur labore facere facilis pariatur. Numquam architecto, molestias ipsam quod expedita accusantium itaque aliquam possimus cupiditate similique est, vero dolores odit ipsum voluptatibus atque? Beatae sint nostrum quo ab sit qui ipsa nobis a esse quaerat quisquam dolorum, necessitatibus soluta repudiandae ducimus corrupti? Quas totam eligendi hic laborum asperiores, a ratione nisi consequatur voluptatem et ut, corrupti quaerat, temporibus harum quibusdam illo aut recusandae voluptatibus accusamus dolores! Culpa error totam iure similique hic reprehenderit autem inventore vitae labore, dolores voluptate, suscipit, quos fuga earum atque? Facere optio quisquam sequi molestiae. Non dolorum voluptatibus adipisci. Vitae quam, quas quaerat veritatis aliquam facilis. Enim dignissimos, earum harum corporis similique minima alias praesentium omnis debitis consequatur obcaecati. Quo ipsum, minima in ipsam quae veniam cum quisquam iusto eaque doloribus consectetur dolorum quasi dignissimos sed voluptatibus nobis culpa earum atque aliquam perferendis quis molestiae beatae distinctio. Nemo ipsa optio aliquid doloremque cumque quam porro deserunt excepturi maiores! Illum, impedit maiores molestiae velit alias itaque eius? Nisi quibusdam dicta, architecto quasi ipsam quod ex ratione molestias quam voluptatum labore fugiat amet quaerat consectetur eaque tempore minus ab consequatur quo corporis laudantium culpa numquam quis. Nisi, excepturi! Saepe aliquid similique id in rerum totam quod sed cumque, natus porro, molestiae placeat expedita nemo voluptatem odit aliquam harum nobis alias accusantium. Voluptatum ab cum vitae at ducimus voluptates atque doloremque, facilis quod repudiandae maiores ad optio quos dicta, consequatur fuga possimus culpa nobis quam suscipit quidem vero. At consequatur quasi sed? Dignissimos hic delectus architecto pariatur, corporis tenetur. Corrupti fuga velit distinctio voluptate facere qui deleniti natus modi eveniet laboriosam quisquam magni nulla, illo nostrum ut asperiores, odio quas vero non inventore minima commodi praesentium explicabo laudantium. Cupiditate nisi error vero repellendus fugit repellat nemo molestias necessitatibus natus tempore sapiente, dolorem, ratione eos, officia quidem mollitia consequatur minima veniam quibusdam totam nulla? Deleniti veritatis voluptatem aspernatur quae dolorum perspiciatis omnis quisquam rem, molestiae corrupti natus nemo voluptas ipsa velit hic magnam. Voluptates nulla impedit architecto. Sed ratione ad sunt natus deserunt minima tenetur aut.</div>
</div>
</body>
</html>
等高布局
通常要处理侧边栏高度不够的问题
1.CSS3弹性盒
2.JS控制
3.伪等高
将侧边栏的高度设置很高，将margin设置为负数（整个盒子必须是>0），父元素设置overflow为hidden
元素书写顺序
先写浮动再写常规流
对于搜索引擎不太友好
主区域书写在前
主区域书写时留出空间（使用margin实现），侧边栏定宽使用绝对定位
后台页面的布局
整个页面固定定位
行盒的垂直对齐
多个行盒在垂直方向上的对齐
给没有对齐的元素设置一个vertical-align
预设值：middle，top…
数值（px）
图片的底部白边
图片的父元素是一个块盒，块盒的高度自动，图片和父元素之间会有一个白边
解决方法：
1.设置父元素的字体大小为0（副作用，父元素中的文字就看不见）
2.将图片设置为块盒
3371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
