CSS

Cascading （层叠） Style （样式） Sheets（表）

页面导入样式时，使用link和@import有什么区别
- 1. link属于html标签，而@import是css提供的
- 1. 页面加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
- 1. link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
- 1. link除了引用样式文件，还可以引用图片等资源文件，而@import只引用样式文件
- 1. link支持使用Javascript控制DOM去改变样式；而@import不支持。
px,em,rem的区别
- px:像素,是相对于显示器屏幕分辨率而言的固定的值。
- em:值并不是固定的 , 会继承父级元素的字体大小。
- rem:只是相对于html根元素字体大小
- 详解
  - px：绝对度量单位，就是像素
  - em：相对度量单位，但是计算起来实在费劲。em指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前div的字体大小是12像素，那么1em就是12像素，如果div字体大小是24像素，1em就是24像素。
  - rem：也是和字体相关的相对度量单位，但是，rem是相对于根元素的字体大小进行设置的，如果html元素中的字体大小设置为24px，那么针对任意html内的元素设置1rem，均表示的是24px，大大节省了我们计算字体大小的时间。

CSS选择器

标签选择器
- 标签选择器选中的是页面中所有的该标签
- 例如：p div a
id选择器
- 根据指定id,找到对应的标签
- 例如：#box{ }
- 注意：
  - 1.每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id
  - 2.id名称在当前界面中不能重复
  - 3.使用id选择器，id名称前面必须写上#号
  - 4.id的名称是有一定规范的
  - 4.1.id的名称只能由字母、数字、下划线a-z 0-9 _
  - 4.2.id名称不能以数字开头
  - 4.3 id名称不能是HTML标签的名称（不能是a/h1/img/input..等）
  - 5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
类选择器
- 根据指定类名(class),找到对应的标签
- 例如：.box{ }
- 注意点
  - 1.每个HTML标签都有一个属性叫做class，也就是说每个标签都可以设置类名
  - 2.类名在当前界面中是能重复的
  - 3.使用class类选择器，class名称前面必须写上.(点)
  - 4.类名的命名规范和id的命名规范一样
  - 5.类名就是专门用来给某个特定的标签设置样式的
  - 6.在HTML中每个标签可以同时绑定多个类名
后代选择器
- 找到指定标签的所有后代标签，设置属性
- 例如：div p{ }
- 注意点：
  - 1.两个标签中间用空格来链接
  - 2.后代不仅仅是儿子，也包括孙子，重孙子...只要最终是放到指定标签中的都是后代
  - 3.后代选择器不仅仅可以使用标签名称，还可以使用其他的选择器
子元素选择器
- 找到指定标签中所有特定的直接子元素，然后设置属性
- 例如：div>p{ }
- 注意点：
  - 1.子元素选择器只会查找儿子，而不会查找其他嵌套的标签
  - 2.子元素选择器需要用>符号，并且不能有空格
  - 3.子元素选择器不仅仅可以使用标签，还可以使用其他选择器
  - 4.子元素选择器可以通过>符号一直延续下去
后代选择器和子元素选择器
- ①后代选择器和子元素选择器的区别
  - 1.1.后代选择器使用空格作为连接符号
  - 子元素选择器使用>作为连接符号
  - 1.2.后代选择器会选中指定标签中，所有的特定后代标签，也就是会选中儿子、孙子、重孙子...只要是被放到指定标签中特定标签都会被选中
  - 子元素选择器只会选中指定标签中，所有的特定的直接标签，也就是只会选中特定的儿子标签
- ②后代选择器和子元素选择器的共同点
  - 2.1.后代选择器和子元素选择器都可以使用标签名称、id名称，class名称作为选择器
  - 2.2.后代选择器和子元素选择器都可以通过各自的链接符号一直延续下去
并集选择器
- 两个选择器之间用逗号(,)来隔开
- 例如：div,p{ }
- 注意点：
  - 1.并集选择器不需用，逗号链接
  - 2.选择器可以使用标签名称/id名称/类名

兄弟选择器

①相邻兄弟选择器
- 两个选择器中间用加号(+)来链接
- 例如：div+p{ }
- 注意点:
  - 1.相邻兄弟选择器必须通过+加号链接
  - 2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的
②通用兄弟选择器
- 两个选择器中间用(~)来链接
- 例如：h1~p{ }

image

序选择器
- :first-child 选中同级别中的第一个标签
- :last-child 选中同级别中的最后一个标签
- :nth-child(n) 选中同级别中的第n个标签
- :nth-last-child(n) 选中同级别中的倒数第n个标签
- :first-of-type 选中同级别中同类型的第一个标签
- :last-of-type 选中同级别中同类型的最后一个标签
- :nth-of-type(n) 选中同级别中同类型的第n个标签
- :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
奇数偶数选择器
- 序选择器+奇数
  - nth-of-type(odd){ }
- 序选择器+偶数
  - nth-of-type(even){ }
属性选择器
- 找到input标签里type的值为text的标签
  - input[type=text]{ }
UI元素状态伪类选择器
- 适用于表单验证，例如input可用或不可用
  :enabled
  :disabled

CSS三大特性

一. 继承性
- 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
- 注意点：
  - 1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
  - 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
  - 3.所有元素可继承:visibility和cursor
  - 继承性中的特殊性
    1.a标签的文字颜色和下划线是不能继承的
    2.h标签的文字大小是不能继承的
二. 层叠性
- 作用: 层叠性就是CSS处理冲突的一种能力
- 当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
- 注意点：
  - 层叠性只有在多个选择器选中”同一个标签”, 然后又设置了”相同的属性”, 才会发生层叠性

三. 优先级
- 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
- 优先级判断的三种方式：
  - 1.间接选中就是指继承
    如果是间接选中, 那么就是谁离目标标签比较近就听谁的相同选择器(直接选中)
  - 2.如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
  - 3.不同选择器(直接选中)
    如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠

!important > 行内 > id > class|属性 > 标签选择器 > 通配符 > 继承 > 浏览器默认

!important ——> infinity

行内样式 ——> 1000

id ——> 100

class | 属性 | 伪类 ——> 10

标签 | 伪元素 ——> 1

通配符 ——> 0

注意点：
- 通配符选择器也是直接选中
- 通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好，我们可以从这里查找（http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css）
!important
- 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
- 注意点:
  - 1. !important只能用于直接选中, 不能用于间接选中
  - 1. 通配符选择器选中的标签也是直接选中的
  - 1. !important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
  - 1. !important必须写在属性值得分号前面
  - 1. !important前面的感叹号不能省略
行内元素和块级元素
- 块级元素(div ul ol li dl dt dd h1 h2 h3 h4… p)
- 特点：独占一行。可以设置宽高。如果没有设置宽度,默认和父元素一样宽。
- 行内元素(a span img input select strong b )
- 特点：和其他元素在同一行。不可以设置宽高。如果没有设置宽度,默认和内容一样宽。
display 属性
- none 此元素不会被显示。
- block 此元素将显示为块级元素
- inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
- inline-block 行内块元素。
- flex 弹性布局

父级元素身上的属性

水平排列justify-content: ;

居中

justify-content:center;

居左

justify-content:flex-start;

居右

justify-content:flex-end;

两端对齐

justify-content:space-between;

每个元素左右的距离一样

justify-content:space-around;

垂直排列align-items: ;

居中

align-items:center;

底部

align-items:flex-end;

顶部

align-items:flex-start;

多行的时候垂直排列align-content: ;

居中

align-content:center;

顶部

align-content:flex-start;

底部

align-content:flex-end;

排列方向flex-direction: ;

横向

flex-direction:row;

横向翻转

flex-direction:row-reverse;

竖向

flex-direction:column;

竖向翻转

flex-direction:column-reverse;

如果一条轴线排不下，如何换行flex-wrap: ;

默认不换行

flex-wrap:nowrap;

换行

flex-wrap:wrap;

子级元素身上的属性

平分父元素宽度

flex:1;

flex-grow:1；

也可以直接设置宽度

flex-basis:200px;

CSS盒模型

基本概念
css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
盒模型是有两种标准的，一个是标准模型，一个是IE模型。

image.png

image.png

由上图可看出：

标准模型
- 内容的宽度和高度 = width / height设置的宽和高
- 元素的宽度 = border-left + padding-left + content + padding-right + border-right
- 元素的高度 = 同理可证
- 元素空间的宽度 = margin-left + border-left + padding-left + content + padding-right + border-right + margin-right
- 元素空间的高度 = 同理可证
标准模型的范围包括margin、border、padding、content，并且 contentWidth部分不包含其他部分。
IE模型的范围也包括margin、border、padding、content，和标准W3C盒子模型不同的是：IE盒子模型的contentWidth部分包含了border和pading。

如何设置两种模型?

标准模型

box-sizing:content-box;

IE模型

box-sizing:border-box;

利用boder属性实现三角形

.box{
  width:0;
  height:0;
  border:30px solid;
  border-color:transparent transparent pink  transparent;  //border-color:;的四个值顺序分别为上 右 下 左
}

利用boder属性实现圆

 .box{
  width: 200px;
  height: 100px;
  background: #f66;
  margin: 0 auto;
  /* border-radius: 50%; */
  /*圆*/
  /* border-top-left-radius: 100%; */
  /*扇*/
  border-radius: 100px 100px 0 0;
  /*半圆*/
}

实现对话框

.dialog {
  width: 300px;
  height: 25px;
  line-height: 25px;
  background: #6A6;
  padding: 10px;
  border-radius: 6px;
  color: #fff;
  position: relative;
  margin: 20px auto;
}

.dialog ::before {
  content: '';
  border-left: 0px solid #6A6;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #6A6;
  position: absolute;
  left: -10px;
  top: 10px;
}

<div class="dialog">Hello Word！</div>

垂直外边距合并现象
两个垂直方向相邻的元素相遇时，外边距会合并，合并后的外边距的高度等于外边距较大的那个边距值

image.png

网页布局方式

一标准流(文档流/普通流)
- 1. 标准流只有两种排版方式,垂直和水平
二浮动流
- 1. 浮动流只有一种排版方式,水平。它只能设置某个元素左对齐或者右对齐。
- 注意点：
  - 1. 浮动流中没有居中对齐,也就是没有center这个值
  - 1. 在浮动流中是不可以使用margin:0 auto;的
  - 1. 浮动流中不区分块级元素,行内元素,行内块级元素,都可以设置宽高。
  - 1. 浮动流是一种半脱离标准流的排版方式
浮动元素的脱标(浮动元素脱离标准流)
- 1.标准流中的元素设置了浮动属性之后该元素会变成浮动元素.
- 2.前面一个元素设置浮动属性,后面那个没有设置,前面的元素会盖住后面的元素
  - 只要元素浮动了,这个元素就相当于从标准流当中删除了
  - 注意：浮动的元素不能撑起父元素的高度
  - 在标准流中内容的高度可以撑起父元素的高度,而浮动流中的元素不可以撑起父元素的高度
  - 浮动元素可以做图文混排(如图:flot图)

flot图

清除浮动

浮动的元素不能撑起父元素的高度,所以要清除浮动

方法1.给浮动元素的父元素设置高度就可以清除浮动。(不推荐)
方法2.给后面的元素设置clear:both;属性, 但是添加了clear属性之后,margin属性会失效。(不推荐)
方法3.外墙法:在两个浮动元素中间添加一个div,给这个div设置clear:both;属性。(不推荐)
- 注意点：外墙法可以让第二个盒子使用margin-top属性,但第一个盒子不能使用margin-bottom属性。所以我们可以直接给新增的div添加高度让两个盒子中间有距离。
方法4.内墙法:在第一个元素的所有子元素的最后添加一个div,给这个div设置clear:both;属性。(不推荐)

注意点：内墙法可以让第二个盒子使用margin-top属性,也可以让第一个盒子使用margin-bottom属性。
区别：外墙法不能撑起浮动元素父元素的高度,而内墙法可以撑起浮动元素父元素的高度

方法5.伪元素[推荐使用]
- 给浮动的父元素添加以下属性(可将所有属性添加到一个叫clear的类里)

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

方法6.overflow:hidden;
- 6.1可以截取多出的内容
- 6.2清除浮动(给浮动元素的父元素设置)
三定位流
3.1 相对定位
- position: relative;
- 相对定位就是相对于原来在标准流中的位置进行移动
- 注意:
  - 1.相对定位不脱离标准流,继续在标准流中占用空间
  - 2.同一个方向上的定位属性只能使用一个(使用了left就不能使用right..)
  - 3.由于相对定位不脱离标准流,所以区分块级元素和行内元素
3.2 绝对定位
- position: absolute;
- 注意:
  - 1.绝对定位的元素是脱离标准流的
  - 2.绝对定位不区分块级元素和行内元素
  - 3.默认情况下是以body为参考点,如果祖先元素中有一个元素也是定位流(相对定位、绝对定位、固定定位),那么就是以这个元素为参考点
  - 4.绝对定位的元素会忽略祖先元素的padding
3.3固定定位
- position: fixed;
- 注意:
  - 1.固定定位脱离标准流
  - 2.固定定位不区分块级元素和行内元素
3.4静态定位
- position: static;
- 默认值

过渡模块

过度三要素

div{    
    width: 100px;     
    height: 50px;    
    background-color: lightgreen;     
    /* 1.用transition-property来告诉浏览器哪个属性要发生变化 */
    transition-property: width,background-color;     
    /* 2.用transition-duration属性告诉浏览器过渡效果执行的事件 */
    transition-duration: 2s;
}

/* 3.当鼠标悬停到div的时候,属性发生变化 */
div:hover{    
    width: 300px;     
    background-color: deeppink;
}

2D转换模块

旋转
- transform: rotate(45deg);
移动
- transform: translate(200px,100px);
缩放
- transform: scale(1.5,0.5);
改变旋转中心点的位置
- transform-origin: 0px(水平方向) 0px(垂直方向);
近大远小效果
- perspective: 500px;

将2D转换为3D

transform-style: preserve-3d;

动画三要素

div{
    width: 120px;
     height: 20px;
     background-color: lightgreen;
     /* 1.该属性用来告诉系统该动画的名称*/
     animation-name: changes;
     /* 2.该属性用来告诉系统动画要实行的时间*/
     animation-duration: 3s;
     /* 告诉系统动画延迟时间*/
     animation-delay: 2s;
     /* 告诉系统动画执行速度*/
     animation-timing-function: linear;
     /* 告诉系统动画执行次数*/
     animation-iteration-count: 3;
     /* 告诉系统执行往返动画*/
     animation-direction: alternate;
}
/* 3.用keyframes来执行自己定义名称的动画*/
@keyframes changes {
     from{         
        margin-left: 0;    
     }
     to{
        margin-left: 500px;
     }
}

附赠知识点：

单行文本超出隐藏并显示省略号
- width: 20em; // 不允许出现半汉字截断
- overflow: hidden; // 自动隐藏文字
- text-overflow: ellipsis; // 文字隐藏后添加省略号
- white-space: nowrap; // 强制不换行
浏览器私有前缀：
- -webkit-transition: 谷歌/苹果
- -moz-transition: 火狐
- -ms-transition: 微软
- -o-transition: 欧朋
Css hanck
- CSS hack的目的就是使你的CSS代码兼容不同的浏览器

CSS 常见面试题
1. 水平垂直居中一个div

<div class="father">
  <div class="son"></div>
</div>

方法一

.father{ 
  background-color:#ccc; 
  width: 600px;
  height: 600px;
  display: table-cell; 
  text-align: center;
  vertical-align:middle;  
}
.son{
  background-color:tomato; 
  width: 300px;
  height: 300px;
  display: inline-block; 
  vertical-align: middle; 
}

方法二

.father{
  background-color:#ccc; 
  width: 600px;
  height: 600px;
  position: relative; 
}
.son{
  background-color:tomato; 
  width: 300px;
  height: 300px;
  transform: translate(-50%,-50%); 
  position: absolute;
  top: 50%;
  left: 50%;
}

方法三

.father{
  background-color:#ccc; 
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.son{
  background-color:tomato; 
  width: 300px;
  height: 300px;
        
}

2. CSS3新特性有那些

颜色：新增rgba()
文字阴影：text-shadow: ;
边框：圆角border-radius: ; 边框阴影box-shadow: ;
盒子模型：box-sizing: ;
背景：bacground-size: ; 设置图片的尺寸
background-origin: ; 设置图片的原点
background-clip: ; 设置背景图片的剪裁区域
渐变：linear-gradient radial-gradient

例：
  background:linear-gradient(red, blue);

过度：transition: ;可以实现动画
自定义动画：@keyframes
唯一引入的伪元素：::selection
媒体查询：@media

例：
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

边框图像：border-image

例：
  border-image:url(border.png) 30 round;

2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

css重点知识

css重点知识

CSS

CSS选择器

CSS三大特性

CSS盒模型

网页布局方式

清除浮动

过渡模块

2D转换模块

将2D转换为3D

动画三要素

附赠知识点：