布局思维将整个页面划分成大大小小的盒子布局核心调整盒子与盒子之间的距离以及内容与盒子边框之间的距离。最终实现UI设计稿的效果。什么是标准文档流?标准文档流指的是元素在排版布局过程中:元素会默认自动从左往右从上往下的流式排列方式并最终将窗体自上而下分成一行行每行从左至右的排列元素。也就是说文档流中的元素默认会紧贴到上一个元素的右边如果右边不足以放下元素元素则会另起一行在新的一行从左至右的摆放块状元素和行内元素块状元素独占一行,默认宽度等于body的宽度跟父元素保持一致可以设置宽高如div p h1~h6 ul ol li dl dt dd table行内元素可以在一行内排列宽高由内容撑起来不可以设置宽高如 span a img input置换元素 行内块既可以设置宽高又可以在一行内排列。 如img input盒子之间的距离问题块状元素(垂直排列)两者之间的距离是“上侧盒子的margin-bottom和下侧盒子的margin-top两者的较大值”。如下代码盒子1和2之间的距离是60px,而不是603090px!DOCTYPEhtmlhtmlheadmetacharsetutf-8title/titlestylediv{width:200px;height:200px;border:2px solid red;}.one{margin-bottom:30px;}.two{margin-top:60px;}/style/headbody!-- 盒子之间的距离问题 1、块状元素 垂直排列 :两者之间的距离是“上侧盒子的margin-bottom和下侧盒子的margin-top两者的较大值” 2、 --divclassone1/divdivclasstwo2/div/body/html行内元素(水平排列) 在垂直方向上的margin和padding都可以设置但是并不会在页面上起到应有的效果。水平方向可以起作用水平方向上是两者之和。如下代码中span1和span2的距离是305080px.!DOCTYPEhtmlhtmlheadmetacharsetutf-8title/titlestyle.span1{margin-right:30px;}.span2{margin-left:50px;}/style/headbody!-- 盒子之间的距离问题 1、块状元素 垂直排列 :两者之间的距离是“上侧盒子的margin-bottom和下侧盒子的margin-top两者的较大值” 2、行内元素 在垂直方向上的margin和padding都可以设置但是并不会在页面上起到应有的效果。水平方向可以起作用 水平方向上是两者之和 --spanclassspan1span 1/spanspanclassspan2span 2/span/body/html浮动元素设置浮动后会漂浮起来在父级元素的内容上浮动靠左或者是靠右直到遇到父元素的边界或其他浮动元素为止。块状元素设置浮动后失去独占一行的特性此时宽高都是0可以设置宽高也可以在一行内排列。行内元素浮动后可以设置宽高也可以在一行内排列。所谓浮动指的是元素脱离原来标准文档流在父元素中浮动起来。默认值 none 不浮动left 向左浮动right 向右浮动两个元素上面的元素浮动下面的元素不浮动此时就是一个环绕的效果。两个元素同时浮动此时可以在一行内排列。两个元素上面的不浮动下面浮动此时下面的浮动元素不会影响上面的元素。在做页面布局时只要右一个元素浮动了那么其余的下面的同级元素都需要设置浮动。因为浮动元素会影响其下边的非浮动元素浮动跟inline-block的区别 a、inline-block没有脱离标准文档流浮动脱离了。b、浮动后元素与元素之间没有空隙而inline-block排列时元素与元素之间有空隙。浮动塌陷问题什么是浮动塌陷 a、在标准文档流中父元素的高度默认是被子元素撑开的不设置父元素的高度时。也就是子元素多高父元素就多高。b、但是当子元素设置为浮动元素后子元素会完全脱离文档流此时就会导致子元素无法撑起父元素的高度导致父元素的高度塌陷。c、由于父元素的高度塌陷了则父元素下面的所有元素父元素同级的下面的其他元素都会向上移这样就会导致页面布局混乱。d、所以在开发中一定要避免出现高度塌陷的问题。解决浮动塌陷开启元素的BFC属性即可解决浮动塌陷问题a. 什么是BFC根据W3C的标准在页面中元素都有一个隐式的属性叫做BFC (Block Formatting Context),默认是关闭的b. 开启BFC元素将会具有如下特性父元素的垂直外边距不会和子元素重叠开启BFC的元素不会被浮动元素所覆盖开启BFC的元素可以包含浮动的子元素c.如何开启BFC将父元素的overflow设置为非visible的值。如 overflow:hidden消除页面自带的左侧边距在css文件中采用如下代码消除默认的左边距*{margin:0;}flex弹性容器的常见属性.container{/* 设置为弹性容器 */display:flex;/* flex容器中主轴的方向默认是row */flex-direction:row;/* 决定flex容器在主轴方向上如何分布 */justify-content:center;/* 决定flex容器在交叉轴方向上如何分布仅限单行的情况 注意与align-content的区别align-items仅控制当前行align-conten将多行作为一个整体进行控制*/align-items:center;/* 决定flex容器在交叉轴方向上如何分布适用flex容器中有多行的情况将多行看成一个整体 */align-content:center;/* 在flex各个项目之间生成间距与margin类似 */gap:20px;/* 决定flex各个项目之间是否换行wrap自动换行 nowrap不换行 */flex-wrap:wrap;border:2px solid red;height:700px;}.item{/* 指定flex项目的增长系数默认为0不增长。不同的flex项目可以设置不同的值的系数 值越到每次增长得越多 */flex-grow:0;background-color:aqua;width:100px;height:100px;border:1px solid green;}#item{flex-grow:1;}grid布局常见属性.container{border:2px solid red;/* grid布局 */display:grid;/* 定义grid元素可以显示的列数以及每列的宽度。 如grid-template-columns: 150px 180px; 表示共2列显示一列宽度为150px,另一列宽度为180px。除了px单位之外还可以使用frgrid布局的专用单位 作为单位1fr表示占总宽度的1份2fr表示占总宽度的2份。px和fr也可以混用 *//* grid-template-columns: 150px 180px; *//* grid-template-columns: 1fr 2fr; *//* 总共分为3列第一列占固定宽度150px, 剩下的2列平分宽度 *//* grid-template-columns: 150px 1fr 1fr; *//* 可与函数minmax()搭配使用,以下表示3列平分宽度并可以自由缩放但是第一列有最小宽度150px的限制 不会低于150px *//* grid-template-columns: minmax(150px, 1fr) 1fr 1fr; *//* 可与repeat()函数搭配使用以下表示重复5次5列每次每列产生的宽度为150px */grid-template-columns:repeat(5,150px);/* 定义行与行 、列与列之间的距离 行与行的距离为1em, 列与列的距离也为1em *//* gap: 1em; *//* 行与行的距离为1em, 列与列的距离也为1em */gap:1em 1em;/* 可与repeat()函数搭配使用以下表示重复5次5行每次每行产生的宽度为150px */grid-template-rows:repeat(5,150px);}.item{background-color:red;border:2px solid black;}.item-1{/* 决定行开始的坐标行坐标以左上角为原点。从上至下给每条横线编号编号从1开始... */grid-row-start:1;/* 决定行结束的坐标 */grid-row-end:3;/* 决定列开始的坐标列坐标以左上角为原点。从左至右给每条竖线编号编号从1开始... */grid-column-start:1;/* 决定列结束的坐标*/grid-column-end:3;}.item-2{/*grid-row-start: 1;和 grid-row-end: 3;的简写 */grid-row:1 / 3;grid-column:4 / 6;}!DOCTYPEhtmlhtmlheadmetacharsetutf-8title/titlelinkrelstylesheethrefcss/box.css/headbodyclasscontainerdivclassitem item-11/divdivclassitem item-22/divdivclassitem item-33/divdivclassitem item-44/div/body/html以上代码效果如下align-items和align-content的区别*-items :单个项目的对齐调整网格项目在其自身单元格内部的位置。*-content:整体网格的对齐调整所有网格轨道作为一个整体在容器中的位置。当容器有剩余空间时生效