盒子模型

  • 内容(content)：输出的内容
  • 宽度/高度(hight/width):存放内容的区域，content的宽高
  • 内边距(padding)：content与border之间的填充
  • 边框(border)：内边框与外边框之间的边框
  • 外边距(margin)：border外的边框

属性

  • border边框样式：
  • dotted：定义点线边框
  • dashed：定义虚线边框
  • solid：定义实线边框
  • double：定义双边框
  • border: 边框的宽度 边框的样式 边框的颜色;
  • border-top（分别设置top、right、bottom、left）: 边框的宽度 边框的样式 边框的颜色;
  • margin: xx px;
  • margin-top（分别设置）:xx px;
  • padding:xx px;
  • padding-top（分别设置）:xx px;

清空默认边距

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;
}

box-sizing

  • CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
  • box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值

  • content-box:元素的宽高 = 边框 + 内边距 + 内容宽高
  • border-box:元素的宽高 = width/height的宽高

margin:0 auto

text-align:center;margin:0 auto;区别：

  • text-align: center;作用：设置盒子中存储的文字/图片水平居中
  • margin:0 auto;作用：让盒子自己水平居中

盒子阴影和文字阴影

盒子阴影

box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

注意点

  • 盒子的阴影分为内外阴影, 默认情况下就是外阴影
  • 快速添加阴影只需要编写三个参数即可
  • box-shadow: 水平偏移 垂直偏移 模糊度;
  • 默认情况下阴影的颜色和盒子内容的颜色一致

文字添加阴影

text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;

参考资料

「李南江」HTML+CSS 基础入门教程全套视频|HTML5+CSS3基础+案例

CSS padding margin border属性详解

赏