CSS - 布局
-
盒子模型
padding:内边距,顺时针,会导致盒子的宽高增加,主要用于父子盒子 重要
border:style,width,color
border-width:thin,medium,thick,像素值
border-style:none,dotted,dashed,soild,double
border-radius:10px,圆角
outline:外边框
margin:长度上下合并,左右叠加(body相对于html有一个默认的margin),主要用于兄弟盒子
1、当父盒子没有设置border时,子元素设置margin-top会导致父盒子下沉。 2、设置盒子的padding,需要减小宽高以保持盒子的整体尺寸不变
注意:常用Html标签具有默认的内外边距,开发之前会统一清除
-
浮动
-
行内元素:在一行上,span,a,img,input等,水平排列,没有宽高,和内容等宽
-
块级元素:相当于图层,div,h1,p,ul,li,table等.独占一行,可设置宽高,和页面等宽
* 块级元素和行级元素的转变:display属性,block;inline;none
-
float属性:left;right;none,float布局会使页面高度塌陷,解决办法:给浮动元素的父级元素添加overflow:hidden扩展盒子高度
-
浮动元素脱离标准文档流,使父容器失去高度,影响了后续元素
* 浮动元素的位置空出来,由非浮动元素占据 * 浮动元素不论是块级还是行级元素,都可以水平排列,同时设置宽度和高度
-
浮动元素具有相互贴靠特点
-
浮动元素具有文字围绕特点,浮动元素的空间被后续非浮动元素占据,但是非浮动元素中的内容(文字、块元素和行级元素)被排除在该区域外
-
浮动元素不设置宽度时具有收缩特点
-
父级元素的宽度是所有浮动子元素的宽度之和
-
-
清除浮动:在收浮动影响的元素中添加clear:both(两边清空)
-
-
标准文档流
特点:空白折叠,底部对齐,自动换行
脱离标准文档流的主要技术手段是浮动和绝对定位
-
定位
默认值,没有定位,以标准流方式显示:static
相对定位:relative
1. 相对定位坐标原点是自身;原来在文档流中的位置
2. 如果设置了position:relative,但是没有设置top/left则元素不动
3. 可以使用margin:auto实现居中显示
4. 相对定位不会脱离文档流
5. 和绝对定位配合,作为定位基准点,微调位置绝对定位:absolute
-
绝对定位坐标原点是非static父元素的左上角
-
距离最近的具备定位特性的祖先元素
-
祖先元素都没有定位时,以页面和浏览器窗口为基准
-
-
如果设置了position:absolute,但是没有设置top/left则元素不动
-
不可以使用margin:auto实现居中显示
-
绝对定位会脱离文档流(和float一样)
固定定位:fixed
-
固定定位的参考点永远是浏览器窗口
-
脱离文档流
-
z-index:设置高度,放在顶层
-
不会随着滚动条移动,可以用于遮盖\提示款和返回顶部的指示器
在父容器中控制子元素的位置 display:flex
当容器宽度不足时是否换行 flex-wrap:warp
flex布局不会高度塌陷
水平对齐方式:justify-content
垂直对齐方式:align-items
最小高度:min-height(可自动改变)
-
-
DIV+CSS布局技术
-
表格布局
结构自适应
维护不便,性能差,不支持搜索引擎,建议使用div+css
-
单列布局-水平对齐
-
子元素是行级元素时使用text-align对齐
父元素text-align:center,子元素display:inline-block
.container{ width: 500px; height: 200px; text-align: center; border: solid 1px grey; position: relative; } .container .div01{ display: inline-block; border: solid 1px grey; }
-
非定位时子元素水平对齐方式
- 设置display+text-align
- 设置margin+width
.container .div02{ margin: auto; width: 30px; border: solid 1px grey; }
-
绝对定位时子元素水平对齐方式
- 设置left+margin-left
.container .div03{ position: absolute; left: 50%; margin-left: -15px; width: 30px; border: solid 1px grey; }
-
-
单列布局-垂直对齐
- 行级元素垂直对齐使用line-height
.container-vertical{ width: 500px; height: 200px; border: solid 1px grey; position: relative; } .container-vertical .span04{ width: 20px; height: 20px; line-height: 200px; border: solid 1px grey; }
- 非绝对定位的居中对齐
- 设置display+vertical-align
.container-vertical{ width: 500px; height: 200px; border: solid 1px grey; vertical-align: middle; display: table-cell; } .container-vertical .div05{ width: 30px; height: 20px; border: solid 1px grey; }
- 绝对定位的居中对齐
- 使用top+margin-top
.container-vertical{ width: 500px; height: 200px; position: relative; border: solid 1px grey; } .container-vertical .div06{ width: 30px; height: 20px; position: absolute; top:50%; margin-top: -15px; border: solid 1px grey; }
-
多列布局类型
-
左定宽右自适应
- 左侧定宽浮动,右侧margin-left
- 左侧定宽浮动,右侧overflow
- 全部浮动,右侧宽度100%,并设置负margin-right(右侧的标签要写在前面)
-
左自适应右定宽
-
(非负数margin):
1、块元素水平排列需要用到浮动,自适应块不能定义width,所以不能使用浮动,必须借助于外边距实现“让位”,或者overflow(不兼容性IE6)。
2、浮动元素的标签要写在前面
-
(负数margin)
1、两个区块全部浮动
2、自适应标签写在前面
3、设置自适应标签的margin-right(或固定标签的margin-left),数值为负的固定宽度值
-
-
两列定宽右自适应
- 左侧两列定宽可以按一列处理
- 参考左侧定宽右侧自适应解决方案
-
两端固定中间自适应
1、使用负margin,都要求中间栏的标签放置在第一个位置
2、两者的区别在于,双飞翼在中间区块内部嵌套一个子div(设置其左右margin,空出中间区域被遮挡部分);圣杯利用外部容器设置左右padding,挤压中间div两端空间,再设置左右区块相对偏移,空出遮挡部分
3、简单做法:两端定宽分别左右浮动,中间设置左右margin(中间栏的标签放置在最后)
-
多列等分
采用百分比设置宽度
-
-
绝对定位的覆盖问题
z-index属性值:整数,默认值为0
通过z-index属性设置各元素之间的重叠高低关系。z-index值大的层位于其值小的层上方,相同时定义在最后的元素压在上方
定位的元素始终压在未定位的元素上方,浮动的元素z-index属性无效
父元素的z-index决定了子元素的层级,z-index高的父元素,它的子元素无论z-index如何,都在上方
-
-
弹性布局flex
flex-direction:包含column和row,设置容器内部元素的的排列顺序,正序或逆序
flex-wrap:设置容器内部元素是否自动换行
<style type="text/css"> .container div:nth-child(2n+1){ background: gray; } .container div:nth-child(2n){ background: #b8b8b8; } #div02{ /*flex :权重*/ flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } #div02>div{ width: 50px; height: 50px; border: solid 3px blue; } </style> <div class="container"> <div id="div02"> <div></div> <div></div> <div></div> <div></div> </div> </div>
-
响应式布局:媒体查询+flex布局
main.css
.container{ margin: auto; box-shadow: 1px 1px 12px grey; /*一定要在容器中设置*/ display: flex; /*设置煮粥放方向*/ flex-direction: row; /*设置超出范围就换行*/ flex-wrap: wrap; /*主轴对齐方式*/ /*justify-content: center;*/ /*交叉轴对齐方式*/ /*align-items: flex-start;*/ } .container>div{ box-sizing: border-box; border: solid 2px white; height: 200px; } .container>div img{ width: 100%; height: 100%; object-fit: cover; }
pc-index.css
.container{ width: 1000px; background: red; } .container>div{ /*控制内部所有的元素*/ flex: 1; min-width: 250px; /*有意义,控制一行有几个*/ max-width: 250px; /*有意义,控制一个不能太大*/ }
pad-index.css
.container{ width: 750px; background: green; } .container>div{ /*控制内部所有的元素*/ flex: 1; min-width: 375px; max-width: 200px; }
mobile-index.css
.container{ width: 100%; } .container>div{ /*控制内部所有的元素*/ width: 100%; }
main.html
screen:显示屏幕;print:打印机;speech:语音合成器;all:适用于全部设备
<link rel="stylesheet" type="text/css" media="screen and (min-width: 970px)" href="css/pc-index.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 970px) and (min-width: 750px)" href="css/pad-index.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 750px)" href="css/mobile-index.css"> <div id="div01"> <!--<img src="../images/1.jpg" alt="">--> </div> <div id="div02"> <div></div> <div></div> <div></div> <div></div> </div> <div id="div03"> <!--<img src="../images/2.jpg" alt="">--> </div> <div id="div04"> <!--<img src="../images/3.jpg" alt="">--> </div> <div id="div05"></div> <div id="div06"></div>