通过display:block调节元素宽度

作者: admin 分类: css 发布时间: 2018-04-04 23:17

今天遇到个这样的问题，一个table标签，内部设置了宽度，如下：

<table width="591">

电脑上打开没问题，但是手机上打开就处问题了，本来自适应的主题，结果发现table里面的内容超出了，很不协调。

后面经过折腾，用下面的代码解决了，就是通过在网站CSS文件里面添加了样式：

table{display:block;max-width:100%;}

display:block的作用是把内联元素变成块状元素，这样就可以定义元素的宽和高了，max-width:100%;的意思是最大不能超过百分之百的宽度。

有一个问题不理解：table本来就是块状元素，为什么在文件CSS里面重新设置一遍以后，源代码中<table width="591">就不起作用了呢？

另外一个例子，就是控制图片的宽度，图片上传到网站上，有一个宽度显示在源代码中，如果用手机打开，就可能超出了边框，造成没法自适应的问题，同样的可以在网站CSS里面用上面的两句话使得图片最大只能是百分之百：

img{display:block;max-width:100%;}