盒子模型

			主要任务: 盒模型(Box Model)
			元素实际占的位置:
			    宽:内容的宽+左右内边距+左右边框+左右外边距
			    高:内容的高+上下内边距+上下边框+上下外边距
			内容(content):盒子的内容,用于显示文本,图片   width height
			内边距(padding):内容到边框的距离  透明色  
			边框(border):围绕在内边距的边框
			外边距(margin):盒子与另外一个盒子之间的距离  透明色   
			
			内边距:padding
			
			padding	        使用简写属性设置在一个声明中的所有填充属性
			padding-bottom	设置元素的底部填充
			padding-left	设置元素的左部填充
			padding-right	设置元素的右部填充
			padding-top	    设置元素的顶部填充
			    length	    规定以具体单位计算填充值,比如像素、厘米等。默认值是 0px
			    %	        规定基于父元素的宽度的百分比的填充
			    inherit	    指定应该从父元素继承padding
	一个值(上下左右) 两个值(上下  左右)  三个值(上  左右  下)  四个值(上  右  下  左)
			
			外边距:margin
			margin	        简写属性。在一个声明中设置所有外边距属性。
			margin-bottom	设置元素的下外边距。
			margin-left	    设置元素的左外边距。
			margin-right	设置元素的右外边距。
			margin-top	    设置元素的上外边距。   
			    auto	    浏览器计算外边距。
			    length	    规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
			    %	        规定基于父元素的宽度的百分比的外边距。
			    inherit	    规定应该从父元素继承外边距。
一个值(上下左右) 两个值(上下  左右)  三个值(上  左右  下)  四个值(上  右  下  左)
			
			边框:border
			border  简写属性,用于把针对四个边的属性设置在一个声明。
			    可以设置的属性分别(按顺序):border-width, border-style,和border-color  style必需
			border-style	    用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
			    none	定义无边框。
			    hidden	与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
			    dotted	定义点状边框。在大多数浏览器中呈现为实线。
			    dashed	定义虚线。在大多数浏览器中呈现为实线。
			    solid	定义实线。
			    double	定义双线。双线的宽度等于 border-width 的值。
			    groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
			    ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
			    inset	定义 3D inset 边框。其效果取决于 border-color 的值。
			    outset	定义 3D outset 边框。其效果取决于 border-color 的值。
			    inherit	规定应该从父元素继承边框样式。
			border-width	    简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
			    thin	定义细的边框。
			    medium	默认。定义中等的边框。
			    thick	定义粗的边框。
			    length	允许您自定义边框的宽度 px。
			    inherit	规定应该从父元素继承边框宽度。
			border-color	    简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
			    color	    指定背景颜色。在CSS颜色值查找颜色值的完整列表
			    transparent	指定边框的颜色应该是透明的。这是默认
			    inherit	    指定边框的颜色,应该从父元素继承
			border-bottom	    简写属性,用于把下边框的所有属性设置到一个声明中。
			border-bottom-color	设置元素的下边框的颜色。
			border-bottom-style	设置元素的下边框的样式。
			border-bottom-width	设置元素的下边框的宽度。
			border-left	        简写属性,用于把左边框的所有属性设置到一个声明中。
			border-left-color	设置元素的左边框的颜色。
			border-left-style	设置元素的左边框的样式。
			border-left-width	设置元素的左边框的宽度。
			border-right	    简写属性,用于把右边框的所有属性设置到一个声明中。
			border-right-color	设置元素的右边框的颜色。
			border-right-style	设置元素的右边框的样式。
			border-right-width	设置元素的右边框的宽度。
			border-top	        简写属性,用于把上边框的所有属性设置到一个声明中。
			border-top-color	设置元素的上边框的颜色。
			border-top-style	设置元素的上边框的样式。
			border-top-width	设置元素的上边框的宽度。    
			
			
			轮廓:outline   轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
			    可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width  缺一
			outline	        在一个声明中设置所有的轮廓属性	
			    outline-color
			    outline-style
			    outline-width
			    inherit	
			outline-color	设置轮廓的颜色	
			    color-name
			    hex-number
			    rgb-number
			    invert
			    inherit	
			outline-style	设置轮廓的样式	
			    none	默认。定义无轮廓。
			    dotted	定义点状的轮廓。
			    dashed	定义虚线轮廓。
			    solid	定义实线轮廓。
			    double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
			    groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
			    ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
			    inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
			    outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
			    inherit	规定应该从父元素继承轮廓样式的设置。
			outline-width	设置轮廓的宽度	thin
			    medium
			    thick
			    length
			    inherit
		
posted @ 2022-01-11 10:40  平_y29  阅读(122)  评论(0)    收藏  举报