css笔记

css布局

  /* 字体粗细   normal:400  bold:700 bolder*/
 font-weight: 700;

/* 设置字体 */
font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;

 /* 字号大小 */
 font-size: 24px;

/* 文字样式 italic斜体*/
font-style: italic;

 /* 复合属性 必须保留：fint-size 和 font-family */
/* font: font-style font-weight font-size/line-heigh font-family; */
font: italic 400 24px "黑体";
font: 15px "宋体";

 /* 文本颜色 */
color: #ccc;

 /* 文本对齐 :水平对齐方向 （left，right，center）*/
text-align: center;

 /* 文本装饰：none(取消划线) underline(下划线)、line-through(删除线)、over-line(上划线) */
text-decoration: line-through;

 /* 文本缩进 */
text-indent: 10px;
/* em相对单位，就是当前元素的1个文字大小 */
text-indent:2em;  

 /* 行间距:控制文字行与行之间的距离 */
line-height: 23px;

/* none:隐藏元素  block：转为块级元素或者显示元素 */
display: block;

/*visible:显示元素   hidden:隐藏元素（但是保留位置）*/
visibility: hidden;

/* 对溢出的部分显示隐藏
visible:显示元素
hidden:隐藏超出的部分
auto:在需要的时候添加滚动条（超出则添加滚动条, 没超出则不显示滚动条）
scroll:显示滚动条(是否溢出都显示滚动条)*/
overflow: scroll;

  /* 取消表单边框线 */
outline: none;

 /* 取消textarea拖动放大 */
resize: none;

/* bottom:底线对齐
middle:中线对齐
top:顶线对齐
baseline:基线对齐（默认）*/
vertical-align: top;

 /* 单行文本显示省略号
1.nowrap ： 一行如果显示不下，强制不换行 
2.overflow:hiden;
3.text-overflow:ellipsis;//文字溢出时候用省略号显示  */
white-space: nowrap;

 /* 选择ul中的第一个元素  */
 ul li:first-child 

/* 选择ul中的最后一个li */
ul li:last-child 

/* 选择ul中的第6个li*/
ul li:nth-child(6)

/* ul li:nth-child(n)选择器
n可以是个数字，
  n也可以是个公式：括号中必须写 字母 n
  nth-child(n)：写n直接从0开始计算每次加1（即选择所有）
  nth-child(2n)：选出偶数的子元素 等价与 even
  nth-child(2n+1)：选出奇数的子元素 === odd
  nth-child(5n)：选出5、10、15...的子元素
  nth-child(n+5)：从第5个开始（包括5）到最后
  nth-child(-n+5)：前5个（包含第5个）
  n也可以是关键字：even偶数，odd奇数*/
nth-child(n)

 /* 
 content-box:盒子大小为 width+padding+border 默认的
border-box: 盒子大小为width （padding和border不算）*/
box-sizing: border-box;

/* css3的图片模糊（滤镜） 数值越大图形越模糊*/
filter: blur(5px);

 /* calc函数 可以进行加减乘除 */
width: calc(100% - 80px);
width: calc(50px + 30px);

 /* transition: 做动画的属性  动画时间  运动曲线  何时开始(延时时间); */
transition: width 1s ease-out 0s;

---

flex布局

 /*设置主轴的方向 
       row:从左到右  row-reverse:翻转，从右到左
       column：从上到下  column-reverse:翻转，从下到上*/
flex-direction: column-reverse;

 /*  设置主轴上的子元素排列方式 
       flex-start:从左侧（上部）开始布局
       flex-end:从右侧（下部）开始布局
       center:居中对齐布局
       space-around:平分剩余空间
       space-between:先两边贴边，在平分剩余空间 */
 justify-content: space-between;

 /*设置子元素是否换行
       wrap:换行
       nowrap:不换行 */
 flex-wrap: nowrap;

 /*  设置侧轴上的子元素排列方式（多行）
       flex-start:从左侧（上部）开始布局
       flex-end:从右侧（下部）开始布局
      center:居中对齐布局
       stretch:拉伸，但是子盒子不要给高度 */
 align-content: stretch;

 /* 设置侧轴上的子元素排列方式（单行）
      flex-start:从左侧（上部）开始布局
      flex-end:从右侧（下部）开始布局
      center:居中对齐布局
     space-around:平分剩余空间
     space-between:先两边贴边，在平分剩余空间
      stretch:拉伸，但是子盒子不要给高度 */
 align-items: flex-start;

 /*  复合属性，相当于同时设置了flex-direction和flex-warp
          第一个参数：主轴方向
          第二个参数：设置是否换行 */
 flex-flow: row wrap;

 /*  flex属性：子项目占用的父控件的剩余空间的百分比 */
   flex: 1;

 /* 控制某一个子元素在侧轴上的排列方式 
     flex-start:从左侧（上部）开始布局
    flex-end:从右侧（下部）开始布局
    center:居中对齐布局
    space-around:平分剩余空间
    space-between:先两边贴边，在平分剩余空间
    stretch:拉伸，但是子盒子不要给高度*/
 align-self: flex-end;

 /* 设置子项的排列顺序，数值越小越靠前 */
 order: 3;

---

总结：

1.复合选择器总结

1.png

元素显示模式

2.png

块级元素

~
、
、
、
、
、

行内元素

、、、、、、、、、

行内块元素

、、

元素转换：

行内 => 块级 ：display: block;
块级 => 行内 ：display: inline;
(行内/块级) => 行内块 ：display: inline-block; (既有行内元素特点，又有块级元素特点)