做金馆长网站网站,中国互联网公司排名,创意图案设计网站,语文建设网站布局与定位 摆放元素 1#xff0c;使用流 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始#xff0c;从上到下沿着元素流逐个显示所遇到的各个元素。 每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并…布局与定位 摆放元素 1使用流 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始从上到下沿着元素流逐个显示所遇到的各个元素。 每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并且元素会占满页面的整个宽度。 内联元素在水平方向上会相互挨着总体上会从左上方流向右下方。 浏览器并排放置两个内联元素时两元素的间隔等于两元素外边距之和。 浏览器上下放置两个块元素时上下间隔为两个外边距中较大的那个外边距大小。 流属性float float属性首先尽可能远地向左或向右浮动一个元素然后它下面的所有内容会绕流这个元素。 clear 属性当元素流入界面时在这个元素左边、右边或两边不允许有浮动内容。 2冻结设计 让布局锁定当用户调整屏幕大小时设计仍保存原样这称为冻结布局。 冻结布局会锁定元素让他们冻结在页面上这些元素不能移动就能避免由于窗口扩展带来的很多问题。 在HTML中增加一个div元素id为“allcontent”包围页面中的所有内容。 在CSS中指定 #allcontent{width:800px ; !--固定宽度--
} 即使浏览器大小调整内容宽度也不变。 3凝胶布局 凝胶布局会锁定页面中内容区的宽度不过会将它在浏览器中居中。 #allcontent{width: 800px;margin-left: auto;margin-right: auto;} 外边距为“auto”时浏览器会确定正确的外边距是多少另外还会确保左和右外边距相同所以内容会居中。 4绝对定位 一个元素绝对定位时浏览器首先要做的就是将它从流中完全删除然后浏览器将这个元素放置在top和right属性指定的位置上。 流中的元素不会将其内联内容围绕在一个绝对定位元素周围。他们完全不知道页面上有这个绝对定位元素。 绝对定位元素可以分层放置一个元素可以放在另一个绝对定位元素上面。每个绝对定位元素都有一个名为z-index的属性这会指定它在一个虚拟z轴上的位置上面的元素“更靠近”你z-index更大。 #sidebar{position: absolute;top: 128px;left: 0px;
} 使用position属性指定某个元素要绝对定位。 5CSS表格显示 CSS表格显示允许你在一个有行和列的表格中显示块元素另外通过将内容放在一个CSS表格中可以很容易地用HTML和CSS创建多栏设计。 可以把表格想成是一个电子表格包括行和列各行和列交叉的位置有一个单元格。在一个电子表格中可以在各个单元格中放入值如一个数或一些文本。对于CSS表格显示每个单元格会包括一个HTML块元素。 建立CSS表格显示 首先把要作为一个表格显示的所有内容包围在一个div中名为“tableContainer” div#tableContainer {display: table;
} 然后为我们需要的一行创建一个div名为“tableRow”。 div#tableRow {display table-row;
} 最后各列放置现有的块元素它们将分别显示为表格中的一个单元格。 #main{display: table-cell;
}#siderbar{display: table-cell;
} 转载于:https://www.cnblogs.com/Reyon/p/9358261.html
