你好！ 这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。
定位
定位的概述
通过 CSS 样式属性( float 或 position )设置 HTML 元素运行时，在 HTML 元素页面中的位置。
属性为：
- float（浮动）
- position（定位）
文档流
HTML页面中的元素的排列规则
- 块级元素：垂直方向排列
- 内联元素：水平方向排列
- 行内块级元素：水平方向排列
注意：水平方向排列的元素，如果一行不能容下所有元素时，元素会自动换行
float属性
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background-color: blueviolet;
}
.box2{
background-color: burlywood;
/*
为某个元素设置为浮动时，该元素脱离文档流
*会改变原本HTML文档流的排列情况
*后面的兄弟元素向前补充脱离文档流元素原本的位置
*/
float:left;
}
.box3{
background-color: cadetblue;
float:left
}
span{
width: 200px;
height: 200px;
float: left;
}
span:nth-of-type(1){
background-color: chartreuse;
}
span:nth-of-type(2){
background-color: chocolate;
}
span:nth-of-type(3){
background-color: cornflowerblue;
}
</style>
</head>
<body>
<!--
块级元素：
*原本是垂直方向排列，一旦浮动变成水平方向排列
*原本的宽度为父级元素宽度的100%，设置为浮动变成0(不设置width属性的情况下)
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!--
内联元素：
*原本是水平方向排列：设置为浮动之后没有变化
*原本的width和height属性是无效的，设置为浮动之后变成有效的
-->
<span>啦啦啦</span>
<span>啦啦。啦</span>
<span>啦啦啦。</span>
</body>
</html>
父子结构的浮动
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>父子结构的浮动</title>
<style>
.parent{
width: 300px;
height: 300px;
background-color: cornflowerblue;
}
.child{
width: 100px;
height: 100px;
background-color: darkcyan;
/*父级元素与子级元素的结构，为子级元素设置为浮动；子级元素在父级元素的范围内进行浮动*/
float: right;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
兄弟结构的浮动
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兄弟结构的浮动</title>
<style>
div{
width: 200px;
height: 200px;
}
div:nth-of-type(1){
background-color: darkgoldenrod;
}
div:nth-of-type(2){
background-color: rgb(160, 150, 124);
/*兄弟元素的结构，为后一个兄弟元素设置为浮动，不能超过前一个兄弟元素(没有设置为浮动)的*/
float: left;
}
div:nth-of-type(3){
background-color: rgb(51, 40, 11);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
浮动元素与外文本内容
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素与外文本内容</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: darksalmon;
/*设置为浮动的元素，文本内容会环绕在这个浮动的元素周围*/
float: left;
}
</style>
</head>
<body>
<div class="box"></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates aperiam magnam atque obcaecati delectus,
eius labore laboriosam rem? Mollitia magni dolorem,
reprehenderit magnam necessitatibus neque cupiditate at ex eum! Enim.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates aperiam magnam atque obcaecati delectus,
eius labore laboriosam rem? Mollitia magni dolorem,
reprehenderit magnam necessitatibus neque cupiditate at ex eum! Enim.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates aperiam magnam atque obcaecati delectus,
eius labore laboriosam rem? Mollitia magni dolorem,
reprehenderit magnam necessitatibus neque cupiditate at ex eum! Enim.
</p>
</body>
</html>
clear属性
非浮动元素设置清除元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非浮动元素设置清除元素</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: bisque;
float: left;
}
.box3{
background-color: blue;
/*使用clear属性为非浮动元素清除浮动时，该元素移动到之前浮动元素的下方*/
clear: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
浮动元素设置清除元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动元素设置清除元素</title>
<style>
div{
width: 200px;
height: 200px;
}
.box1{
background-color: aqua;
}
.box2{
background-color: bisque;
float: left;
}
.box3{
background-color: blue;
float: left;
/*使用clear属性为浮动元素清除浮动时，该元素移动到之前浮动元素的下方*/
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
高度塌陷
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高度塌陷</title>
<style>
.con{
border: 1px solid black;
}
.box1,
.box2{
width: 200px;
height: 200px;
float: left;
}
.box1{
background-color: blueviolet;
}
.box2{
background-color: cadetblue;
}
/*
解决高度塌陷问题(开启 - Block Formatting Context,块格式化上下文)
*BFC在默认情况下是关闭的
*开启BFC之后，相关于在某个区域内和外部进行隔离
*开启BFC的方式
*将元素设置为浮动（脱离文档流）
*将元素设置绝对定位（脱离文档流）
*将元素设置为行内块级元素（水平排列、元素之间存在空白区域）
*将块级元素的overfloat属性设置为非visible的值（同时导致内容溢出的问题）
*注意：每一种开启BFC的方式，都有副作用
*/
.con::after{
content: "";
/*将元素设置框架元素*/
display: block;
clear: both;
/*将该伪元素进行隐藏*/
visibility: hidden;
}
</style>
</head>
<body>
<!--
高度塌陷的问题：
*不设置父级元素的height属性
*子级元素设置为浮动
-->
<div class="con">
<div class="box1"></div>
<div class="box2"></div>
<!--为了解决高度塌陷的问题，专门定义一个元素-->
<!--<div class="clear"></div>-->
</div>
</body>
</html>
定位
CSS 的核心因素：
- 开启定位：设置position属性
- 设置偏移量:上(top)、右(right)、下(bottom)、左(left)四个方向
position属性
属性值为：
- static：表示静态定位，默认值（不开启定位）
- sbsolute：表示绝对定位
- fixed：表示固定定位
- relative：表示相对定位
脱离文档流
能让HTML元素脱离文档流的方式：
- 将元素设置为浮动
- 将元素设置为绝对定位
- 将元素设置为固定定位
绝对定位
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
body{
margin: 0;
}
.con{
width: 400px;
height: 400px;
background-color: rgb(96, 96, 247);
/*
如果只开启定位，不设置偏移量的话->保持在原有位置不动
*
*/
position: absolute;
left: 100px;
bottom: 100px;
/*top: 100px;*/
/*right: 100px;*/
}
.box1{
width: 100px;
height: 100px;
background-color: rgb(129, 129, 184);
position: absolute;
left: 400px;
}
</style>
</head>
<body>
<!--
如果设置为绝对定位的元素的父级元素是<body>元素的话，该元素就是相对于HTML页面定位
-->
<div class="con">
<!--
如果设置为绝对定位的元素的父级元素不是<body>元素的话：
*父级元素没有开启定位，该元素就是相对于HTML页面进行定位
*父级元素同时开启定位，该元素就是相对于父级元素进行定位
-->
<div class="box1"></div>
</div>
</body>
</html>
固定定位
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
body{
height: 2000px;
}
.box{
width: 200px;
height: 200px;
background-color: grey;
position: fixed;
bottom: 20px;
left: 400px;
}
</style>
</head>
<body>
<!--
固定定位：设置当前元素相对于浏览器窗口定位
*电商首页的楼层导航
*回到顶部
*资讯网站文章精选（动态的固定定位）
-->
<div class="box"></div>
</body>
</html>
相对定位
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
body{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background-color: grey;
margin-left: 200px;
margin-top: 200px;
/*相对定位：相对于当前元素原本的位置；是不脱离文档流的*/
position: relative;
left: 200px;
}
#box2{
width: 200px;
height: 200px;
background-color: lightblue;
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
</body>
</html>
继承与层叠
继承
CSS 中的样式属性的继承。继承指当前样式属性不仅能作用于当前的元素，还能作用于所有的后代元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承的概念</title>
<style>
/*字体颜色设置在<div>元素中*/
.con{
/*CSS属性具有可继承性*/
color: lightcoral;
}
</style>
</head>
<body>
<div class="con">
<!--文本内容是在<p>元素中-->
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Harum mollitia debitis obcaecati maiores, unde quos,
in sit voluptatum quas expedita blanditiis veritatis assumenda placeat est autem non eaque,
voluptatibus quibusdam.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Harum mollitia debitis obcaecati maiores, unde quos,
in sit voluptatum quas expedita blanditiis veritatis assumenda placeat est autem non eaque,
voluptatibus quibusdam.</p>
</div>
</body>
</html>
属性分类
CSS 的样式属性分为：
- 具有可继承性的属性
- 具有可继承性的属性
层叠
在浏览器运行HTML页面时，最终看到的HTML页面的效果，实际上是多个样式叠加在一起的综合效果
- 浏览器本身对HTML页面提供了一个默认样式
- 用户对HTML页面也可以定义样式
- 开发者对HTML页面也会定义样式
规则：用户定义的样式会覆盖浏览器提供的样式，然后开发者定义的样式会覆盖用户定义的样式
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠</title>
<style>
/*
即使是开发者定义的样式：多重样式
*根据CSS选择器的优先级别，判断最终有效的那一个
CSS选择器的有限级别，存在一个例外：
*当将某个样式属性设置为!important，表示该属性的级别最高
*/
div#box p{
color: aqua;
}
p{
color: rgb(165, 241, 241);
font-size: 48px;
}
div p{
color: rgb(8, 8, 8);
}
</style>
</head>
<body>
<div class="box">
<p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
</div>
</body>
</html>
布局
什么是布局
HTML页面的结构，实现布局是要通过HTML元素和CSS样式布局，类似设计图纸
布局的分类
目前分为：
- 居中布局：水平方向的居中布局、垂直方向的居中布局以及水平和垂直都居中的布局
- 多列布局：两列布局和三列布局、等分布局和等高布局（圣杯布局和双飞翼布局）
- 全屏布局
技术划分：
- CSS3 新增的弹性(flex)盒子模型
- CSS3 新增的网格(grid)布局
根据场景分为：
- 响应式布局：一个HTML既可以在PC电脑端浏览器打开，也可以在移动端浏览器打开
- 移动端布局：在手机或平板电脑端浏览器打开
之前分为：
- 圣杯布局（三行三列布局）
- 双飞翼布局（优化版的圣杯布局，淘宝前端团队推出）
- 瀑布流布局
水平居中布局
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种实现水平居中</title>
<style>
/*
第一种实现水平居中的解决方案：
*问题：
*子级元素的文本内容同时也会居中对齐
*为了实现子级元素的水平居中，为父级元素设置额外的样式属性
*/
.parent{
width: 100%;
height: 200px;
background-color: darkblue;
/*
text-align属性：原本作用是设置文本内容的对齐方式
*对inline-block元素同样有效
*/
text-align: center;
}
.child{
width: 200px;
height: 200px;
background-color: darkgray;
/*
将实现水平方向居中效果的元素设置为inline-block:display:
*多个inline-block元素之间水平方向排列
*inline-block元素可以设置width和height属性的
*inline-block元素具备inline元素的特性
*/
display: inline-block;
/*覆盖掉父级元素设置text-align属性的值*/
text-align: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">哈哈哈</div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种实现水平居中</title>
<style>
.parent{
width: 100%;
height: 200px;
background-color: darkblue;
}
/*
第二种实现水平居中：
*为当前元素设置width属性（定宽）
*使用margin属性实现水平居中
问题：如果当前元素脱离了文档流，margin属性失效
*/
.child{
width: 200px;
height: 200px;
background-color: darkgray;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">哈哈哈</div>
</div>
</body>
</html>
例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第三种实现水平居中</title>
<style>
/*
第三种实现水平居中的解决方案：
*将子级元素设置为绝对定位（父级元素设置为相对定位）
*left设置50%和translateX()设置-50%实现水平居中
问题：
*为了实现子级元素的水平居中，为父级元素设置额外的样式属性
*实现水平居中时：
*如果使用margin-left属性：导致耦合度升高
*如果使用transform属性：CSS3新增属性，兼容性问题
*/
.parent{
width: 100%;
height: 200px;
background-color: darkblue;
/*为了子级元素是相对于父级元素进行定位*/
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: darkgray;
position: absolute;
left: 50%;
/*margin-left属性的值与当前元素的width属性的值有关的*/
/*margin-left: -100px;*/
/*translateX()函数的50%指的是当前元素宽度的50%*/
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">哈哈哈</div>
</div>
</body>
</html>
垂直居中布局
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种实现垂直居中</title>
<style>
/*
第一种实现垂直居中：
*将父级元素设置为table-cell
*在父级元素设置vertical-align属性垂直居中
问题：为了实现子级元素的水平居中，为父级元素设置额外的样式属性
*/
.parent{
width: 200px;
height: 600px;
background-color: darkgrey;
/*默认作用：设置文本内容在垂直方向的对齐方式*/
vertical-align: middle;
/*table-cell值相当于HTML中的<td>元素*/
display: table-cell;
}
.child{
width: 200px;
height: 200px;
background-color: darkkhaki;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">哈哈哈</div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种实现垂直居中</title>
<style>
/*
第二种实现垂直居中：
*将子级元素设置为绝对定位（父级元素设置为相对定位）
*left设置50%和translateY()设置-50%实现垂直居中
问题：
*为了实现子级元素的垂直居中，为父级元素设置额外的样式属性
*实现垂直居中时：
*如果使用margin-top属性：导致耦合度升高
*如果使用transform属性：CSS3新增属性，兼容性问题
*/
.parent{
width: 200px;
height: 600px;
background-color: darkgrey;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: darkkhaki;
position: absolute;
top: 50%;
/*margin-top: -100px;*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">哈哈哈</div>
</div>
</body>
</html>
居中布局
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中布局</title>
<style>
.parent{
width: 1000px;
height: 600px;
background-color: darksalmon;
vertical-align: middle;
display: table-cell;
}
.child{
width: 200px;
height: 200px;
background-color: indianred;
display: table;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>居中布局</title>
<style>
.parent{
width: 1000px;
height: 600px;
background-color: darksalmon;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: indianred;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
两列布局
不是简单将两个元素水平排列，而是一列是定宽的，另一列是自适应的
- 其中一列是定宽：将该元素的宽度设置为固定的
- 其中一列自适应：除了定宽以外所有的宽度都为第二列
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种两列布局</title>
<style>
.parent{
width: 800px;
height: 300px;
border:1px solid indigo;
}
/*其中一列是定宽*/
.left{
width: 200px;
height: 300px;
background-color: khaki;
float: left;
}
/*其中一列是自适应*/
.right{
/*当前元素的默认宽度为父级元素宽度的100%*/
height: 300px;
background-color: lemonchiffon;
/*耦合度高：margin-left属性的值与另一列的width属性的值有关*/
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种两列布局的参考版</title>
<style>
.parent{
width: 800px;
height: 300px;
border:1px solid indigo;
}
/*其中一列是定宽*/
.left{
width: 200px;
height: 300px;
background-color: khaki;
float: left;
position: relative;
}
/*作为右列的容器进行设置*/
.leftl{
/*把width属性值设置为100%时，表示为父级元素宽度的100%*/
width: 100%;
float: right;
margin-left: -200%;
}
/*其中一列是自适应*/
.right{
height: 300px;
background-color: lemonchiffon;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<!--增加一层容器-->
<div class="leftl">
<div class="right"></div>
</div>
</div>
</body>
</html>
例2参考版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种两列布局</title>
<style>
.parent{
width: 800px;
height: 300px;
border:1px solid indigo;
}
/*其中一列是定宽*/
.left{
width: 200px;
height: 300px;
background-color: khaki;
float: left;
}
/*其中一列是自适应*/
.right{
/*当前元素的默认宽度为父级元素宽度的100%*/
height: 300px;
background-color: lemonchiffon;
/*开启BFC：创造出完全隔离的空间*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第三种两列布局</title>
<style>
.parent{
width: 800px;
height: 300px;
border:1px solid indigo;
display: table;
table-layout: fixed;
}
.left,
.right{
display: table-cell;
}
/*其中一列是定宽*/
.left{
width: 200px;
height: 300px;
background-color: khaki;
}
/*其中一列是自适应*/
.right{
height: 300px;
background-color: lemonchiffon;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
三列布局
其中两列定宽，一列自适应
划分为：
- 定宽+定宽+自适应：两列定宽的列相邻
- 定宽+自适应+定宽：两个定宽的列不是相邻的（自适应在中间）
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局的第一种情况</title>
<style>
.parent{
width: 800px;
height: 300px;
border:1px solid indigo;
display: table;
table-layout: fixed;
}
.left,
.center,
.right{
display: table-cell;
}
.left,
.center{
width: 200px;
height: 300px;
}
.left{
background-color: aqua;
}
.center{
background-color: blueviolet;
}
.right{
height: 300px;
background-color: rgb(173, 172, 158);
}
</style>
</head>
<body>
<!--定宽+定宽+自适应-->
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三列布局的第二种情况</title>
<style>
.parent{
width: 800px;
height: 300px;
border:1px solid indigo;
}
.left,
.center,
.right{
height: 300px;
}
.left,
.right{
margin-top: -300px;
}
.left{
background-color: aqua;
width: 200px;
float: left;
}
.center{
/*问题：默认宽度为父级元素的宽度100%*/
background-color: blueviolet;
margin: 0 300px 0 200px;
}
.right{
background-color: rgb(173, 172, 158);
width: 300px;
float: right;
}
</style>
</head>
<body>
<!--这种三列布局：自适应这一列为HTML页面的主要内容-->
<div class="parent">
<!--自适应：一般希望搜索引擎抓取主要内容 -->
<div class="center"></div>
<!--定宽-->
<div class="left"></div>
<!--定宽-->
<div class="right"></div>
</div>
</body>
</html>
等分布局
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现等分布局第一种</title>
<style>
.parent{
width: 800px;
height: 300px;
border: 1px solid plum;
}
.col{
/*百分比实现等分效果：列数可能没有办法被100%整除*/
width: 25%;
height: 300px;
float: left;
}
.col:nth-of-type(1){
background-color: powderblue;
}
.col:nth-of-type(2){
background-color: purple;
}
.col:nth-of-type(3){
background-color: red;
}
.col:nth-of-type(4){
background-color: saddlebrown;
}
</style>
</head>
<body>
<div class="parent">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现等分布局第二种</title>
<style>
.parent{
width: 800px;
height: 300px;
border: 1px solid plum;
display: table;
table-layout: fixed;
}
.col{
/*利用表格的单元格宽度自动分配：
*每一列的内容结构保持一致
*/
display: table-cell;
height: 300px;
}
.col:nth-of-type(1){
background-color: powderblue;
}
.col:nth-of-type(2){
background-color: purple;
}
.col:nth-of-type(3){
background-color: red;
}
.col:nth-of-type(4){
background-color: saddlebrown;
}
</style>
</head>
<body>
<div class="parent">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</body>
</html>
空白间隙
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种空白间隙的等分布局</title>
<style>
.parent{
width: 800px;
height: 300px;
border: 1px solid plum;
display: table;
table-layout: fixed;
border-spacing: 10px;
}
.col{
/*利用表格的单元格宽度自动分配：
*每一列的内容结构保持一致
*/
display: table-cell;
height: 300px;
}
.col:nth-of-type(1){
background-color: powderblue;
}
.col:nth-of-type(2){
background-color: purple;
}
.col:nth-of-type(3){
background-color: red;
}
.col:nth-of-type(4){
background-color: saddlebrown;
}
</style>
</head>
<body>
<div class="parent">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种空白间隙的等分布局</title>
<style>
.parent{
width: 800px;
height: 300px;
border: 1px solid plum;
overflow: hidden;
}
.parent-fix{
overflow: hidden;
margin: 0 -5px 0 -5px;
}
.col{
width: 25%;
float: left;
box-sizing: border-box;
/*保证内容是水平方向居中的*/
padding: 0 5px;
}
.child{
height: 300px;
}
.col:nth-of-type(1) .child{
background-color: powderblue;
}
.col:nth-of-type(2) .child{
background-color: purple;
}
.col:nth-of-type(3) .child{
background-color: red;
}
.col:nth-of-type(4) .child{
background-color: saddlebrown;
}
</style>
</head>
<body>
<div class="parent">
<div class="parent-fix">
<div class="col">
<div class="child"></div>
</div>
<div class="col">
<div class="child"></div>
</div>
<div class="col">
<div class="child"></div>
</div>
<div class="col">
<div class="child"></div>
</div>
</div>
</div>
</body>
</html>
等高布局
例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种实现等高布局</title>
<style>
.parent{
width: 800px;
height: 300px;
border: 1px solid black;
display: table;
table-layout: fixed;
}
.left,
.right{
display: table-cell;
}
.left{
width: 200px;
background-color: blue;
}
.right{
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第二种实现等高布局(伪等高)</title>
<style>
.parent{
width: 800px;
height: 300px;
border: 1px solid black;
overflow: hidden;
}
.left,
.right{
padding-bottom: 999px;
margin-bottom: -999px;
}
.left{
width: 200px;
float: left;
background-color: blue;
}
.right{
overflow: hidden;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nisi obcaecati quas qui esse ratione soluta quidem enim autem, ad fugiat libero quod dolore! Ex voluptatum non quaerat culpa. Consequuntur, nobis?</div>
<div class="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis voluptatum rem aliquam perspiciatis natus ratione nostrum laboriosam architecto autem dolor, consectetur numquam atque quas ab? Cum dignissimos quaerat delectus itaque!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt nam ullam voluptas molestiae ex provident tempore velit repudiandae? Quisquam, quae? Alias voluptate impedit quidem quisquam est, eveniet iure quia. Enim.
</div>
</div>
</body>
</html>
全屏布局
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种全屏布局</title>
<style>
body{
padding: 0;
margin: 0;
overflow: hidden;
}
.header,
.center,
.footer{
width: 100%;
position: fixed;
}
.header{
/*当前元素的默认宽度就是父级元素的宽度100%*/
height: 50px;
top: 0;
background-color: rgb(217, 184, 248);
}
.center{
height: 100%;
top:50px;
}
.left{
width: 200px;
height: 100%;
float: left;
background-color: cadetblue;
}
.right{
overflow:auto ;
height: 100%;
background-color: rgb(71, 108, 109);
}
.child{
height: 1000px;
width: 100%;
}
.footer{
height: 100px;
bottom: 0;
background-color: rgb(201, 145, 145);
}
</style>
</head>
<body>
<!--顶部导航-->
<div class="header"></div>
<!--中间内容区-->
<div class="center">
<div class="left"></div>
<div class="right">
<div class="child">
</div>
</div>
</div>
<!--底部信息-->
<div class="footer"></div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种全屏布局</title>
<style>
html,body{
height: 100%;
}
body{
padding: 0;
margin: 0;
overflow: hidden;
}
.left{
width: 200px;
height: 100%;
position: fixed;
left: 0;
z-index: 2;
background-color: aqua;
}
/*作为右列的水平和垂直方向都是自适应的*/
.right{
height: 100%;
overflow: hidden;
}
.header{
height: 20%;
overflow: hidden;
background-color: blueviolet;
}
.center{
height: 60%;
overflow: hidden;
background-color: rgb(48, 94, 78);
}
.footer{
height: 20%;
overflow: hidden;
background-color: brown;
}
</style>
</head>
<body>
<!--定宽-->
<div class="left"></div>
<!--自适应-->
<div class="right">
<div class="header"></div>
<div class="center"></div>
<div class="footer"></div>
</div>
</body>
</html>
表单
为什么说表单在HTML中很重要的原因：
- 表单是允许接收用户输入的信息，其他元素仅是用来向用户展示信息
- 在HTML元素中，可以与服务端进行通信的只有表单
由表单完成的部分：
- 网站的用户注册和登录功能
- 搜索功能中的搜索框
- 写博客的发布功能
form元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form元素</title>
</head>
<body>
<!--
<form>元素：代表表单（块级元素）
*作用：
*用来接收用户输入的信息
*与服务端进行通信（向服务端提交信息）
*属性：
*action属性：设置提交表单的服务端地址
*method属性：设置提交表单时的请求类型
*GET
*POST
*enctype属性：设置表单提交时的MIME类型
*主要可实现文件上传
*表单可以划分两个组成部分：
*<form>元素：表单的容器元素
*表单组件元素：才是真正用来接收用户输入的信息
*<input>元素：输入框
*<textarea>元素：文本域
*<select>元素：下拉列表
-->
<form action="#"></form>
</body>
</html>
input元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input元素</title>
</head>
<body>
<form action="#">
<!--
<input>元素：空元素
*属性：
*type属性：设置输入框的类型
*value属性：设置输入框的默认值
*disabled属性：设置输入框是否可用(只设置属性名)
*readonly属性：设置输入框是否为只读
HTML5新增属性
*autofocus属性：设置输入框自动获取焦点
*placeholder属性：设置输入框的默认提示内容
*用来替代value属性为用户展示提示信息
*输入框类型：
*text：（单行）文本框
*password：密码框（显示与隐藏动态切换功能）
*radio：单选框
*checkbox：复选框
*button：按钮
*submit：提交按钮
*reset：重置按钮
*file：文件域
*hidden：隐藏域
HTML5新增：
*email：电子邮件
*url：URL地址
*search：搜索框
*tel：电话框
*date：日期控件
*week：星期控件
*month：月控件
*color：颜色控件
*number：数字控件
-->
<input type="text" value="please input your name:" autofocus>
<input type="text" placeholder="please input your name:" autofocus>
<input type="password">
<br>
<!--
单选框或复选框：定义相同的name属性值，表示为一组
*checked属性：表示当前单选框或复选框被选中
-->
<input type="radio" name="li" checked>html
<input type="radio" name="li">html1
<input type="radio" name="li">css
<br>
<input type="checkbox" name="li">html
<input type="checkbox" name="li" checked>html1
<input type="checkbox" name="li">css
<br>
<!--
<input>元素：实现的按钮
*button：普通按钮
*submit：提交按钮（提交表单）
*reset：重置按钮
<button>元素：按钮
<input type="button">与<button>的区别：
*<input type="button">
*一般情况下，配合<form>元素使用
*<button>
*与<form>元素没有关系
-->
<input type="button" value="哔哩哔哩">
<button>按钮</button>
<input type="submit" value="提交">
<input type="reset" value="重置">
<br>
<!--
文件域：一般用来实现文件上传或选择头像等功能
*数量设置
*单文件选择：默认情况
*多文件选择：设置multiple
*类型设置：规定选择文件的类型
*默认：可以选择任何类型
*accept属性：设置选择文件的类型
-->
<input type="file" multiple accept="video/*">
<br>
<!--一般用来存储一些不想用户知道的数据内容，例：用户ID-->
<input type="hidden">
<br>
<!--提供了email地址格式的验证-->
<input type="email">
<br>
<!--提供了URL地址格式的样式（验证不完整）-->
<input type="url">
<br>
<!--搜索框：移动端显示(右下角显示"搜索")-->
<input type="search">
<br>
<!--电话框：移动端显示（软键盘显示数字）-->
<input type="tel">
<br>
<input type="date">
<input type="month">
<input type="week">
<br>
<input type="color">
<input type="number">
</form>
</body>
</html>
label元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label元素</title>
</head>
<body>
<form action="#">
<!--
<label>元素：一般配合<input>元素
*作用：为某个文本框通过文本提示内容
*属性：
*for属性：设置的值与<input>元素的id属性值一致
-->
<label for="uesername">用户名：</label>
<input type="text" id="uesername" placeholder="please input your name:">
<label for="password">密码：</label>
<input type="password" id="password">
</form>
</body>
</html>
输入框的样式
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框的样式</title>
<style>
input{
/*用来设置输入框的获取焦点时的外边框的样式*/
outline: none;
/*用来设置输入框的边框*/
border: none;
border-bottom: .5px solid skyblue;
}
</style>
</head>
<body>
<form action="#">
<label for="uesername">用户名：</label>
<input type="text" id="uesername" placeholder="please input your name:">
<label for="password">密码：</label>
<input type="password" id="password">
</form>
</body>
</html>
textarea元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>textarea元素</title>
<style>
textarea{
outline: none;
/*禁止用户改变多行文本域的显示区域*/
resize: none;
}
</style>
</head>
<body>
<form action="#">
<!--
<textarea>元素：多行文本框
*属性：
*cols：设置文本域的可视宽度，必须是正数，默认值为20
*rows：设置文本域的可视高度，必须是正数，默认值为10
*特点：允许用户调整在HTML页面中显示区域
-->
<textarea cols="30" rows="10"></textarea>
</form>
</body>
</html>
select元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select元素</title>
</head>
<body>
<form action="#">
<!--
*<select>元素：下拉列表
*默认情况下，下拉单选
*下拉多选
*multiple属性：表示多选
*size属性：设置显示几个选项
*<option>元素：列表项目
*属性：
*selected：设置当前项目被选中
*分组：将<option>元素放在<optgroup>元素中
-->
<select>
<option value="kk">one</option>
<option value="ll">two</option>
<option value="cc">three</option>
</select>
<select multiple size="3">
<option value="kk">one</option>
<option value="ll">two</option>
<option value="cc">three</option>
</select>
<select>
<optgroup>
<option value="ml">scxs</option>
<option value="ss">cxsx</option>
<option value="xsc">csws</option>
</optgroup>
<optgroup>
<option value="kk">one</option>
<option value="ll">two</option>
<option value="cc">three</option>
</optgroup>
</select>
</form>
</body>
</html>
组合表单元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组合表单元素</title>
</head>
<body>
<form action="#">
<!--将表单组件元素进行分组-->
<fieldset>
<!--为每个分组设置一个标题-->
<legend>哈哈哈</legend>
<!--表单组件元素-->
<label for="uesername">用户名：</label>
<input type="text" id="uesername" placeholder="please input your name:">
<label for="password">密码：</label>
<input type="password" id="password">
</fieldset>
</form>
</body>
</html>
datalist元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>datalist元素</title>
</head>
<body>
<form action="#">
<!--
<input>元素与<datalist>元素配合使用
*<input>元素设置list属性：值与<datalist>元素的id属性值一致
*<datalist>元素设置id属性
-->
<input list="cities">
<input list="cities">
<!--
<datalist>元素：
*作用：提供了一组列表项
与<select>元素的区别：
*<select>元素：必须在该元素内部定义<option>元素
*<datalist>元素：是一个独立的列表项
*允许复用的
-->
<datalist id="cities">
<option value="kk">one</option>
<option value="ll">two</option>
<option value="cc">three</option>
</datalist>
</form>
</body>
</html>
meter和progress元素
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>meter和progress元素</title>
</head>
<body>
<form action="#">
<!--
<meter>元素：刻度条
*属性：
*value：表示当前刻度的值（介于min和max之间的值）
*min：设置刻度最小边界
*max：设置刻度的最大边界
*low：设置刻度的最小预警值
*high：设置刻度的最大预警值
-->
<meter value="50" min="0" max="100" low="20" high="80"></meter>
<!--
<progress>元素：进度条
*属性：
*value：表示当前进度的值
*max：设置进度的最大值
-->
<progress max="100" value="70"></progress>
</form>
</body>
</html>
元素状态伪类选择器
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素状态伪类选择器</title>
<style>
/* :disabled伪类表示选中不可用的元素*/
input:disabled{
background-color: aqua;
}
/* :enabled伪类表示选中可用的元素*/
input:enabled{
background-color: aquamarine;
}
/* :checked伪类表示选中被选中的单选框或复选框*/
input:checked{
box-shadow: 0 0 0 3px burlywood;
}
</style>
</head>
<body>
<form action="#">
<input type="text" placeholder="please input your name:" disabled>
<input type="text" placeholder="please input your id:">
<input type="radio" name="kk" checked>html
<input type="radio" name="kk">css
<input type="radio" name="kk">javascript
</form>
</body>
</html>
表单验证
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单验证</title>
</head>
<body>
<form action="#">
<!--
HTML5新增有关表单验证的内容：
*通过一系列可用于验证的元素或类型，比如<input type="email/url">
*通过一系列用于验证的属性：
*required属性：验证是否为空
*pattern属性：验证与指定正则表达式是否一致
*min属性：验证是否小于最小值
*max属性：验证是否大于最大值
*step属性：验证是否符合步长
*minlength属性：验证内容长度是否小于最小长度
*maxlength属性：验证并限制内容长度是否大于最大长度
注意：
* 验证是在提交表单时进行验证
* 验证属性一般情况下要与DOM（visiblity对象）配合使用
-->
<input type="text" placeholder="please input your name:" required>
<input type="text" placeholder="please input your id:" pattern="^ [a-zA-Z0-6]-{6,12}$">
<input type="password" minlength="4" maxlength="8">
<input type="number" min="2" max="10" step="2">
<input type="submit" value="提交">
</form>
</body>
</html>