css选择器

基础选择器

• 标签选择器
• 类选择器
• id选择器
• 通配符选择器

复合选择器

• 后代选择器

  • 可以选择所有后代，儿子，孙子，重孙

  •   元素1(父) 元素2(子) { 样式 }
    

• 子选择器

  • 只能选择作业某个元素的最近一级子元素, 只能选儿子

  •   .nav > a { color: red }
    

• 并集选择器

  • 并集选择器可以选择多组标签，同时为他们定义相同样式。通常用于集体声明

  •   元素1, 元素2 { 样式 }
    

• 伪类选择器

  • 伪类选择器，用于向某些选择器添加特殊的效果
  • 伪类选择器书写最大的特点是用冒号表示
  • 链接伪类声明顺序
    • link, visited, hover, active
  • focus伪类选择器，用于获取焦点的表单元素

Emmet语法

• 生成标签直接输入标签名tab键即可，比如div然后tab，就可以生成
• 生成多个可以使用*
• 父子级关系+
• 带id或类名的，直接 div#id-name ，div.class-name
• div.class$ *5
• div{内容}*5

元素显示模式

什么是元素的显示模式

• 元素显示模式就是元素以什么方式进行显示
  • 块元素和行内元素

元素显示模式的分类

​ 块元素：h1,p,div,ul,ol,li

​ 1自己独占一行

​ 2高度，宽度，外边距以及内边距都可以控制

​ 3宽度默认是容器（父级宽度）的100%

​ 4是一个容器及盒子，里面可以放行内或者块元素

​ 文字类的元素内不能使用块级元素

​ 行内元素：a, span

​ 1相邻行内元素在一行上，一行可以显示多个

​ 2高，宽直接设置无效

​ 3默认宽度就是它本身内容的宽度

​ 4行内元素只能容纳文本或其他行内元素

​ 特殊情况链接a标签可以放块级元素，但是给a转换一下块级模式最安全

​ 行内块元素：img, input, td

​ 和相邻行内元素（行内块）在一行上，但是他们之前会有空白缝隙，一行可以显示多个（行内元素特点

​ 默认宽度就是它本身内容的宽度（行内元素特点）

​ 高度，行高，外边距以及内边距都可以控制 （块级元素特点）

元素显示模式的转换

​ 特殊情况下，我们需要元素的转换，类似a标签转换

​ display:block 显示块级元素

​ display:inline 转为行内元素

​ display:inline-block

背景

background-color:color background-image: url()

background-repate:no-repate

background-position: x y;方法名词精确单位

css权重

权重的叠加

复合选择器有权重叠加的问题

ul li{ 0001 + 0001
	color: green;
}

li{ 0001
	color:red;
}

盒子模型

边框会加大盒子

padding会影响盒子实际大小，变大

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子的width/height

margin让块级盒子水平居中

​ 盒子必须指定了宽度（width)

​ 盒子的边外距为auto

​ 对行内和行内块无效，

​ 行内和行内块可以给其父元素添加text-align:center;

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决：

​ 给父元素添加一个边框 border

​ 给父元素添加一个内边距

​ 为父元素添加overflow:hidden;

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并（外边距的塌陷）的问题

清除内外边距

不同浏览器带有不同的内外边距

​

*{
	padding:0;
	margin:0;s
}

行内元素，尽量只设置左右内外边距，不要设置上下内外边距

传统网页布局的三种方式

普通流（文档流）

浮动

​ 浮动的典型应用，可以让多个块级元素一行内排列显示

​ 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

​ 什么是浮动：将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

​ float:left/right

​ 浮动特性：

​ 1、浮动元素会脱离标准流，不再保留原先的位置

​ 2、如果 多个盒子都设置的浮动，浮动的元素会一行内显示并且顶端对齐排列,一行内显示不完会换行

​ 3、浮动的元素会具有行内块元素的特性

​ 4、浮动的元素不会压住标准流下的文字

为了约束浮动元素的位置，我们网页布局一般是先准备一个父盒子，浮动的元素就在父元素中间

​ 浮动和标准流的父盒子搭配

​ 一个元素浮动了，理论上其他的兄弟元素也要浮动

​ 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

问题：我们浮动元素有一个标准流的父元素，都设置了高度，但是所有的父盒子都必须有高度吗

理想状态，子元素撑开元素，但是不给父元素高度会有问题吗

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。

父盒子就需要清除浮动

• 清除浮动的本质就是清除浮动元素造成的影响

• 如果父盒子本身有高度，则不需要清除浮动

• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

clear: 属性值

清除浮动策略：闭合浮动

清除浮动方法

1、额外标签法也称为隔墙法，是w3c推荐的做法

在浮动的末尾添加一个标签(要求块级元素)清除浮动
.clear{
	clear:both
}

2、父级添加overflow属性

将其属性值设置为hidden、auto和scroll
子不教，父在过，注意是给父元素添加代码

3、父级添加after伪元素

.class:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

​ after会在元素最后添加一个元素

4、父级添加双伪元素

before,after

为什么要清除浮动

父级没高度

子盒子浮动了

影响下面布局了，我们就应该清除浮动了

定位

为什么需要学习定位

在盒子里面顺意流动，并且可以压住其他盒子。

定位 = 定位模式+边偏移

定位模式

​ 由position属性来设置

​ static静态定位

​ relative相对定位

​ absolute绝对定位

​ fixed固定定位

边偏移：

​ top/bottom/left/right

相对定位的特点：

​ 1、它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）

​ 2、原来在标准流的位置继续占有，后面的例子仍然以标准流的方法对待它（不脱标，保留位置）

​ 3、典型的应用是给绝对定位当爹的

绝对定位 absolute

​ 1、绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹的）

​ 2、如果 没有父元素或父元素没定位，则以document来定位

​ 3、如果父元素有相对，固定，绝对定位。则以最近一级的有定位 祖先元素为参考点移动位置

​ 4、绝对定位不占有标准流的位置（脱标）

子绝父相

​ 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

​ 父盒子需要加定位限制盒子在父盒子内显示。

​ 父盒子布局时，需要占有位置，因此父亲只能是相对定位

固定定位 fixed

​ 固定定位是元素固定于浏览器可视区的位置

​ 1、以浏览器的可视窗口为参照点移动

​ 2、跟父元素没有任何关系

​ 3、不随着滚动条滚动

​ 4、固定位置不占有原先的位置

粘性定位 sticky

​ 1、以浏览器的可视窗口为参照点移动元素（固定定位特点）

​ 2、粘位定位 占有原先的位置（相对定位 特点)

​ 3、必须添加top、left、right、bottom其他一个才有效

​ 兼容性较差，ie不支持

绝对定位的元素会压住标准流下的文字

元素的显示与隐藏

让一个元素在页面中隐藏或显示出来

display：none:隐藏对象，不占有原先位置

display:block:设置为块级元素，并显示出来

visibility:visible;元素可视，继续占有原来的位置

visibility:hidden:隐藏

overflow 溢出

如果有定位的盒子，请慎用overflow:hidden因为它会隐藏多余的部分

css属性书写顺序

• 布局定位属性：display/position/float/clear/visibility/overflow
• 自身属性:width/height/margin/padding/border/background
• 文本属性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
• 其他属性(css3):content/cursor/border-radius/box-shadow/text-shadow/backgr

css3过渡 transition 要过滤的属性 花费时间 运动曲线 何时开始

2D转换

​ transform是css3中具有颠覆性的特性之一，可以实现元素的位移，旋转，缩放

​ 可以简单理解为变形

• transalte 移动:transform:transalte(x,y)
  • 不会影响到其他元素的位置
  • transalte可以使用百分号，是盒子自身宽度的百分比计算的
  • 对于行内元素无效
• rotate 旋转：transform:rotate(20deg)
  • 正值顺时针，负值逆时针
  • 旋转中心是元素的中心
  • transform-orgin：x y可以设置旋转中心点的位置
• scale 缩放:transform：scale(x,y) 倍数
  • 优势：不会影响其他盒子，可以设置绽放中心点

同时使用变形，有顺序问题

当我们同时有位移和其他的属性时，要先进行位移

CSS3动画

先定义动画

@keyframes move {
	//开始位置
    0% {
        transform: translateX(0px);
    }
	//结束位置
    100% {
        transform: translateX(1000px);
    }
}

再使用动画

div {
	//动画名称
    animation-name: move;
    //持续时间
    animation-duration: .6s;
}

动画的属性

@keyframes 定义动画
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 动画属性简写
animation-name: n ame; 动画名称
animation-duration:1s; 花费的时间
animation-timing-function: ease;速度曲线
animation-delay: 0; 动画何时开始
animation-iteration-count: 1;还有infinite，动画播放次数
animation-direcation:normal; 反方向播放alternate
animation-fill-mode:backwards; 动画结束后的状态backwards，可以停留在结束状态：forwards
animation-play-state:running; 规定动画是否运行或暂停，默认是running,还有paused

3D转换

三维坐标系

x轴：水平向右 注意：x右边是正值，左边是负值

y轴：垂直向下 注意：y下面是正值，上面是负值

z轴：垂直屏幕 注意：往外面是正值，往里面是负值

主要知识点：transfrom:

• 3D位移：translate3d(x,y,z)

  • translateZ沿着Z轴移动
  • translateZ后面的单位我们一般跟px

• 3D旋转：rotate3d(x,y,z)

• 透视：perspective

  • 在2d平面产生近大远小视觉立体，但是只是效果二维的
    如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
    模拟人类的视觉位置，可以为安排一只眼睛去看
    透视我们也称为视距，视距就是人的眼睛到屏幕的距离
    距离视觉点越近的在电脑平面成像越大，越远成像越小
    透视的单位是像素
    

  • 透视写在观察元素的父盒子中

  • 

• 3D呈现：transfrom-style

浏览器私有前缀

• -moz-：代表firfox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari、chrome私有属性
• -o-：代表Opera私有属性

移动端布局

移动端基础

​ 国内浏览器主要使用webkit内核开发

​ 手机屏幕尺寸非常多，

视口

​ 视口就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口

​ meta视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0,user-scalable=no">

二倍图

物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，这是厂商在出厂时就设置好了
• 我们开发时候的1px不一定等于1物理像素的
• pc端页面，1个px等于1个物理像素的，但是移动端就不尽相同
• 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
• 在iphone8中1物理像素等于2个

移动端调试

移动端技术解决方案

移动端常见布局

• 单独制作移动端页面

  • 流式布局(百分比布局)

    流式布局，就是百分比布局，也称非固定像素布局
    通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
    流式布局方式是移动web开发使用的比较常用的布局方式
    max-width: 最大宽度，设定后拉伸到一定程度就不会拉伸了
    min-width: 最小宽度
    max-height: 最大宽度
    min-height: 最小宽度
    

  • flex弹性布局

    • 布局原理

      flex是flexible Box的缩写，意为“弹性而已”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

      当我们为父盒子设为flex而已以后，子元素的float、clear和vertical-align属性失效

      伸缩布局=弹性布局=伸缩盒布局=弹性盒布局

    • 父项属性

      flex-direction：设置主轴的方向

      属性值	说明
      row	默认值从左到右
      row-reverse	从右到左
      column	从上到下
      column-reverse	从下到上

      justify-content：设置主轴上的子元素排列方式

      属性值	说明
      flex-start	默认值 从头部开始，如果主轴是x轴，则从左到右
      flex-end	从尾部开始
      center	在主轴居中对齐（如果主轴是x轴则水平居中）
      space-around	平分剩余空间
      space-between	先两边贴边再平分剩余空间（重要）

      flex-wrap：设置子元素是否换行(默认不换行)

      属性值	说明
      nowrap	不换行
      wrap	换行

      align-content：设置交叉轴的子元素的排列方式（多行，换行情况）

      属性值	说明
      flex-start	默认值在交叉轴的头部开始排列
      flex-end	在交叉轴的尾部开始排列
      center	在交叉轴的中间显示
      space-around	子项在交叉轴一部分剩余空间
      space-between	子项在交叉轴先分布在两头，现一部分剩余空间
      stretch	设置子项元素高度平分父元素高度

      align-items：设置交叉轴的子元素的排列方式（单行）

      属性值	说明
      flex-start	从上到下
      flex-end	从下到上
      center	挤在一起居中（垂直居中）
      stretch	拉伸（默认值）

      flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

      flex-flow: column wrap;
      

    • 子项常见属性

      flex属性定义子项目分配剩余空间，用flex来表示占多少份

      flex:1
      

      align-self:控制子项目自己在交叉轴上的排列方式，可覆盖align-items属性，默认值 为auto,表示继承父元素的alian-items属性，属性写法同align-items

      order属性定义项目的排列顺序，数值越小越靠前，默认为0

  • less+rem+媒体查询布局

    页面布局文字能随着屏幕大小变化而变化？

    流式布局和flex布局主要是针对 宽度布局，那高度如果设置？

    怎么样让屏幕发生变化的时候元素高度和宽度等比缩放？

    • rem基础

      rem是一个相对单位，类似于em,em是父元素字体的大小，不同的是rem的基准是相对于html元素的字体大小，比如，根元素（html)设置font-size=12px;非根元素设置width:2rem，则换成px就是24px

      rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

    • 媒体查询

      媒体查询可以通过不同的尺寸设置不同的样式

      @media mediatype and|not|only(media feature){
      	css-code
      }
      用@media开关
      mediatype 媒体类型：all所有设置，print打印设备，scree用于电脑屏幕，平板电脑，智能手机等
      and:可以将多个媒体特性连接到一起，相当于且的意思
      media feature:媒体特性
      	all
      	max-width:800px
      	min-width:100px
            	
      @media scree and (max-width:800px){
      	body{
      		font-size:16px
      	}
      }
      @media scree and (max-width:800px) and (min-width:1200px){
      	body{
      		font-size:16px
      	}
      }
      

      媒体查询引入资源

      <link rel="stylesheet" href="index.css" media="scree and (min-width:320px)"
      

    • less基础

    • rem实际开发适配方案

      1、假设设计稿是750px

      2、假设我们把整个屏幕划分为15等分（也可以是10等分）

      3、每份作为html字体大小，这里就是50px

      4、那么在320px设备的时候，字体大小为320/15就是21.33px

      5、用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的

      6、比如我们以750为标准设计稿

      7、一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem就是2rem * 2rem比例是1：1

      8、320屏幕下，html字体大小为21.33，则2rem=42.66px此时宽高 都是42.66但是宽和高的比例还是1:1

      9、但是已经能实现不同屏幕下，页面元素盒子等比缩放的效果

    • 元素取值方法

      最后公式：页面元素的rem值 =页面元素值（px) / (屏幕宽度 / 划分等份)

      屏幕宽度/划分的份数就是html font-size的大小

      或者：页面元素的rem值=页面元素值(px) / html font-size字体的大小

​ 响应式页面兼容移动端

• 使用媒体查询针对不同的终端，进行适配

• 媒体查询

  • 超小屏幕（手机） < 768px
  • 小屏设备（平板） >=768px ~ <992px
  • 中等屏幕（桌面显示器）>=992px ~ <1200px
  • 宽屏设备（大桌面显示器）>=1200px

• 响应式布局窗口

  响应式需要一个父级做为布局窗口，来配合子级元素来实现变化效果

  超小屏幕（手机） < 768px ：设置宽度为100%

  小屏设备（平板） >=768px ~ <992px ：设置宽度为750px

  中等屏幕（桌面显示器）>=992px ~ <1200px: 宽度设置为970px

  宽屏设备（大桌面显示器）>=1200px: 宽度设置为1170px

• bootstrap