CSS布局:使用控制布局元素

CSS教程

CSS布局-尺寸-对齐-间距和自动适配

在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

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年8月31日

Previous Story

CSS教程

CSS布局:rem布局原理

rem布局原理:主要原理是rem布局。 最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对r …

...

Next Story

CSS教程

CSS布局:对齐

css对齐:CSS行高垂直外边距可以使用水平内边距、边框和外边距调整它们的间距。css对齐常常包括有:居中对齐,文字两端对齐,两端对齐,右对齐,左对齐,靠右对齐,文字对齐。

...