css布局

1 .盒子布局

 

注：以上标签可以不使用后面的top等，直接输入是从top顺时针赋值 

1.padding——内边距

2.margin——外边距

3.border——边框

CSS border 属性https://www.w3school.com.cn/cssref/pr_border.asp

 border-width

 

 还可以给像素

border-style

 2.元素分类

 1.块级元素：独占一行，可以设置宽和高 如div p hn 等

2.内联元素：不会自动换行，设置宽和高的时候是不起作用的 如span a等

3.块级元素和内联元素可以进行相互转换： display

 CSS display 属性https://www.w3school.com.cn/cssref/pr_class_display.asp

注意：

css隐藏元素的方式：

①display:none;

②width:0; height:0;

3.浮动布局

 通过设置float属性进行布局

none——不浮动

left——对象向左浮动，而后面的内容会流向对象的右侧（相当于移开的位置后面有元素补位）

right——对象向右浮动，而后面的内容会流向对象的左侧（相当于移开的位置后面有元素补位）

注：如元素顶格再加上float属性后面属性可能会重叠

清除浮动： clear（相当于不让元素在此属性附加浮动）

 CSS clear 属性https://www.w3school.com.cn/cssref/pr_class_clear.asp

 4.定位布局

 position 属性

格式:

p{
  position:absolute;
  left:100px;
  top:150px;
 }

static : 默认值

 fixed相当于跟着界面进行移动

absolute: 绝对定位，会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上的 值相较于父级元素的绝对定位，如果不存在这样的父级元素，相较于body定位.

relative: 相对定位，不会将对象从文档流中分离出来，通过设置Left right top bottom 四个方向上 的值进行相对定位（相较于上一个标签进行定位）

注意：div等块级元素会自动换行，相对定位会是原本位置为原点进行定位

 5.其他的属性

①overflow

 CSS overflow 属性https://www.w3school.com.cn/cssref/pr_pos_overflow.asp

3种隐藏元素的方式： 1、display:none; 2、width:0 height:0; 3、overflow:hidden;

②zoom

对图片进行放大和缩小的一个属性，一般取1或者100%的时候是按照原比例显示的

 6.css3 弹性盒子

弹性盒子——display:flex;（要写此语句才能应用弹性盒子）

弹性盒子是一种特殊的块，不自动换行，挤满整个空间才换行

 主要的属性：

●flex-direction:弹性盒子中子元素的排列方式

●flex-wrap:设置子元素超过父元素后是否自动换行

●flex-flow:flex-direction和flex-wrap的简写（相当于可以写两个的属性）

●align-items：设置弹性盒子在垂直（y轴）上的对齐方式

●align-content:对flex-wrap的一个修改，和align-items相似，但不是设置对齐方式（相当于多行之间的距离）

●justify-content:水平（x轴）对齐弹性容器的项目，当项目不占用主轴上所有可用空间时

1.flex-direction

 CSS flex-direction 属性https://www.w3school.com.cn/cssref/pr_flex-direction.asp

2.flex-wrap

 CSS flex-wrap 属性

3.flex-flow

 CSS flex-flow 属性

 4.align-items

 5.align-content 

 

 6.justify-content

 弹性盒子扩展

display:flex;（要写此语句才能应用弹性盒子） 

1.规定弹性项目的顺序——order

eg:下面的div排序按照order给的数值

display: flex;
.a{order:2;}
.b{order:3;}
.c{order:1;}

2.规定在相同的容器中，项目相对于其余弹性项目的增长量——flex - grow:数值;

eg： a:七分之一宽度;b:七分之五宽度;c:七分之一宽度;（相当于宽度）

display: flex;
.a{
	flex-grow:1;
	}
.b{
	flex-grow:5;
	}
.c{
	flex-grow:1;
	}

3.固定在相同的容器中，项目相对于其余弹性项目的收缩量——flex-shrink: 数值;

（盒子空间不足时子元素如何收缩）

eg:b的宽缩为100的一半“不一定是一半，一般会进行挤压”（只在元素挤压时应用，给0时会保持原值，挤压其他元素）

display: flex;
	.main{
		width: 200px;
		height: 100px;
		background: green;
		display: flex;
	}
    .a{
		width: 100px;
	}
	.b{
		width: 100px;
		flex-shrink: 2;
	}
	.c{
		width: 100px;
	}

4.规定弹性项目的初始长度——flex-basis:数值px;（其实是宽）

flex

CSS flex 属性

 flex:数值;同flex-grow

5.指定弹性容器内所选项目的对齐方式——align-self

 CSS align-self 属性