当前位置: 首页 > Web前端 > CSS

静态页面布局总结(新手)

时间:2023-03-30 22:17:29 CSS

学了一个月的HTML,对HTML和Css页面的静态布局做了一个总结。一般来说,静态页面布局分为两大类,水平布局和垂直布局,只要熟悉水平布局和垂直布局布局,那么静态页面的布局就不会有太大问题。在说布局之前,先说说元素的显示方式分类。元素的显示方式分类可分为块级元素、行内元素、行内块级元素。块级元素垂直排列,每个元素占一行。内联元素和内联块级元素不会单独占据一行,而是水平排列。当然,元素的显示方式可以随意转换。先说垂直布局。垂直布局允许元素在页面中垂直排列。这个比较简单。我们知道,一般情况下,页面中的块级元素是按照从上到下的顺序排列的,所以这种垂直布局是比较简单的。只要块级元素在页面上是按顺序书写的,浏览器就会默认将这些块级元素垂直排列。如果有行内块级元素或行内元素,可以将它们转化为块级元素,实现元素的垂直排列。然后说一下水平布局。水平布局是将元素水平排列在页面上。这个比竖排要复杂一些,因为横排涉及到浮动,所以会有很多问题,比如高度塌陷,覆盖。而且水平布局一般都是通过浮动来实现的,所以会遇到很多问题,这就需要我们对浮动有一定的了解。接下来写一些布局细节和浮动的各种情况。首先,最常用的是居中显示。在各种居中方法中,最常用的是text-align:center。text-align:center可以在以下情况下居中:元素的文本内容可以水平居中。内联元素和内联块级元素,但是元素内部的块级元素不能水平和垂直居中。最常用的是让line-height=元素的高度,vertical-align,也是垂直对齐。一般是将图片右侧的文字与图片的上中下对齐。那么内外边距用的比较多,就是margin和padding。很好地理解和使用内边距和外边距可以让您轻松实现开头或结尾的一些距离。然后是定位。最常用的页面布局定位是float和position。有兴趣的可以去我的日记里详细介绍。学习了第一个月,完全是个菜鸟。我希望你能给我更多的建议。