CSS基础

对于元素的样式可以在标签中直接设置，也可以用css进行设置

1. 在标签的style属性进行设置

   例：

   <div style="background-color:#245a2;height:48px"></div>

2. CSS选择器详细参考文档

• id选择器（#id）

<!--写在head标签内-->
<style>
    #i3{
        background-color:#245a2;
        height:48px;
    }
</style>

<div id="i3"></div>

• 类选择器（.c1）

<!--写在head标签内-->
<style>
    .c1{
        background-color:#245a2;
        height:48px;
    }
</style>

<div class="c1"></div>

• 标签选择器（div）

<!--写在head标签内-->
<style>
    div{
        background-color:#245a2;
        height:48px;
    }
    p{
        font-size=18px;
    }
</style>

<div>所有的div被设置颜色和高度48px</div>
<p>所有的p标签被设置字体大小</p>

4. CSS注释/* 注释内容 */

5. 关联选择器(空格)

   <style>
   #i3 span{
   ....
   }
   /* 对id为i3的元素内包含的span设置样式
   
   span div{
       ...
   }
   /* 对所有span标签内的div设置样式 */
   
   .c1 div{
       ...
   }
   /* 对class属性为c1的元素内的div设置样式 */
   </style>

6. 组合选择器（英文逗号）

   <style>
   #i3,.c1,span{
       ...
   }
   /* 同时对id为i3的元素，类为c1的元素，span标签设置样式 */
   </style>

7. 属性选择器(中括号)

   <style>
   
   p[name]{
       ...
   }
   /* 对具有name属性，不管值是什么，设置样式 */
   input[type='text']{
       ...
   }
   /* 对所有属性type='text'的input标签设置样式 */
   .c1[name='limich']{
       ...
   }
   /* 对所有属性name='limich'且class为c1的标签设置样式 */
   [data~="cp"]{
       ...
   }
   /* 对具有data属性，且值包含cp的元素设置样式 */
   </style>

CSS优先级

• 标签中的style属性>head标签中的选择器
• class="c1 c2"有重复设置的样式时，按head标签中c1 c2 的编写顺序，写在后的优先级高（后面的覆盖前面的）

写在文件内的CSS

• 在head标签中引用<link rel="stylesheet" herf="*.css" />

---

字体大小，水平居中，垂直居中等

• font-size:16px 字体大小
• text-align:center 水平居中
• line-height:XXpx 适应居中，把文字放置在XXpx高度的中间位置，设置时XX应和元素高度相同。
• color 字体颜色
• font-weight 加粗设置

display

行内标签：不可设置高度、宽度、边距padding margin


块级标签：可以设置高度、宽度、边距padding margin

• display 设置为inline，将标签设置为行内标签
• display 设置为block，将标签设置为块级标签
• display 设置为inline-block，
  • 具有行内标签属性，默认不可设置高度宽度
  • 具有块级标签属性，可设置高度宽度
• display:none 让标签消失

---

伪元素

:hover

• 鼠标停留时的样式

  a:hover{
      ...设置a标签鼠标停留时的样式
  }

  background

• background-image:url(‘image/x.gif’) 背景图片，默认自动堆叠
• background-repeat:堆叠方式，no-repeat(不堆叠)，repeat-x(横向堆叠)，repeat-y(纵向堆叠)
• background-size:背景图片大小
• background-positon-x:背景图片X轴偏移
• background-position-y:背景图片Y轴偏移
• 简写：background:颜色 url() X偏移 Y偏移 堆叠方式
• background-origin:图片在元素内（盒子模型内）哪里开始显示，border-box;图片从边框左上角开始显示|padding-box;从内边距左上角开始显示|content-box;从内容左上角开始显示
• background-clip：图片在哪个位置显示,border-box;在边框左区域显示|padding-box;在内边距区域显示|content-box;在内容区域显示
• background-size:设置背景图片尺寸，contain;设置背景图片按照比例缩放，完整显示|cover;设置背景按照自己的缩放比例铺满，不确定是否完整显示|还可以设置百分比，则会按此比例缩放。

border

• box模型边框，border: 宽度 线型 颜色

边框border:1px solid red(边框宽度1像素，实体，红色)

• border:宽度 样式 颜色
• border-left（对左边框设置），border-top,boeder-right,border-bottom

内外边距

• margin外边距，border外，和其他元素之间的部分，box模型的最外层
• padding内边距，border内，和具体内容之间的部分，也叫填充
  • 两个值，上和下 左和右
  • 三个值，上 左和右 下
  • 四个值，上 右 下 左
  • top right bottom left

边距padding margin

• margin 设置标签的边框外的边距（外边距），设置后标签本身不增加大小
• padding 设置标签内部对于标签本身边框的距离（内边距），设置后标签的大小改变
• 元素的大小 例如高：margin值+边框宽度+padding-top值+height值+padding-bottom值+边框宽度+margin值

---

布局

CSS之position

• position:fixed; 将标签固定在浏览器的某个位置（top,left,right,bottom）
• absolute 绝对定位，常和relative结合使用
• relative 相对定位
• 外层使用relative，子层使用absolute,则子层绝对定位在外层的某个位置

float浮动

• float:left 在上级标签内靠左浮动
• 让标签在父级标签内浮动，在子标签末尾，父标签闭合前加入：<div style="clear:both"></div>

overflow

• 设置标签内容大小超出标签设定大小时的显示方式，hidden（隐藏），auto（自动，滚动条显示）

---

flexbox布局参考文档

• 1、display:flex;父元素设置显示方式
• 2、调整主轴方向flex-direction,默认主轴方向水平
• 3、调整对齐方式
  • justify-content 在主轴上的对齐方式: flex-start靠左对齐,flex-end靠右对齐,center靠中心对齐,space-between 两端对齐，项目之间的间隔都相等, space-around每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。
  • algin-items 交叉轴上的对齐调整，
• 4、align-self控制每个子元素的对齐方式
• flex-basis 控制每个子元素大小
• flex-grow初始值为1，每个item的相对宽度
• flex-shrink决定矩形子元素允许收缩多少，默认为1，每个矩形资源算将随着容器收缩而收缩
• 简写flex: flex-grow flex-shrink flex-basis

grid 网格布局

• CSS Grid 布局完全指南(图解 Grid 详细教程)
• 如何使用 CSS Grid 快速而又灵活的布局

---

尺寸单位

• %百分比
• pt磅（1pt=1/72英寸）
• px像素，计算机上的1个点
• em相对倍数单位
  • 1em等于当前字体尺寸，2em表示2倍尺寸，如果某元素以12pt显示。2em就是24pt
  • em是很常用的单位，它可以自动适应用户所使用的字体，常用于响应式布局
  • 缺点：多层嵌套，计算麻烦
• rem 根元素相对倍数单位
  • 1rem就是根元素字体大小
  • 大部分情况下，根元素就是html
  • 优点：找个共同的祖先，计算方便
• vh vw和视口有关系的百分比尺寸
  • 1vh等于1/100的视口宽度
  • 浏览器高度900px，1vh=900px/100=9px
  • 整个屏幕高度：height: 100vh;

---

CSS动画

转换transform -2D

• transform: [transform-function] *;
  • translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
  • rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
  • scale() 倍数转换，例如：值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
  • skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
  • matrix() 方法把所有 2D 转换方法组合在一起。

转换3D

• rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。例如：transform: rotateX(120deg);
• rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

过渡 transition

• 简写：transition: 过渡属性 过渡耗时 过渡时间曲线 过渡开始延时

transition: width 1s linear 2s;
/* 宽度过渡1秒，线性过渡，延时2秒 */

• transition-property 规定应用过渡的 CSS 属性的名称。
• transition-duration 定义过渡效果花费的时间。默认是 0。
• transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
• transition-delay 规定过渡效果何时开始。默认是 0。

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* 等同上面的简写 */

动画@keyframes

• 创建动画

@keyframes slidin{
    from {
        margin-left: 100%;
        width: 300%;
    }
    to {
        margin-left: 0%;
        width: 100%;
    }
}

/* 另一种写法 */
@keyframes myanima{
    0% {top:0;left:0;}
    25% {...}
    49% {...}
    78% {...}
    100% {...}
}

• 绑定动画到元素

/* 简写形式 */
div {
    animation: myanima 5s linear 2s infinite alternate;
}

/* 完整形式 */
div{
animation-name: slidin; /* @keyframes 动画的名称。 */
animation-duration: 5s; /* 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 */
animation-timing-function: linear; /* 规定动画的速度曲线。默认是 "ease"。 */
animation-delay: 2s; /* 规定动画何时开始。默认是 0。 */
animation-iteration-count: infinite; /* 规定动画被播放的次数。默认是 1。 infinite为一直重复播放 */
animation-direction: alternate; /* 规定动画是否在下一周期逆向地播放。默认是 "normal"。 */
animation-play-state: running; /* 规定对象动画时间之外的状态。 */
}

打赏