CSS盒子基础知识

        CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。每一个盒子都由一下几个部分组成：内容区（content），内边距（padding），边框（border），外边距（margin）。 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列 ，内容区的大小由width 和 height两个属性来设置。width 设置内容区的宽度， height 设置内容区的高度。 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部

显示的实际宽度 = width + border-left-width + border-right-width

显示的实际高度 = height + border-top-width + border-bottom-width

边框样式

none无边框;    solid实线;    double 双实线;    dashed 虚线;    dotted点状框

只设置边框的宽度，未设置边框的颜色和样式 - 没有任何效果

设置边框的宽度和颜色，未设置边框的样式 - 没有任何效果

 设置边框的颜色和样式 - 边框的宽度具有一个默认值

【设置边框，必须同时设置边框宽度、颜色和样式(与顺序无关) 】

边框颜色   border-color

影响自身元素的位置：margin-top   margin-left

影响相邻元素的位置：margin-right  margin-bottom

最后

以上就是文艺秀发为你收集整理的CSS盒子基础知识的全部内容，希望文章能够帮你解决CSS盒子基础知识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。