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

  • 4-web前端 盒子模型、行内块、浮动问题、无意义标签已关闭评论
  • 47 次浏览
  • A+
所属分类:Web前端
摘要

1、图文对齐(搜索框)图片标签是典型的行内块元素 除此之外行内块元素还有表单元素input、button

1、图文对齐(搜索框)

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

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

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

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

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

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

 

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

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

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

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;

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