4-web前端 盒子模型、行内块、浮动问题、无意义标签

1、图文对齐（搜索框）

图片标签是典型的行内块元素 除此之外行内块元素还有表单元素input、button

（行内块元素既可以设置宽高又可以和行元素在一行

行内块的转换问题 display （block块、inline行、inline-block行内块、none隐藏

 

转换后两个块中间存在空隙问题

2、浮动的元素参照父元素

浮动的影响：父元素没有高，高就是子元素的高，子元素浮动，父元素就变为0

如何消除浮动的影响：1.用div把浮动元素包起来；2.在兄弟元素的后面设置css 样式 clear：both

3、塌陷现象

子元素 margin-top 会使父元素同时造成影响

解决办法：1.父元素内＋padding-top ；2.父元素+上边框或者存在边框

4、盒子模型合并现象

盒子模型上下排布时加外边距会出现合并现象以数值最大的为准，左右不会合并

5、针对不同浏览器所造成网页布局不合理，网页排版混乱问题？?

原因：不同浏览器分辨率不同，不同缩放产生网页布局变化情况，不同电脑分辨率情况

解决办法：盒子模型、外边框auto

6、cursor-none 生成鼠标小手 、 outline：none去除input：submit默认框

7、transform: translate3d(0,-2px,0); 3D效果 对应数值为电脑浏览器 x y z 3D坐标轴

box-shadow: 0 15px 30px rgba(0,0,0,.1); x y 阴影模糊半径 rgba :red,green,black 0-1透明度

8、文本省略号

不换行 white-space: nowrap;

超出部分 隐藏 overflow: hidden;

省略号 text-overflow: ellipsis;