CSS布局
2018-04-12 本文已影响0人
ticktackdong
一.绝对定位与相对定位 position:absolute/relative
绝对定位相当于从原文档删除该元素，不再占坑，位置是基于最近的已定位父容器或者<body>
绝对定位可以把一个元素放在另一个元素上，重复之后出现遮盖问题，
谁在上面由z-index来指定，默认为0可以设置负数，谁的z-index大谁在上面
相对定位并未从原文档删除，还占着原来的坑，位置是基于原文档做了一定的移动
二.浮动 float:left/right
浮动的框可以向左或向右移动直到碰到包含框或者其他框的边缘，浮动后原来的坑就让出来了
向左浮动时虽然把坑让出来了其他元素试图过来占坑。
发现原来的位置还被占着，补位的元素只好在他后面大伙挤一挤了。
当向左浮动的是图片而补位的是文字时就会出现文字环绕图片的情况，本来文字应该是在图片下面的
要让图片浮动又不让文字环绕用clear:left/right/both/none,clear:left不允许浮动元素出现在左边
三.显示方式
display:inline 内联，没有自动换行，width和height属性不会生效，元素大小由其内容决定。
display:block 块级，元素前后自动加上换行，width和height生效
display:inline-block综合一下前两个优点，没有换行但可以指定大小，即width和height生效
display:none 隐藏不显示不占坑跟没有似的
display:list-item/table/inline-table/table-cell显示为 列表/表格/前后无换行表格/单元格
四.水平居中
内容居中
设置属性align="center"来设置块元素
设置样式style="text-align:center"设置父元素里面子元素内容或样式
元素居中
div块元素默认占100%宽度可以先设置宽度和样式margain:0 auto来设置居中
span内联元素width不生效不能设置宽度
只能将他放在div中通过div的text-align来居中，不能用div的align居中
五.固定与占满
左侧固定，右边自动占满
固定用float:left和width,占满用overflow:hidden
左右固定,中间自适应
左右用float:left/right,width:***px,中间用margain:0 ***px;
六.垂直居中
line-height:***px,适合单独一行垂直居中
内边距方式：pading:***px;通过设置相同的上下内边距来实现多行垂直居中效果
table方式:display:table-cell将div用单元格形式来显示再借用单元格的垂直居中vertical-align:middle来达到效果
table方式可以对图片也进行居中而line-height不行
七.贴在下方与块之间的空格
贴在下方
外部块相对定位，内部块绝对定位，bottom：0表示贴在下面
块之间的空格
在编程时若<span>aaa</span>bbb<span>ccc</span>则span之间没有空格直接显示
而为了代码可读性的我们通常写作：
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
这样的话span之间就会有空格，怎么办呢？
float:left解决，为了避免后续元素和这些span重合在一起再加上
<div style="clear:both"></div> 
