黑马程序员技术交流社区

标题: 技术分享 [打印本页]

---

作者: CY-Huang    时间: 2019-3-20 17:00
标题: 技术分享
      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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2