css 为什么会有缝隙，调整浏览器的显示比例不同，缝隙的位置也不一样，有的比例又没有缝隙，但按照我的宽高计算应该没有缝隙啊

问题如下：

布局：

css样式：

外面search的div:宽高：538px * 36px,边框为2px

实际内容宽高应该已经变成了:534px*32px

input搜索框:宽高：454px * 32px,

button:宽高：80px * 32px,

input的宽度+button的宽度+外面大盒子左右两个边框的宽度：454px+80px+2px+2px=538px刚好等于外面div的总宽度

input的高度+外面大盒子上下两个边框的高度+：32px+2px+2px=36px刚好等于外面div的高度

button的高度+外面大盒子上下两个边框的高度+：32px+2px+2px=36px刚好等于外面div的高度

已经清空了内外边距，并且上面的input和button也采用了浮动，应该不存在缝隙的问题

代码附上：

<!DOCTYPE html>
<html>

<head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           /* 把我们所有标签的内外边距清零 */

           * {
               margin: 0;
               padding: 0
           }

           div,
           nav,
           header,
           section,
           input,
           button,
           li {
               box-sizing: border-box;
           }
           /* 去掉每个li前面的小圆点 */

           li {
               list-style: none
           }

           button {
               cursor: pointer/* 当我们鼠标经过button按钮时,鼠标变成小手的样子 */
           }

           a {
               color: #666;
               text-decoration: none
           }

           a:hover {
               color: #c81623
           }

           button,
           input {
               font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
           }

           body {
               /* 抗锯齿性,避免文字被放大后会产生锯齿 */
               -webkit-font-smoothing: antialiased;
               background-color: #fff;
               /* 12px/1.5 表示所有字体的大小为12px,1.5倍的行高 */
               /* "\5B8B\4F53" 代表的是宋体，用这种方式，浏览器的兼容性会比较好。把中文字体的名称用相应的Unicode编码来代替，这样就可以有效地避免浏览器解释CSS代码时出现乱码的情况*/
               font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
               color: #666
           }

           .search {
               position: absolute;
               top: 26px;
               left: 346px;
               height: 36px;
               width: 538px;
               border: 2px solid #b1191a;
           }

           .search form input {
               float: left;
               padding-left: 10px;
               width: 454px;
               height: 32px;
               outline: none;
               border: 0;
           }

           input::placeholder {
               color: #666666;
           }

           .search form button {
               float: left;
               position: absolute;
               width: 80px;
               height: 32px;
               background-color: #b1191a;
               border: 0;
               color: #fff;
               font-size: 16px;
           }
       </style>
   </head>

</html>

大佬救命，新手刚学不久

css 为什么会有缝隙，调整浏览器的显示比例不同，缝隙的位置也不一样，有的比例又没有缝隙，但按照我的宽高计算应该没有缝隙啊相关推荐

[css] 你用过css的tab-size属性吗？浏览器默认显示tab为几个空格？
[css] 你用过css的tab-size属性吗?浏览器默认显示tab为几个空格? tab-size 属性规定制表符(tab)字符的空格长度.在 HTML 中,制表符(tab)字符通常显示为一个单一的 ...
CSS绝对定位和相对定位的百分比计算以及宽高计算
参考文章:relative 和 absolute 元素的百分比定位.CSS进阶--绝对定位元素的宽高是如何定义的一.设置top.right.bottom.left的值为百分比如果没有设置top.r ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
html的页面宽高变形问题,CSS＋div 设计的网页在不同浏览器中变形的问题
给别人做了一个web,自己这边正常,一到对方,机器上,发现变形了,真郁闷,后来才发现时IE 7.0惹得祸,没有办法,学习呗. 如何使网页在IE7.0和火狐中不变形? 以下的方法可行,但并不一定是最简单 ...
html怎么多行超出省略号,css+js 如何实现多行文字超出显示省略号（需要同时兼容ie chrome等浏览器）...
chrome浏览器下 ie11浏览器下 html ` ` css ` .trainInfo_text { position: relative; margin: 10px 0 10px 10px; w ...
css 列宽控制,CSS 控制table 滑动及调整列宽等问题总结
本文介绍了通过css+js来控制table的x,y方向上的滚动.然后详细分析了使用table时,可能出现的width宽度与预期设定不一致的情况,最后给出了解决方案效果图三. 表格宽度上面两段代码 ...
onresize()调整浏览器窗口时，使图片等控件自适应地变化大小
今天学习JS时,按照教程里如下代码实现"改变浏览器窗口的图片自适应问题",但没有达到想要的效果,图片在改变浏览器窗口的时候越变越大,刷新页面后又恢复原大小. height = (d ...
css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...

css 为什么会有缝隙，调整浏览器的显示比例不同，缝隙的位置也不一样，有的比例又没有缝隙，但按照我的宽高计算应该没有缝隙啊

css 为什么会有缝隙，调整浏览器的显示比例不同，缝隙的位置也不一样，有的比例又没有缝隙，但按照我的宽高计算应该没有缝隙啊相关推荐

最新文章

热门文章