网站设计如何自学,东阳建设局网站,网站建设与规划工作,2021年关键词有哪些文章目录 什么是盒模型#xff1f;设置边框设置内边距设置外边距块级元素水平居中 什么是盒模型#xff1f;
页面上的每个HTML元素都是一个一个的“盒子”#xff0c;这些盒子由#xff1a;内容、内边距、边框、外边距组成。 我们可以和住的房子联系起来#xff0c;更好… 文章目录 什么是盒模型设置边框设置内边距设置外边距块级元素水平居中 什么是盒模型
页面上的每个HTML元素都是一个一个的“盒子”这些盒子由内容、内边距、边框、外边距组成。 我们可以和住的房子联系起来更好的理解这四部分的含义
外边距房子和房子之间的距离 边框墙的厚度 内边距墙和家具之间的距离 内容家具
设置边框 基础属性边框的粗细border-width: 10px;边框的样式border-style: ;border-style: solid; 实线边框border-style: dashed; 虚线边框border-style: dotted; 点线边框边框的颜色border-color: green;设置边框的大小border: 10px;box-sizing: border-box;分别设置边框每个方向的大小border-top: 1px;border-right: 2px;border-bottom: 3px;border-left: 4px;注只设置边框会把元素撑大需要连同设置 box-sizing: border-box 使边框不撑大元素而是压缩一点内容的大小 设置内边距 设置内边距的大小padding: 2px;box-sizing: border-box;分别设置内边距每个方向的大小padding-top: 1px;padding-right: 2px;padding-bottom: 3px;padding-left: 4px;注只设置内边距会把元素撑大需要连同设置 box-sizing: border-box 使内边距不撑大元素而是压缩一点内容的大小 设置外边距 设置外边距的大小margin: 2px;分别设置外边距每个方向的大小margin-top: 1px;margin-right: 2px;margin-bottom: 3px;margin-left: 4px;注不会撑大元素 块级元素水平居中
方式一
margin-left: auto; margin-right: auto;方式二
margin: auto;方式三
margin: 0 auto;注 垂直居中不能使用margin设置使用margin水平居中是给块级元素用的使用text-align水平居中是给行内元素或者行内块元素用的。
