css学习三大重点： css 盒子模型 、 浮动 、 定位
网页布局的本质：
1.首先利用CSS设置好盒子的大小，然后摆放盒子的位置。 2 最后把网页元素比如文字图片等等，放入盒子里面。 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 盒子里面的文字和图片等元素是 内容区域 盒子的厚度 我们成为 盒子的边框 盒子内容与边框的距离是内边距（类似单元格的 cellpadding) 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）
扩展：
1.圆角边框(CSS3)
border-radius:length;
2.盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；
3.图片、表单和文字对齐
我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。
4.去除图片底侧空白缝隙
原因：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。就是图片底侧会有一个空白缝隙。
解决的方法就是：给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
5.vertical-align 垂直对齐
有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是 text-align: center;
vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，
注意： vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素， 特别是行内块元素， 通常用来控制图片/表单与文字的对齐。
file://E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/%E9%BB%91%E9%A9%AC/%E8%AF%BE%E4%BB%B6/%E5%9F%BA%E7%A1%80%E7%8F%AD/%E8%AF%BE%E5%A0%82%E8%AF%BE%E4%BB%B6/day09-css07/9CSS-07/%E7%AC%94%E8%AE%B0/media/35vertical.png?lastModify=1553071964
| 
收藏
淘帖
踩
