网页设计基础（四）

网页设计基础之CSS（三）

1.CSS的盒子模型

①盒子模型的初步认识

• Margin(外边距) - 与其它盒子的距离
• Border(边框) - 手机盒子的厚度
• Padding(内边距) - 填充泡沫的厚度
• Content(内容) - 内容
  注意：虽然盒子模型拥有外边距，边框，外边距，宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素

②盒子模型的相关属性

• 边框属性
  1.样式综合设置：
  border-style:上边 右边 下边 左边 注意边框的顺序、如果样式为nomal或没有时，后续不可加属性
  border-style的复合书写形式：上边 左右边 下边；上下边 左右边；上下左右边
  2.设置边框宽度：
  border-width：上边宽度 右边宽度 下边宽度 左边宽度 注意边框的顺序
  3.设置边框颜色：
  border-color：上边颜色 右边颜色 下边颜色 左边颜色 注意边框的顺序
  边框透明色：transparent或者 border-color：transparent
• 内边距属性
  padding： 上内边距 右内边距 下内边距 左内边距 padding的相关属性的取值可为auto自动
• 外边框属性
  当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中

.header{width:100px; margin:0 auto;}

• 背景属性
  如果希望背景图像出现在其他位置，就需要引入background-position设置背景图的位置
  设置背景图像固定

body{
background-image:url(img/tu.jpg);  /*设置网页背景图像*/
background-repeat:no-repeat;       /*设置网页图像不平铺*/
background-positions:50px 80px;    /*用像素控制背景图像的位置*/
background-attachment:fixed;     /*设置背景图像位置固定*/
}

2.附上知识脑图

注：本文参考自各个超链接，详细的属性可点开链接查看！

来源：CSDN

作者：邵金河

链接：https://blog.csdn.net/weixin_45728219/article/details/103623873