CSS基本样式

1.
font-famliy:引入字体，font-size:改变字体大小；font-weight设置字体粗细，值没有单位，只加数字
2.
border-radius：是用来调整边角的圆润，50%就是圆形。

例子：box-radius：50px 50px 50px 50px/20px 20px 20px 20px;即通过X轴/Y轴；第一个是左上角
3.
可以拥有好几个class类，例如class=" pink-text blue-text"，如果两个类的样式冲突，在style中
下面的会覆盖上面的。
4.
class类优先级高于继承，id选择器高于class选择器，内联样式高于id选择器。
5.
！import优先级最高
.pink-text {
    color: pink !important; 
  }
6.
CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个。若有很多都应用这个值的时候
在改的时候就不用全部改，只改这个赋值的值就行
例：在最外层:root里定义一个值,在：root里面定义，下面所有的子元素都会继承，会作用于整个页面。一般都在：root里面定义
:root{
--a-color:black;
}
在b类里用的时候：
.b{
background:var(--a-color,red) //red,在--a-color定义的这个颜色值不能用的时候就取red这个背景颜色
}
7.
使用媒体查询，在某个值发生改变，相应的样式也会改变，例：在页面宽度大于350px的时候,之前定义的--a-color变成黄色
@media(max-width:350px){
:root{
--a-color:yellow;
}
}
8.
text-align 文本对齐方式
justify:将文本中用空格隔开，使每行一样长
center：文本都居中
right：右对齐
left：左对齐
9.
strong加粗文本，u给文本添加下划线，em强调文本，即斜体，s添加删除线，hr创建水平线，hr不用闭合标签.
10.
rgba（45，45，45，0.1）前三个都是组合颜色，第四个参数是透明度。opacity也可以设置透明度，只是是所有的透明度，可以继承到子元素
11.
box-shadow 给盒子添加阴影，可以添加多个阴影列表，用逗号隔开，
offset-x 阴影的水平偏移量；
offset-y 阴影的垂直偏移量；
blur-radius 模糊半径；
spread-radius 阴影扩散半径；
color  阴影颜色
其中 blur-radius 和 spread-radius 是可选的。
例：box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
这是添加了两个阴影列表，0是水平偏移量，10px是垂直偏移量，20px是模糊半径，rgba(0,0,0,0.19)是颜色和透明度

11.1text-shadow:文本的阴影：没有扩散属性，其余一样
12.
text-transform： 调整字体的大小写
lowercase：所有字体都小写
uppercase：所有字体都大写
capitalize；首字母大写，其余小写
initial：   默认值
inherit:   使用父元素的text-transform属性
none:    不改变字体
13.
line-height:设置行高，即每行之间的垂直距离
14.选择器
伪类选择器
：hover 鼠标悬停
：link 未访问的链接
：visited 已经访问的链接
：active  已选择的链接
p:first-of-type{}改变所有父元素第一个p标签的样式【p标签不用是第一个孩子，他只找第一个p标签】
p:last-of-type{ }改变所有父元素最后一个p标签的样式
p:last-child{}改变p是任何一个标签的最后一个子元素的样式，若不是最后一个子元素样式不变
p：first chilld {} 改变p是任何一个标签的第一个子元素的样式，若不是第一个子元素样式不变
p i ：first chilld {} 改变所有p元素中第一个孩子是i标签的样式，第一个孩子不是i标签不变，【区别p不用是第一个孩子】
p  ：first chilld i {} 改变第一孩子是p标签，并且p标签中第一个孩子是i标签的样式【p必须是第一个孩子】

伪元素选择器

【 可以一个：也可以两个，写两个是为了与伪类区分，写一个是为了IE的兼容性问题】

注意：通过为元素选择器创建的不是一个标签，是虚假存在的
p::after{ content"你好"}  在p标签后面加入“你好”，与content一起使用，before是在前面加
---
::before 创建一个伪元素，它是所选元素的第一个子元素； ::after 创建一个伪元素，它是所选元素的最后一个子元素。 p::before:在p标签中第一个子元素添加样式
input[type="text"]:disabled{} 为所有 type="text" 的被禁用的 input 元素设置样式
p:empty{}设置空的p元素的样式
input[type="text"]:enabled{ }为所有 type="text" 的已启用的 input 元素设置样式
:lang  
例：q:lang(en) {
  quotes: "~" "~";
}
运用;<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
例子：a：hover ，div:hover p{} 这是把鼠标放div上 标签会怎么样

结构选择器：

后代：选择器1 选择器2         给选择器2添加样式, 但是选择器2 必须满足是选择器1 的后代元素

子代：选择器1 > 选择器2     给选择器2添加样式, 但是选择器2必须满足是选择器1的直系子代元素

        兄弟选择器 +与~

+：选择器1+选择器2        给选择器2 添加样式, 但是选择器2必须满足是选择器1的下一个兄弟元素

~:   选择器1~选择器2        给选择器2 添加样式, 但是选择器2 必须满足是选择器1的后面的兄弟元素

     区别：+是后面第一个兄弟选择器，~是后面所有兄弟选择器，+后面的选择器必须是选择器2.~不需要

<div class='try'></div>
<h2></h2>
<p class='one'></p>
<p class='two'></p> 
//.try+p 什么元素也拿不到，因为后面是h2
//而.try~p,后面两个p元素都可以取到

交集并集选择器

交集：

选择器1选择器2  注意: 多个选择器之间不能有空格       意义: 需要标签同时满足以上多个选择器才会生效

并集：选择器1,选择器2        满足选择器1或者选择器2的都会添加样式

结构伪类选择器

（1）:first-child 第一个子元素    :last-child   最后一个子元素 

:nth-child(xn+y) 第几个子元素(从1开始数数）例子：li:nth-child(-n+3) 前三个li有样式

以上几个必须和前置选择器配套，就是第n个孩子必须是前面对应选择器，若不是，则没用

（2）:first-of-type   第一个类型元素

        :last-of-type    最后一个类型元素

        :nth-of-type(xn+y)        第几个类型元素【这些不需要跟前置对象配套，直至把前置选择器全部取出来，然后第几个，第几个】

状态伪类

:checked   选中后样式                                                   :empty  若是空标签的样式

15.
定位position
relative:相对定位   脱离文档流，但还给它留着位置, 他是相对于原来的位置定位的
absolute:绝对定位 ：绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它，之前的位置就会被代替
                                  它的定位是按照他的父元素的position：absolute 来定位的，若都没有就按照body
fixed:固定定位：与absolute区别：没有滚动条的情况下没有差异
在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
position：static 默认值，没有定位，元素出现在正常的流中；
sticky：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用：
#sticky-nav {
position : sticky ;
top : 100px ;
}
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
（1）父元素不能overflow:hidden或者overflow:auto属性。
（2）、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
（3）父元素的高度不能低于sticky元素的高度
（4）sticky元素仅在其父元素内生效

16.z-index 显示的顺序1，2
17.linear-gradient(a,b,c,d)实现背景颜色渐变，有四个参数，第一个是渐变的角度，后三个是颜色
例：background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
18.repeating-linear-gradient()也是背景渐变，区别是可以在哪个位置px 渐变到哪个位置px并且如果不会填满盒子，他会重复渐变，
例：background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );90deg是角度，0-40px是黄色，以此往下，若盒子足够大，就会用这些颜色重复渐变。
19.transform:
（1）scale():显示元素的比例
transform:scale( 1.5)就会显示成当前的1.5倍数。
（2）skewX() 沿X轴倾斜的角度。skewX(45deg) ;沿X轴倾斜45度。
（3）shewY()沿Y轴倾斜的角度。
20.动画
animation-name：动画名称
animation-duration：动画执行时间
@keyframes：调用动画的名字，以及动画样式
animation-iteration-count: 3;动画执行的次数，当3为infinite时会无限循环
animation-timing-function：在动画中的速度：
（1）ease默认动画以低速开始，然后加快，在结束前变慢
（2）ease-out：动画以高速开始，以低速结束
（3）ease-in，动画以低速开始，以高速结束
（4）linear：动画从头到尾的速度是相同的。
例;#anim {
  animation-name: colorful;
  animation-duration: 3s;
animation-iteration-count: 3;
animation-timing-function：linear;
}

@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}给id为anim添加了动画

21.H5新增标签main、header、footer、nav、article、section ，audio，figure ，label，fieldset
（1）main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。 如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。
（2）section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。 它们可以根据需要来嵌套使用。 举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。 当内容组之间没有联系时，我们可以使用 div。
例如：<div> - 一组内容 <section> - 几组相关的内容 <article> - 几组独立的内容
（3）header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。
（4）nav它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。用于包含内部的链接，导航等等
（5）footer：与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。
（6）audio：音频，必须具有controls属性，在<audio>标签包裹着<source>
例：<audio id="meowClip" controls>
  <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
</audio>
（7）figure 与figcaption  这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。
例如：<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>
(8)label:提高表单的可访问性
具有for 属性，for与input中的id一致的话，在点击输入框前面的字体，输入框就会聚焦

(8.1)outline: medium;在input中点击会去除外边框
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>点击Name就会聚焦，若不这样，让label包裹着input也可以实现
（9）fieldset具有legend，在单选按钮中legend，是用来解释，那些文本，下面是选项，而fieldset包含着每组的单选form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

(10) <textarea style="resize:none"></textarea>resize:none,设置不能拖拽。
22.隐藏元素方法
display: none; 或 visibility: hidden; 会把内容彻底隐藏起来，如果把值设置为 0px，如 width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。
23.accesskey 是用键盘上的按钮来获取焦点该属性尤其适用于链接、按钮、表单组件等元素。
<button accesskey="b">Important Button</button>按b按钮就会点击
24.tabindex,为那些P,div,span等元素获得焦点，用处：如在p元素获得焦点的时候背景颜色为黄色。
它还可以改变焦点的顺序，tabindex="1"是第一个，2是第二个，最后执行等于0的
<p  tabindex="0">我要获得焦点<p>此时p元素就会获得焦点，也可也选中
25.图片自适应尺度方法
img {
  max-width: 100%;
  height: auto;
}
26.视窗单位，对于父元素而言
vw：如 10vw 的意思是视窗宽度的 10%。
vh： 如 3vh 的意思是视窗高度的 3%。
vmin： 如 70vmin 的意思是视窗的高度和宽度中较小一个的 70%。
vmax： 如 100vmax 的意思是视窗的高度和宽度中较大一个的 100%。

       弹性盒子    flex
1.flex-direction:    row横向排列，column纵向排列  row-reverse：横向排列与row的摆放顺序相反，column-reverse纵向排列与column的摆放顺序相反
2.justify-content 属性对齐元素 【水平】
    （1）flex-start：从 flex 容器的起始位置开始排列项目。 对行来说是把项目移至左边， 对于列是把项目移至顶部。 如未设置 justify-content 的值，那么这就是默认值。
   （2）flex-end：从 flex 容器的终止位置开始排列项目。 对行来说是把项目移至右边， 对于列是把项目移至底部
   （3）space-between：项目间保留一定间距地沿主轴居中排列。 第一个和最后一个项目被放置在容器边沿。 例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
  （4）space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
   （5）space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

区别：space-around，共3个元素，每个元素有2侧空隙，共6个空隙平分1380

space-evenly，共3个元素，4个空隙，评分剩余1380，每个345
3.
align-items 【垂直】属性对齐元素,对于行跟列来说跟justify-content相反，flex-start他的行移到容器顶部，而justify-content移到最左边
  （1）flex-start：从 flex 容器的起始位置开始对齐项目。 对行来说，把项目移至容器顶部； 对列来说，是把项目移至容器左边。
  （2）flex-end：从 flex 容器的终止位置开始对齐项目。 对行来说，把项目移至容器底部； 对列来说，把项目移至容器右边。
  （3）center：把项目居中放置。 对行来说，垂直居中（项目距离顶部和底部的距离相等）； 对列来说，水平居中（项目距离左边和右边的距离相等）。
  （4）stretch：拉伸项目，填满 flex 容器。 例如，排成行的项目从容器顶部拉伸到底部。 如未设置align-items的值，那么这就是默认值。
  （5）baseline：沿基线对齐。 基线是文本相关的概念，可以认为它是字母排列的下端基准线。
4.
flex-wrap对于盒子一行放多少个，或者一列多少个，要是6个行，每行宽是25%，那只能放四个，要是不设置
flex-wrap：wrap,则会一行放6个，设置了就会放四个，剩下两个放在下一行
  （1）nowrap：默认值，不换行。
  （2）wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
  （3）wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。
5.
flex-shrink每个盒子压缩的比例,数值越大压缩比例越大，不是占的比例越大，注意 当容器的宽度小于里面所有子元素的宽度之和时，若容器宽度大于所有盒子总宽度，则不会压缩
例，box1占四分之三，而box2占四分之一
box1{
flex-shrink:1;},
box1{
flex-shrink:3;}
6.flex-grow，与 flex-shrink 相对的是 flex-grow。 你应该还记得，flex-shrink 会在容器太小时对子元素作出调整。 相应地，flex-grow 会在容器太大时对子元素作出调整。这个数值是扩大是倍数，与flex-shrink 相反
7.flex-basis
使用 flex-basis 为盒子设置初始值。 请给 #box-1 和 #box-2 添加 CSS 属性 flex-basis。 设置 #box-1 的尺寸初始值为 10em，#box-2 的尺寸初始值为 20em。
8.flex
上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。
例：flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;
9.order 盒子显示顺序，order:1会在order：2前面，或者上面
10.
align-self，可以设置每个子盒子的对齐方式，与align-items,justify-content的区别是，这两者控制所有孩子排列方式，而align-self是控制每个子盒子的排列方式
  参数：align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值
                网格 display:grid
1.grid-template-columns:创建列，下面创建了3个宽度为100px的列
grid-template-columns: 100px 100px 100px;
2.
grid-template-rows: 50px 50px 50px; 创建了三个高度为50px的行
3.
grid-template-columns: auto 50px 10% 2fr 1fr;  10%是总宽度百分之十，2fr是指总宽度出去前面剩下的三分之二，1fr是三分之一
4.grid-column-gap：创建多列之间的间距  grid-row-gap 创建多行之间的间距
grid-column-gap: 10px;  这会为我们创建的所有列之间都添加 10px 的空白间距。
5.grid-gap ：为网格添加行间距与列间距，是上面两个总和
grid-gap:10px 20px;网格行间距10px，列间距20px.
6.grid-column：要设置一个网格项占据几列，你可以使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置。grid-row：设置一个网格项占据几行
例：grid-column: 1 / 3;它将占两列，从第一条线到第三条线
       grid-row：1/3：它将占两行，从第一条线到第三条线
grid-area：两个的综合
例：item1 { grid-area: 1/1/2/4; } item1将第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。即占据三行三列的，第一行的全部
7.justify-self 子网个的水平对齐方式，不设置盒子将会充满网格
   （1）start：使内容在单元格左侧对齐，
   （2）center：使内容在单元格居中对齐，
   （3）end：使内容在单元格右侧对
8.align-self 垂直对齐项目 ，与justify-self参数一样
9.justify-items，水平对齐所有项目，不是针对某个子网个
10.align-items 垂直对齐所有项目
11. grid-template-areas将网格划分为区域模板，grid-area 属性将项目放置在网格区域中
例：grid-template-areas:
  "header header header"
  "advert content content"
  footer footer footer";
item1{
grid-area ：footer；
}  此时item1网格将会占据整个底部

12.repeat 网格重复
例：grid-template-rows: repeat(100, 50px);添加 100 行网格的例子，每行高度均为 50px
grid-template-columns: repeat(2, 1fr 50px) 20px; 这个相当于grid-template-columns: 1fr 50px 1fr 50px 20px;
13.minmax  限制网格大小
例：grid-template-columns: 100px minmax(50px, 200px);添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。在屏幕拉大时网格最大为200px,最小为50px,不会再增大或者缩小
14.auto-fill 创建弹性布局
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr))；当容器足以放下所有60px的网格时会都放在一行，若放不下，则会把放不下的移到下一行，若容器足够大，则会出现空列，而auto-fit将不会，将会拉伸网格，知道，容器填满，【注意最大值时1fr时才会填充，若是特定的值如200px,auto-fit,也会出现空列】
15.auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
16.也可以为子网格设置网格
item1{
display:grid;
grid-template-columns：1fr 2fr;
}
                             练习所得
  1.box-sizing
 box-sizing属性的取值可以为content-box或border-box，对它们的解释如下。

●content-box：浏览器对盒模型的解释遵从W3C标准，当定义width和height时，它的参数值不包括border和padding。

●border-box：当定义width和height时，border和padding的参数值被包含在width和height之内。

2.css3多列
（1）column-count   把div元素中的文本划分成三列： 
  (2)  column-gap:20px; 列与列之间的间隙为20px
  (3)  column-rules :20px  dashed   red .分别是column-rule-width column-rule-style column-rule-color;
        column-rule-style:是样式：
            dotted    定义点状规则。
           dashed    定义虚线规则。
           solid    定义实线规则。
           double    定义双线规则。
           groove    定义 3D grooved 规则。该效果取决于宽度和颜色值。
           ridge    定义 3D ridged 规则。该效果取决于宽度和颜色值。
           inset    定义 3D inset 规则。该效果取决于宽度和颜色值。
           outset    定义 3D outset 规则。该效果取决于宽度和颜色值

（4）column-fill
        auto：列高度自适应内容
        balance：所有列的高度以其中最高的一列统一

（5）column-span设置或检索对象元素是否横跨所有列。
       none：不跨列
       all：横跨所有列    如果是all就是会独占一行，而不是与父元素在一行，例如div>h1,给h1设置all,h1中的字就会横跨所有列，也就是独占一行

  （6）column-width：100px
       给分的每个列设置宽度，这样每列宽度为100px

   例子;div{
column-count:3;
column-gap:40px;
column-rules:20px dashed  red;
column-width：100px;                  就是分成了每列宽度为100px的三列，每列间距40px,分割线20px  红色虚线
}
   7.text-decoration  下划线
    underline:添加下划线              <u>
    none:去掉下划线
    line-through:添加删除线        <s>
8. text-indent  首行缩进

9.letter-spacing:字间距，控制英文字母或汉字的字距。word-spacing：词间距，控制英文单词词距

视频所记

1.css外部引入：link 与 @import url("")
@import url("")写在style
区别 link:布局与样式同时出现   ，@import url(""):先出现布局，再出现样式
link可以引入图标 <link rel='icon' herf='图片位置'>
2.样式优先级
 行内样式优先级最高，内部与外部取决于书写顺序，写在下面的优先级更高---就近原则
3.伪类：
:link  { }没有访问
:visited{}访问过后
：hover{}鼠标滑动后 ，不可以通过自己改变父级元素
:active: 是鼠标按下去没有松开的状态   【这四个伪类都要用的话必须要按这个顺序】

css3中选择器：--  >  直接子元素  div>p:hover  div中子元素是p的样式会变化，孙子不行。
                        --+  表示同级   p :hover +h1{  }与P元素同级的元素,是h1的样式都会改变
                      -- ~  同级元素   p :hover ~{  }与P元素同级的元素样式都会改变

4.float 浮动

4.1清除浮动：（1）后面元素加clear:both;

                         (2)伪元素

 .clearfix::after{content: "";
        height: 0px;
        clear: both;
        display: block;

        }

（3）给父元素设置高度

注意：这2个方法只适用于在一个父盒子里包含很多个子元素，这些子元素浮动

5.透明度
（1）rgba()
  (2)   opacity:             区别是rgba()只对字体进行透明，而opacity会把整个盒子设置成透明度

6.块元素与行内元素
   块元素是指DIV,P，ul,ol,h等标签，每个块元素会独占一行，display:block  ,可以转换成行内元素，一行显示用folat.
   行内元素又称内联元素，是指会显示在一行,例如span,a,b,u,等。         display:inline，可以转换成块元素

行内块元素，如input，img 等，可以设置宽高。也会在一行显示

   特殊：按照基线对齐，解决办法： img，input{vertical-align:  middle}
    
    行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。 
     块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。   

display属性值：block  inline   inline-block    list-item  none

7.px,em,rem区别
   px是像素,浏览器默认字体16px
   em 相对单位，是指父元素的倍数，div包含p,若div的font-size:20px,p的 font-size:2em,p实际就是40px,
        em一般用在首行缩进，16px=1em.   
（3）rem相对单位，相对与根元素html,（移动端布局中使用）

8.加粗属性：font-weight
                   常规值   100~900之间的整百数                        
                   法定属性  bold 加粗的  bolder 更粗的         【b,strong】
                   重点      normal  正常的，清楚加粗样式

9.倾斜属性   font-style
                     italic     倾斜效果
                     oblique   更倾斜的      【i，em】
                      normal   正常的

10.background /background-color背景颜色
属性：英文单词，16进制，rgb()/rgba()
背景图片
属性：background-image
属性值：url( )当容器大于背景图片，平铺显示
                     容器小于背景图片，只显示一部分
background-repeat 平铺属性
属性值：no-repeat/repeat/repeat-x/repeat-y
background-position:left/center/right/数值 top/center/bottom/数值
背景图的固定 性{{background-attachment:scroll(滚动)/fixed(固定);}

background-clip  背景图片裁剪

  属性值：border-box:从左上角边框开始裁剪【默认值】

                padding-box:从左上角内边距开始裁剪

                content-box:从左上角内容区域开始裁剪

background-origin  背景图片的原点在哪

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

   属性值：  padding-box:图片内边距左上角开始到以下，左，上方boeder没有图片，若图片足够大则右，下边框有图片的 【默认值】

                    border-box:图片边框左上角开始一直延伸到下面

                    content-box:图片从内容左上角开始到以下

11.background 简写

background-size:80px 60px;是指背景图片的宽高，不能简写
颜色 图片 平铺 位置 固定
12.图片格式：
页上常用的图片格式（压缩图片） 1)
jpg :有损压缩格式（破坏性压缩），靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )如果网页中 2）
gif：无损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像; 3)
png:无损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;
13.border-spacing单元格与单元格之间距离===cellspacing
14.合并单元格边框，border-collapse(合并)border-separate(默认不合并)
15.empty-cells:hide  当表格没有内容的时候，表格隐藏，默认值：show 默认显示
16.table-layout  计算属性
      属性值 auto 会有计算属性，就是单元格随着内容的多而变宽
              fixed  去除计算属性

17.结构伪类选择器
（1）当所有标签都是一样的时候
选择器：nth-child(n){     }
  n为几个，n为2n的时候，就是2的倍数
   odd:奇数，even偶数
（2）当所有标签都不一样的时候
选择器：nth-of-type(n){   }
             就是有p标签与其他标签混合使用
     p:nth-of-type(3){ },是指先把所有的p标签筛选出来，然后给第3个p标签添加样式。

18.属性继承，父级设置了，子级就会有
不可继承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

                                              盒模型
 padding，一般在父元素设置，在父元素设置padding后会把容器撑开，所以父元素要减去padding，和border，这样才是自己想设置的父盒子的宽高，就是，本来width想设302px,若padding为100px,border为1，那么width设为100px,就是想设置的302px.

但是可以设置border-sizing:border-box
  不能为负值
margin 外边距的使用
  --表示多个同级元素之间的位置关系，
     哪个元素改变就给当前元素设置，【margin值不会撑大元素的高宽大小，所以不用减去margin的值】
---注意margin与padding可以换着使用，比如父盒子的padding就是子盒子的margin
 可以用负值。
总结;
--padding是用来设置父子级元素之间的位置关系 可以给父级添加，也可以给自己添加
--设置padding都会撑大盒子的宽高大小  是否减去padding值  看需求

margin常见Bug
     1.父级盒子只有一个子元素的时候，给自己元素设置margin-top:10px,会错误解析到父盒子，父盒子会距离外部10px,子盒子距离不变。
  解决;  (1)用padding-top,要减去，要不撑开盒子
         （2）给父级设置边框，border:1
           (3)给子级添加浮动
         （4）给父级添加overfolw:hidden
 2.两个盒子设置margin-top/bottom  错误解析最大的距离
div1{
margin-bottom100px;
}
div2{
margin-top；50px;
}
两个盒子上下距离解析是100px,而不是150px

解决
（1）padding-top/bottom
  (2)设置一个margin值

3.盒模型的计算方式

--盒子自身大小：content +padding*2+border*2
--盒子真实大小：content +padding*2+border*2+margin*2

19.overflow 溢出显示

    属性值   visible 默认  hidden  溢出删除   scroll滚动条（即使不超出也出现滚动条）  auto  自动

overflow-X  和overflow-Y分别显示x轴与Y轴

20.单行文本用省略号显示

   （1）盒子必须有宽高（2）单独显示在一行 （3）超出部分隐藏  （4）隐藏用省略号代替

  例

p{
            width: 500px;
            height: 50px;
            background: aqua;
            border: 2px solid red ;
            white-space: nowrap; //单独显示一行
            overflow: hidden;   //超出隐藏
            text-overflow: ellipsis;//超出用省略号
}

21.导航栏一般为44px.在pc端滚动条占位置，移动端不占位置

22.定位三要素：对象  参照物    方向
定位position
relative:相对定位   不会脱离文档流，但还给它留着位置, 他是相对于原来的位置定位的，作用：（工具人）主要给绝对定位提供参照物
absolute:绝对定位 ：绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它，之前的位置就会被代替
                                  它的定位是按照他的父元素的position属性 来定位的，若都没有就按照body
fixed:固定定位：与absolute区别：没有滚动条的情况下没有差异，但它是相对于浏览器窗口定位，会脱离文档流
在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动
position：static 默认值，没有定位，元素出现在正常的流中；
sticky粘性定位：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。
使用：
#sticky-nav {
position : sticky ;
top : 100px ;
}兼容性不好
设置position:sticky同时给一个(top,bottom,right,left)之一即可
使用条件：
（1）父元素不能overflow:hidden或者overflow:auto属性。
（2）、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
（3）父元素的高度不能低于sticky元素的高度
（4）sticky元素仅在其父元素内生效

23.z-index 显示的顺序（要在定位环境下使用）1，2，越大显示在上面。
24.某个盒子居中显示，（例如广告）

  24.1已知元素宽高居中：left:50%,top:50%, margin:-高度一半，0，0，宽度一半
  24.2不知元素宽高：top:0;right：0；bottom:0;left:0; margin:auto
    24.3css3计算属性：calc( 计算公式)  对于已知宽高的可以设置
left:calc(50% - 宽度一半)；top:calc(50% - 高度一半)
25.锚点：实现同页面不同位置的跳转
        需要跳转的地方添加ID属性
          需要给a的herf属性设置#id

         body,html{scroll-behavior:smooth    } 窗口平稳滚动（比较慢） auto 滚动很快

26.cursor:pointer  将鼠标放上，鼠标变成手型，即使没用a 

27.宽度自适应

在网页布局中块级元素设置width：100%

不设置width,默认父元素宽度

重点：当元素没有设置宽度的时候   元素脱离文档流  宽度由内容决定

=>设置浮动和绝对/固定定位的时候   元素一定要要加宽高大小！！！

28.高度自适应  height

        --不设置高度或者高度设置为auto 当前盒子不显示  高度由内容决定

       --常见宽高自适应情况

                    ---全屏案例 ,移动端body,html{

                                              height:100%}

                     --图片 img{ height:100%;width:100%}

        --在工作中常用的方法：高度设置为auto的时候可以实现高度自适应

min-height :200px :当内容比较少，高度固定为200px,内容很多会撑开盒子

29.高度塌陷（宽高自适应bug）

    --父级没有设置高度=>做到自适应

    --子集含有脱离文档流=>需求

      万能解决法/万能清除法（不要求理解，只要求会用）：

          --要给父级盒子添加一个类名 clear-fix(前端中不成文的规定)           

      

clear-fix ::after{ 

content:'';
width:100%;
height:0;
display:block;
overflow:hidden;
visibility:hidden; //隐藏文本显示，结构还是会存在，display:none,结构也不存在
clear:both;     //清除浮动
}

伪对象/伪元素

 - 选择器::after{ content:' '}在xx之后

伪对象与伪类选择器

      -伪类是一个冒号  伪对象在css2中也是一个冒号   在css3中为了区分两者建议写两个冒号

30.BFC 块级格式化上下文 ，（设置布局规范）

       为了设置两栏布局（页面分为两块，一块宽度不会随页面大小改变，令一栏随页面大小改变宽度也会改变）

可以通过BFC实现，一边设置浮动，令一边不设置浮动，不设置浮动这一边需要触发BFC

哪些元素或属性能触发BFC

根元素(html)
float属性不为none
position为absolute或fixed
overflow不为visible

BFC的应用

1、自适应两栏布局
2、清除内部浮动 - 高度塌陷
3、防止margin上下重叠 - 常见的margin bug

31.图片整合（导航栏中的图片）

 把网站里面的小图标有规则的整合在一起，利用   background-position 改变背景图的位置，每个图标应用。

目的：CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因

32. pointer-events: none;：阻止事件触发