课程名称: 一课全面掌握主流CSS布局
课程章节: 课程全集
主讲老师: KingJ
今天学习的内容包括:
如何实现主流的CSS布局
问题:在全屏布局中, 不同分辨率该如何处理
回答:
1.可以设置百分比宽度。
2.根据媒体查询 设置不同分辨率下 输入框的固定宽度
如下:
@media screen and (max-width: 1920){ input.xxx{width: 200px} }@media screen and (max-width: 1780){ input.xxx{width: 180px} }
使元素脱离文档流的三种方法:
让元素浮动float:left/right;
给元素添加绝对定位属性position:absolute;
给元素添加固定定位属性position:fixed;
这三种方法使元素脱离了文档流,会导致margin属性的值无效
两列、三列布局
position : absolute属性 的两种情况
当父级元素没有开启定位的话,则子级元素是相对于页面的绝对定位。
当父级元素开启了定位的话,则是相对于父级元素的。
当把当前元素设置为绝对定位之后:
如果父级元素没有开启定位:当前元素是相对于页面定位的。
如果父级元素开启了定位:当前元素是相对于父级元素定位。
怎么给父级元素开启定位?
实现不定宽块状元素水平居中的方法:
通过给父元素设置float:left然后父元素设置position:relative;left:50%,子元素设置position:relative;left:-50%来实现水平居中。
把元素放在表格单元里,给元素外面套一层<table>...</table>
,利用表格不定义宽度时不自动设置成body元素宽度,而是由内容撑开的特性,给table标签设置margin:0 auto;实现水平居中。
margin属性设置:
一个值 : 表示上右下左的外边距相同
两个值 : 第一个表示上下外边距 第二个表示左右外边距
三个值 : 第一个表示上边距 第二个表示左右外边距 第三个表示下外边距
四个值 : 分别表示上右下左的边距
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
Transform:translateX(x)(向X轴便宜量,可以是px,也可以是%)
/01-01 水平居中布局的第一种解决方案.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>水平居中布局的第一种解决方案</title> <style> #parent { width: 100%; height: 200px; background: #ccc; /* text-align属性:是为文本内容设置对齐方式 * left:左对齐 * center:居中对齐 * right:右对齐 */ text-align: center; } #child { width: 200px; height: 200px; background: #c9394a; /* display属性: * block:块级元素 * inline:内联元素(text-align属性有效) * width和height属性是无效的 * inline-block:行内块级元素(块级+内联) * width和height属性是有效的 */ display: inline-block; text-align: left; } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> <!-- 定义子级元素 --> <div id="child">居中布局</div> </div> </body> </html>
/01-02 水平居中布局的第二种解决方案.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>水平居中布局的第一种解决方案</title> <style> #parent { width: 100%; height: 200px; background: #ccc; } #child { width: 200px; height: 200px; background: #c9394a; /* display的值为table和block */ display: table; /* margin属性:外边距 * 一个值 - 上右下左 * 二个值 - 第一个表示上下,第二个表示左右 * auto - 表示根据浏览器自动分配 * 三个值 - 第一个表示上,第二个表示左右,第三个表示下 * 四个值 - 上右下左 */ margin: 0 auto; position: absolute; } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> <!-- 定义子级元素 --> <div id="child">居中布局</div> </div> </body> </html>
/01-03 水平居中布局的第三种解决方案.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>水平居中布局的第三种解决方案</title> <style> #parent { width: 100%; height: 200px; background: #ccc; /* 开启定位 */ position: relative; } #child { width: 300px; height: 200px; background: #c9394a; /* 当把当前元素设置为绝对定位之后: * 如果父级元素没有开启定位的话,当前元素是相对于页面定位的 * 如果父级元素开启了定位的话,当前元素是相对于父级元素定位的 */ position: absolute; left: 50%; transform: translateX(-50%); } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> <!-- 定义子级元素 --> <div id="child"></div> </div> </body> </html>
/02-01 垂直居中布局的第一种解决方案.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>垂直居中布局的第一种解决方案</title> <style> #parent { width: 200px; height: 600px; background: #ccc; /* display属性: * table:设置当前元素为<table>元素 * table-cell:设置当前元素为<td>元素(单元格) */ display: table-cell; /* vertical-align属性:用于设置文本内容的垂直方向对齐方式 * top:顶部对齐 * middle:居中对齐 * bottom:底部对齐 */ vertical-align: middle; } #child { width: 200px; height: 200px; background: #c9394a; } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> 居中布局 <!-- 定义子级元素 --> <div id="child"></div> </div> </body> </html>
/02-02 垂直居中布局的第二种解决方案.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>垂直居中布局的第二种解决方案</title> <style> #parent { width: 200px; height: 600px; background: #ccc; position: relative; } #child { width: 200px; height: 200px; background: #c9394a; position: absolute; top: 50%; transform: translateY(-50%) } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> <!-- 定义子级元素 --> <div id="child"></div> </div> </body> </html>
/03-01 居中布局的第一种解决方案.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>居中布局的第一种解决方案</title> <style> #parent { width: 1000px; height: 600px; background: #ccc; /* <td> */ display: table-cell; vertical-align: middle; } #child { width: 200px; height: 200px; background: #c9394a; /* <table> */ display: block; margin: 0 auto; } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> <!-- 定义子级元素 --> <div id="child"></div> </div> </body> </html>
/03-02 居中布局的第二种解决方案.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>居中布局的第二种解决方案</title> <style> #parent { width: 1000px; height: 600px; background: #ccc; position: relative; } #child { width: 200px; height: 200px; background: #c9394a; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <!-- 定义父级元素 --> <div id="parent"> <!-- 定义子级元素 --> <div id="child"></div> </div> </body> </html>
/04-01 两列布局的第一种解决方案.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>两列布局的第一种解决方案</title> <style> #left, #right { height: 300px; } #left { /* 定宽 */ width: 400px; background-color: #c9394a; /* 当前元素脱离文档流 */ float: left; } #right { background-color: #cccccc; margin-left: 400px; } #inner { height: 300px; background-color: green; clear: both; } </style> </head> <body> <div id="left"></div> <div id="right"> <div id="inner"></div> </div> </body> </html>
/04-02 两列布局的第一种解决方案优化版.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>两列布局的第一种解决方案优化版</title> <style> #left, #right { height: 300px; } #left { /* 定宽 */ width: 400px; background-color: #c9394a; /* 当前元素脱离文档流 */ float: left; /* 设置显示层级更高 */ position: relative; } /* 自适应 */ #right-fix { /* 设置为浮动,导致默认宽度值为 0 */ float: right; width: 100%; margin-left: -400px; background-color: hotpink; } #right { background-color: #cccccc; } #inner { background-color: green; height: 300px; clear: both; } </style> </head> <body> <div id="left"></div> <!-- 为自适应元素定位父级元素 --> <div id="right-fix"> <div id="right"> <div id="inner"></div> </div> </div> </body> </html>
/04-03 两列布局的第二种解决方案.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>两列布局的第二种解决方案</title> <style> #left, #right { height: 300px; } #left { /* 定宽 */ width: 400px; background-color: #c9394a; float: left; } #right { background-color: #cccccc; /* 开启BFC模式 - 当前元素的内部环境与外界完全隔离 */ overflow: hidden; } </style> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>
/04-04 两列布局的第三种解决方案.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>两列布局的第三种解决方案</title> <style> #parent { /* 表格的单元格的宽度会自动分配 */ display: table; table-layout: fixed; width: 100%; } #left, #right { height: 300px; display: table-cell; } #left { /* 定宽 */ width: 400px; background-color: #c9394a; } #right { background-color: #cccccc; } </style> </head> <body> <div id="parent"> <div id="left"></div> <div id="right"></div> </div> </body> </html>
/05-01 三列布局的第一种解决方案.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>三列布局的第一种解决方案</title> <style> #left, #center, #right { height: 300px; } #left { /* 定宽 */ width: 400px; background-color: #c9394a; float: left; } #center { width: 400px; background-color: green; float: left; } #right { background-color: #cccccc; margin-left: 800px; } </style> </head> <body> <div id="left"></div> <div id="center"></div> <div id="right"></div> </body> </html>
/06-01 三列布局补充一.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>三列布局补充一</title> <style> #left, #center, #right { height: 300px; } #left, #right { width: 300px; } #left { background-color: #c9394a; float: left; } #center { background-color: green; margin-left: 300px; margin-right: 300px; } #right { background-color: #cccccc; float: right; } </style> </head> <body> <div id="left"></div> <div id="right"></div> <div id="center"></div> </body> </html>
/06-02 圣杯布局.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>圣杯布局</title> <style> #parent { height: 300px; /* 对应的是left元素的宽度 */ margin-left: 300px; /* 对应的是right元素的宽度 */ margin-right: 300px; } #left, #center, #right { height: 300px; float: left; } #left, #right { width: 300px; } #left { background-color: #c9394a; /* 将当前元素从当前行,移动上一行同一个位置 */ margin-left: -100%; position: relative; /* 将当前元素移动到理想位置 */ left: -300px; } #center { /* 为父级元素宽度的100% */ width: 100%; background-color: green; } #right { background-color: #cccccc; margin-left: -300px; position: relative; right: -300px; } </style> </head> <body> <div id="parent"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> </body> </html>
/07-01 双飞翼布局.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>双飞翼布局</title> <style> #parent { height: 300px; } #left, #center, #right { height: 300px; float: left; } #left, #right { width: 300px; } #left { background-color: #c9394a; /* 将当前元素从当前行,移动上一行同一个位置 */ margin-left: -100%; } #center { /* 为父级元素宽度的100% */ width: 100%; background-color: green; } #right { background-color: #cccccc; margin-left: -300px; } #inner { height: 300px; background-color: hotpink; /* 对应的是left元素的宽度 */ margin-left: 300px; /* 对应的是right元素的宽度 */ margin-right: 300px; } </style> </head> <body> <div id="parent"> <div id="center"> <div id="inner"></div> </div> <div id="left"></div> <div id="right"></div> </div> </body> </html>
/08-01 等分布局的第一种解决方案.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>等分布局的第一种解决方法</title> <style> .col1, .col2, .col3, .col4 { height: 300px; width: 25%; float: left; } .col1 { background-color: hotpink; } .col2 { background-color: lightblue; } .col3 { background-color: green; } .col4 { background-color: yellow; } </style> </head> <body> <!-- 作为父级容器 --> <div id="parent"> <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> </div> </body> </html>
/08-02 等分布局的第二种解决方案.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>等分布局的第二种解决方法</title> <style> #parent { width: 100%; /* <table> */ display: table; } .col1, .col2, .col3, .col4 { height: 300px; /* <td> */ display: table-cell; } .col1 { background-color: hotpink; } .col2 { background-color: lightblue; } .col3 { background-color: green; } .col4 { background-color: yellow; } </style> </head> <body> <!-- 作为父级容器 --> <div id="parent"> <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> </div> </body> </html>
/08-03 等分布局的第一种解决方案修改版.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>等分布局的第一种解决方法</title> <style> .parent-fix { overflow: hidden; } #parent { height: 300px; margin-left: -10px; } .col1, .col2, .col3, .col4 { height: 300px; width: 25%; float: left; box-sizing: border-box; padding-left: 10px; } .inner { height: 300px; } .col1 .inner { background-color: hotpink; } .col2 .inner { background-color: lightblue; } .col3 .inner { background-color: green; } .col4 .inner { background-color: yellow; } </style> </head> <body> <div class="parent-fix"> <!-- 作为父级容器 --> <div id="parent"> <div class="col1"> <div class="inner"></div> </div> <div class="col2"> <div class="inner"></div> </div> <div class="col3"> <div class="inner"></div> </div> <div class="col4"> <div class="inner"></div> </div> </div> </div> </body> </html>
/08-04 等分布局的第二种解决方案修改版.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>等分布局的第二种解决方法</title> <style> #parent-fix { overflow: hidden; } #parent { width: 1434px; /* <table> */ display: table; margin-left: -10px; } .col1, .col2, .col3, .col4 { height: 300px; display: table-cell; box-sizing: border-box; padding-left: 10px; } .inner { height: 300px; } .col1 .inner { background-color: hotpink; } .col2 .inner { background-color: lightblue; } .col3 .inner { background-color: green; } .col4 .inner { background-color: yellow; } </style> </head> <body> <div id="parent-fix"> <!-- 作为父级容器 --> <div id="parent"> <div class="col1"> <div class="inner"></div> </div> <div class="col2"> <div class="inner"></div> </div> <div class="col3"> <div class="inner"></div> </div> <div class="col4"> <div class="inner"></div> </div> </div> </div> </body> </html>
/09-01 等高布局的第一种解决方案.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>等高布局的第一种解决方案</title> <style> #parent { display: table; } #left, #right { width: 300px; /* 表格的单元格默认是等高的 */ display: table-cell; } #left { background-color: #c9394a; } #right { background-color: #cccccc; } </style> </head> <body> <div id="parent"> <div id="left">imooc</div> <div id="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit amet eaque assumenda neque repudiandae ad ratione nulla quae quod soluta, debitis tempore aliquid recusandae cupiditate, in maiores distinctio obcaecati a?</div> </div> </body> </html>
/09-02 等高布局的第二种解决方案.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>等高布局的第二种解决方案</title> <style> #parent { overflow: hidden; } #left, #right { width: 300px; float: left; padding-bottom: 9999px; margin-bottom: -9999px; } #left { background-color: #c9394a; } #right { background-color: #cccccc; } </style> </head> <body> <div id="parent"> <div id="left">imooc</div> <div id="right">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit amet eaque assumenda neque repudiandae ad ratione nulla quae quod soluta, debitis tempore aliquid recusandae cupiditate, in maiores distinctio obcaecati a?</div> </div> </body> </html>
/10-01 CSS3的多列布局.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>CSS3的多列布局</title> <style> #parent, #parent2, #parent3 { /* column-count: 4; column-width: 300px; */ columns: 4 300px; column-gap: 20px; /* column-rule-width: 5px; column-rule-color: tomato; column-rule-style: double; */ column-rule: 5px tomato double; } .col1, .col2, .col3, .col4, .col5 { height: 300px; } .col1, .col6 { background-color: hotpink; } .col2, .col7 { background-color: lightblue; } .col3.col8 { background-color: green; } .col4, .col9 { background-color: yellow; } .col5 { background-color: tomato; column-span: all; } .col6, .col7, .col8, .col9 { column-fill: balance; } </style> </head> <body> <!-- 作为父级容器 --> <div id="parent"> <div class="col1"></div> <div class="col2"></div> <div class="col3"></div> <div class="col4"></div> </div> <div id="parent2"> <div class="col5"></div> </div> <div id="parent3"> <div class="col6">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum possimus aliquid nostrum provident est esse necessitatibus mollitia error, tempore voluptate nobis odio alias, ab animi reprehenderit repellat perferendis voluptas rerum!</div> <div class="col7">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, quibusdam vel! Provident consequatur voluptates quibusdam consectetur architecto! Ut eaque aspernatur quibusdam incidunt nobis ipsam quidem, quod ullam, velit officia necessitatibus! </div> <div class="col8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dicta officia porro error suscipit. Nostrum, deleniti laborum. Sed odit, nemo, ducimus dolores rem reprehenderit soluta ipsam nesciunt id unde accusamus.</div> <div class="col9">imooc</div> </div> </body> </html>
/11-01 全屏布局.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>全屏布局</title> <style> html, body { margin: 0; overflow: hidden; } header { height: 100px; position: fixed; top: 0; left: 0; right: 0; background-color: lightgray; } .content { position: fixed; left: 0; right: 0; top: 100px; bottom: 100px; overflow: auto; background-color: lightblue; } .content .left { width: 300px; height: 100%; position: fixed; left: 0; top: 100px; bottom: 100px; background-color: lightcoral; } .content .right { height: 1000px; margin-left: 300px; background-color: greenyellow; } footer { height: 100px; position: fixed; bottom: 0; left: 0; right: 0; background-color: lightslategray; } </style> </head> <body> <header></header> <div class="content"> <div class="left"></div> <div class="right"></div> </div> <footer></footer> </body> </html>