web前端第二周笔记

弹性盒子

1.标准盒子模型 box-sizing: content-box

设置后盒子会随着padding的增大而增大，内容框大小不变，会撑大盒子

2.IE盒子模型||怪异盒子模型 box-sizing: border-box

设置后盒子不会随着padding的增大而增大，边距会缩小内容框，不会撑大盒子，但是当两边距大于盒子长宽时会撑大盒子

flex 属性用于指定弹性子元素如何分配空间

1.flex-direction 属性指定了弹性子元素在父容器中的位置

     flex-direction: row | row-reverse | column | column-reverse
     
     row      横向从左到右排列（左对齐），默认的排列方式。

	 row-reverse  反转横向排列，（右对齐），从后往前排，最后一项排在最前面
	 
	 column  纵向排列
	 
	 column-reverse  反转纵向排列，从后往前排，最后一项排在最上面

2.align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

       align-items: flex-start | flex-end | center | baseline | stretch

     - flex-start： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
     
	 - flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
	 
	 - center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
	 
	 - baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
	  
	 - stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
	 - 但同时会遵照'min/max-width/height'属性的限制

3.内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

        justify-content: flex-start | flex-end | center | space-between | space-around

     - flex-start ： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，
     - 而后续弹性项依次平齐摆放。

	 - flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，
	 - 而后续弹性项依次平齐摆放。
	 
	 - center： 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
	 
	 - space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。
	 - 否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，
	 - 然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
	 
	 - space-around： 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，
	 - 则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），
	 - 同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）

4.flex-wrap 属性用于指定弹性盒子的子元素换行方式

       flex-wrap: nowrap|wrap|wrap-reverse

     - nowrap 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
      
	 - wrap  弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
	 
	 - wrap-reverse  反转 wrap 排列。

5.align-content 属性用于修改 flex-wrap 属性的行为，类似于 align-items，但它不是设置弹性子元素的对齐，而是设置各个行的对齐

       align-content: flex-start | flex-end | center | space-between | space-around | stretch
       
     - stretch - 默认。各行将会伸展以占用剩余的空间。
     
	 - flex-start - 各行向弹性盒容器的起始位置堆叠。
	 
	 - flex-end - 各行向弹性盒容器的结束位置堆叠。
	 
	 - center -各行向弹性盒容器的中间位置堆叠。
	 
	 - space-between -各行在弹性盒容器中平均分布。
	 
	 - space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半

6. flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

1.flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式

       flex-flow: flex-direction flex-wrap

2.flex-direction 属性规定灵活项目的方向。

       flex-direction代表的值有：row|row-reverse|column|column-reverse

3.flex-wrap 属性规定灵活项目是否拆行或拆列

       flex-wrap代表值有：nowrap|wrap|wrap-reverse

7.order弹性子元素，排序，用整数值来定义排列顺序，数值小的排在最前面，可以 为负值，属性设置弹性容器内弹性子元素属性

       .a {order: -1;}

8.align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式;注：给子元素设置

       align-self: auto | flex-start | flex-end | center | baseline | stretch
      
     - auto  如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
     
	 - flex-start  弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

	 - flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

	 - center  弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

	 - baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

	 - stretch  如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
	 - 但同时会遵照'min/max-width/height'属性的限制。

2D移动、缩放、转动、拉长或拉伸

1. transform:/注：只设置一个X或Y

       translate(x,y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动---------translateX(x),translateY(y)
       
       origin(x,y)设置旋转中心点---------transform-originX(X),transform-originY(Y)
       
       rotate()在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转--------rotateX(),rotateY()
       
       scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 缩放：设置为负数镜像方式放大缩小--scaleX(X),scaleY(Y)
       
       skew(Xdeg,Ydeg)包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
       skewX(Xdeg)
	   skewY(Ydeg)
	   
	   transform:matrix(X缩放,Y倾斜,X倾斜,Y缩放,X平移,Y平移);
   	   matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能

2.transition 过渡

       transition: 1s;

background 设置背景属性

        background ： 
       [background-color] 
       [background-image] 
       [background-position]
       [background-size] 
       [background-repeat] 
	   [background-attachment] 设置背景图像是否固定或者随着页面的其余部分滚动
	   [background-clip]  裁剪区域
	   [background-origin] 位置区域

1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向（默认情况：从上到下）

       background-image: linear-gradient(颜色, 颜色,...)
       
       从左到右to right|left|top|bottom
       background-image: linear-gradient(to right,red,orange)
       
       对角方式to bottom right
       background-image: linear-gradient(to bottom right,red,orange)
       
       设置角度90deg
	   background-image: linear-gradient(90deg,red,#000)
	   
	   使用透明度
	   background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))
	   
	   重复线性渐变
	   background-image: repeating-linear-gradient(red,black 20%,green 10%)
	   
	   径向渐变（Radial Gradients）- 由它们的中心定义
	   background-image: radial-gradient(形状 大小 at 位置, 颜色, ...,颜色)， 形状它可以是值 circle 或 ellipse默认值
	   大小属性的值：
	   farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
	   closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
	   closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
	   farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

设置盒子圆角和阴影

1.border-radius: 左上角，右上角，右下角，左下角；

        border-radius: 10px 20px 30px 50px;

2.box-shadow: 水平 垂直 大小 颜色;盒子阴影

        text-shadow: 5px 5px 5px #FF0000;

本周内容到此结束，咱们下周再见