CSS应用之设计满屏品字布局

设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中,需要对CSS能够灵活的运用。首先,这里面涉及到的相关知识点有:

1.元素的水平居中:

  • 使用margin:0 auto;可以水平居中;
  • 使用text-align:center;给父元素设置使其行内元素水平居中。

2.元素相对窗口定位:

  • 使用position:fixed;固定定位,元素总是根据浏览器的窗口进行定位;
  • 使用position:absolute;绝对定位;
  • 使用body和html的width和height属性填充窗口。

3.元素左右定位:

  • 使用float左右浮动;
  • 使用position:absolute;绝对定位进行左右定位。

下面用两种方式进行展示:

方式一:





品字布局	



方式二:





品字布局	



效果如下:

CSS应用之设计满屏品字布局_第1张图片

你可能感兴趣的:(HTML&CSS)