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

最新推荐文章于 2022-08-09 21:38:30 发布

Freya_yyy

最新推荐文章于 2022-08-09 21:38:30 发布

阅读量1.1k

点赞数

分类专栏： HTML&CSS 文章标签： css 满屏品字布局元素水平居中元素左右定位元素浮动

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Freya_yyy/article/details/81269044

版权

HTML&CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

1.元素的水平居中：

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

2.元素相对窗口定位：

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

3.元素左右定位：

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

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

方式一：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品字布局</title>	
<style>
   * {margin: 0;padding: 0;}/* 去除所有元素默认的内外边距的值 */
   html, body {height: 100%;}/* 默认HTML，body的高度为0，为其设置高度以使后面的div可以用百分比设置高度 */
   .header {height: 50%;width: 50%;background-color:  rgb(255,2545,167);margin: 0 auto;}
   .main {height: 50%;width: 100%;}
   .main .left {float: left;width: 50%;height: 100%;background-color: rgb(204,255,102);}
   .main .right {float: left;width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
	<div class="left"></div>
	<div class="right"></div>
</div>	
</body>
</html>

方式二：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品字布局</title>	
<style>
	* {margin: 0;padding: 0;}/* 去除所有元素默认的内外边距的值 */
    html, body {height: 100%;}/* 默认HTML，body的高度为0，为其设置高度以使后面的div可以用百分比设置高度 */
    .pinzi-flex {position: fixed;left: 0;top: 0;height: 100%;width: 100%;}
    .header {height: 50%;}
    .header .div-up {width: 50%;height: 100%;background-color:  rgb(255,2545,167);margin: 0 auto;}
    .main {height: 50%;position: relative;}
    .main .div-left {position: absolute;left: 0; width: 50%;height: 100%;background-color: rgb(204,255,102);}
    .main .div-right {position: absolute;right: 0; width: 50%;height: 100%;background-color: rgb(189,255,255);}
</style>
</head>
<body>
<div class="pinzi-flex">
<div class="header">
	<div class="div-up"></div>
</div>
<div class="main">
	<div class="div-left"></div>
	<div class="div-right"></div>
</div>
</div>	
</body>
</html>

效果如下：

Freya_yyy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS应用之设计满屏品字布局

设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中，需要对CSS能够灵活的运用。首先，这里面涉及到的相关知识点有：1.元素的水平居中：使用margin:0 auto;可以水平居中；使用text-align:center;给父元素设置使其行内元素水平居中。2.元素相对窗口定位：使用position:fixed;固定定位，元素总是根据浏览器的窗口进行定位；使用positio...
复制链接

扫一扫