Java 18---CSS(2)

导读

1.盒子模型
2.float浮动
3.position定位

盒子模型

内边距:padding,元素边框和内容的距离

padding-left,padding-right
padding-top,padding-bottom

        p{
            /*padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 5px;
            padding-left: 10px;*/
            /*整合:四个方向都写,顺时针方向,上右下左*/
           /* padding: 5px 10px 5px 10px;*/
            /*上下:5px  左右:10px*/
           /* padding: 5px 10px;*/
            /*上下左右:都是10px*/
            padding: 10px;
            border: solid 1px pink;
        }

外边距:margin
元素边框和周围元素的距离,可能是父级,同级

margin-left,margin-right
margin-bottom,margin-top

元素类型:
	块级元素,上下左右margin都可以设定
	行级元素,左右margin可以设定	
	
元素可以通过css中display属性去改变,块级(block),行级(inline),行内块(inline-block)

块级元素可以嵌套块级元素和行级元素（上下左右都调整）
行级元素只能嵌套行级元素（只调整左右）
	
垂直方向外边距:取较大值
水平方向外边距:取两个外边距之和
		
margin可以针对单个方向设定,也可以整合,语法同padding

float浮动

float:浮动
	left,right,none
默认情况下:块级元素,宽度整行的宽度,可以设定高度和宽度,height,width
行级元素，如果两个标签间有空格或者回车，显示出的效果会有一个空隙

元素浮动后:默认宽度包裹内容,可以设置宽度和高度，影响后面元素的摆放,
后面元素占据原来这个元素的空间,但是里面的内容不会与浮动元素重叠,围绕这个浮动元素，
浮动元素可以设定margin来保持和周围元素的距离

浮动的实质就是脱离父元素，并且是一种动态的存在，可以随着窗口大小而改变位置

clear:清除浮动,
	left,right,both
	使元素不再和浮动元素位置重叠,而是从不重叠的位置开始摆放
left是指清除与左边浮动重叠的效果，right是清除右边，both是两边

position定位

position:
	static,默认的,摆放元素时,按照元素顺序依次摆放
	absolute,绝对的,
		元素脱离了原来的文档流,
		left,top,right,bottom:设定位置
		如果它的所有父级元素position都是默认的static,此时是相对于浏览器界面定位
		如果它的父级元素有position不使用static,此时它是相对离它最近的非static父级元素定位
		
		补充:
			如果元素原来是行级元素,会变成块级元素
			元素的宽度默认调整为包裹内容
			
		
	relative,相对的,
		元素可以相对自己原来的位置做偏移,没有脱离原来的文档流,
		它的偏移不会影响其它元素,
		
		可以把relative和absolute结合起来使用,使子元素在父元素内随意摆放
		
	fixed,相对浏览器绝对布局

static除外的position实际上相当于把标签分层了

z-index:
	改变重叠元素的上下位置,
	值大的覆盖值小的，默认值为0