CSS整屏是指页面的每个部分都充满整个屏幕。相较于传统网页布局，它更加美观、现代、吸引人，适合于展示图片、视频等大屏元素的网站。下面我们就来看看如何实现CSS整屏的效果。

/* 设置元素占满整个屏幕 */ 
html, body, #container { 
height: 100%; 
} 
/* 去除边距和滚动条 */ 
body { 
margin: 0; 
overflow: hidden; 
} 
/* 设置子元素的高度和宽度 */ 
.section { 
height: 100%; 
width: 100%; 
position: relative; 
display: flex; 
justify-content: center; 
align-items: center; 
} 
/* 添加背景颜色或背景图 */ 
.section1 { 
background-color: #cccccc; 
} 
.section2 { 
background-image: url(img/background.jpg); 
background-size: cover; 
background-position: center; 
} 
/* 滚动实现整屏页面 */ 
$(document).ready(function() { 
$('#fullpage').fullpage({ 
anchors: ['section1', 'section2', 'section3'], 
menu: '#menu', 
scrollingSpeed: 1000, 
scrollOverflow: true, 
}); 
});

以上是实现CSS整屏的基本步骤和代码。可以看到，实现CSS整屏的关键在于设置元素占满整个屏幕，去除边距和滚动条，以及设置子元素的高度和宽度。另外，相应的背景颜色或背景图也是必不可少的。

值得一提的是，要想页面整屏滚动，需要引入一个JavaScript插件 fullPage.js。它可以很方便地实现整屏滚动、锚点导航、侧边菜单等功能，是实现CSS整屏的好帮手。

总之，CSS整屏是一个很好的前端技术，可以让网站更加美观，给用户带来更好的视觉体验。只要掌握好基本技巧和注意事项，就可以轻松实现CSS整屏效果。