1818IP-服务器技术教程,云服务器评测推荐,服务器系统排错处理,环境搭建,攻击防护等

当前位置:首页 - 网站技术 - html/css - 正文

君子好学,自强不息!

如何用css让网站自适应

2022-03-17 | html/css | gtxyzz | 508°c
A+ A-

每日笔记,css块级元素自适应,如何让网页自适应,如何用css让网站自适应

使用 width、max-width 和 margin: auto;

如上一章所述,块级元素始终占用可用的全部宽度(尽可能向左和向右伸展)。

设置块级元素的 width 将防止其延伸到其容器的边缘。然后,您可以将外边距设置为 auto,以将元素在其容器中水平居中。元素将占用指定的宽度,剩余空间将在两个外边距之间平均分配:

这个 <div> 元素的宽度为 500px,外边距设置为 auto。

注意:当浏览器窗口小于元素的宽度时,上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。

在这种情况下,使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用,这一点很重要:

这个 <div> 元素的最大宽度为 500px,外边距设置为 auto。

实例

div.ex1 {
  width: 650px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 650px;
  margin: auto;
  border: 3px solid #73AD21;
}


这个 div 元素的宽度是:650px;


这个 div 元素的最大宽度是:650px;

提示:将浏览器窗口拖动到小于650px的宽度,以查看这两个 div !

本文来源:1818IP

本文地址:https://www.1818ip.com/post/403.html

免责声明:本文由用户上传,如有侵权请联系删除!

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。