Last Updated on
在CSS中布局基本上有四个组成:(sizing)尺寸大小,(alignment)对齐,(spacing)间距和(responsiveness)响应。通过使用高度、最小高度、最大高度、宽度、最小宽度和最大宽度属性来了解CSS布局的尺寸大小。
CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。在这个模块中将涉及更多关于页面布局技术的细节:浮动、定位、CSS 表格、弹性盒子、网格、每种技术都有它们的用途,各有优缺点。
首先介绍,height、min-height、min-width、width,max-width
1、div
background:red
height:10rem;
/*width:15rem vs width:50%
width:100%
max-width:50rem;
加:
min-height:10rem;
2、.hidden
clip:rect(1px,1px,1px,1px);
position:absolute !important;
height:1px;
width:1px;
overflow:hidden;
2、.wrapper
width:100%
max-width:80%
3、.content-left
width:62.5%
4、.content-right
width:37.5%
5、img
max-width:100%
height:auto