css的盒子模型学习

  • div标签：
    • 块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
    • 特点：
      • 默认宽度是页面的宽度，但是可以设置。
      • 高度默认是没有的，但是可以设置。(可以顶开)
      • 如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
  • 盒子模型：
    • 外边距:margin
      • 作用：用来设置元素和元素之间的间隔。
      • 居中设置:margin:0px auto;上下间隔是0px,水平居中。
      • 可以根据需求单独的设置上下左右的外边距。
    • 边框：border
      • 作用：用来设置元素的边框大小
      • 可以单独设置上下左右
    • 内边距：padding
      • 作用：设置内容和边框之间的距离
      • 注意：内边距不会改变内容区域的大小
      • 可以单独的设置上下左右的内边距
    • 内容区域：
      • 作用：改变内容区域的大小。
      • 设置宽和高即可改变内容区域的大小。
  • 注意：进行页面布局时要清除整个页面的内外边距
  • body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0}
  • *{margin:0;padding:0}