水平居中设置-定宽块状元素

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

   width:200px;/*定宽*/
   margin:20px auto; /* margin-left 与 margin-right 设置为 auto */

也可以写成

margin-left:auto;
margin-right:auto;

水平居中设置-行内元素

text-align:center

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )

给子元素设置flex占比

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

使用align-items属性设置纵轴排列方式

align-items: flex-start | flex-end | center | baseline | stretch;本属性定义了项目在交叉轴上的对齐方式。

align-items: flex-start (默认值，左对齐)

align-items: flex-end 右对齐(交叉轴的终点对齐)

align-items: center   交叉轴的中点对齐

align-items: baseline   项目的第一行文字的基线对齐。

align-items: stretch （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度

使用justify-content属性设置横轴排列方式

justify-content: flex-start | flex-end | center | space-between | space-around;本属性定义了项目在主轴上的对齐方式。

justify-content: flex-start  左对齐（交叉轴的起点对齐）

justify-content:flex-end  右对齐

justify-content:center 居中

justify-content:space-between 两端对齐，项目之间的间隔都相等。

justify-content:space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

CSS定义了一组定位（positioning）属性来支持层布局模型。

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

target属性规定在何处打开链接，_blank是在新窗口打开

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。

  margin:20px 10px 15px 30px;（简写）

  margin-top:20px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:30px;

padding和margin的区别，padding在边框里，margin在边框外。

元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。

  padding:20px 10px 15px 30px;（缩写）

  padding-top:20px;
  padding-right:10px;
  padding-bottom:15px;
  padding-left:30px;

元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。

border-radius: 20px 10px 15px 30px;（缩写） 

   border-top-left-radius: 20px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 15px;
   border-bottom-left-radius: 30px;

需要特别注意的：一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：

       width: 200px;
       height: 200px;
       border: 5px solid red;
       border-radius: 100px;（也可以写为50%）

px像素

solid 固体

border 边框

font 字形

font-size 改变字体大小（*px）

font-weight 改变字体粗细(bold粗)

font-familt 改变字体（宋体）

font-line-height（行高）

font-style 正常（normal）

                斜体（italic）

                倾斜的字体（oblique）

改变字体颜色的三种方法

1.p{color:red;}直接写出颜色英文

2.p{color:rgb(133,45,200);}

p{color:rgb(20%,33%,25%);}（每一项为0-255/0-100%）
                                                利用rgb合成色

3.p{color:#00ffff;}十六色图标

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

border:2px  solid  red;(缩写）

   border-width:2px;
   border-style:solid;（样式）
   border-color:red;

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-width（边框宽度）中的宽度也可以设置为：

thin | medium | thick（但不是很常用），最常还是用像素（px）。

solid框架大小，padding与线体间距，line-height与字的高度，text-indent与左边的宽距

display:none

隐藏