css-总结

CSS

1. 元素居中总结

   1. 水平居中

      1. 块状元素

         1. 将该块级元素左右外边距margin-left和margin-right设置为auto
            .child{
                 100px;//确保该块级元素定宽
                margin:0 auto;
            }
            

      2. 行级元素

         1. 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
            .parent{//在父容器设置
                text-align:center;
            }
            弹性盒子中的水平居中
            将某元素定义为弹性盒子：display:flex;
            然后在水平方向居中盒子内的元素：justify-content:center;
            

   2. 垂直居中

      1. 块状元素

         1. #
            

      2. 行级元素

         1. 对该行内元素的父元素设置line-height与height相同：比如父元素div的height为50px,则设置：inline-height:50px;
            
            设置行内元素vertical-align:middle
            

   3. 水平垂直居中

      1. 定宽高块状元素水平垂直居中

         1. 子绝父相
         2. 先设置元素绝对定位
         3. 然后top left设置50%
         4. 最后根据宽高设置margin负的像素
         

      2. 不定宽高块状元素水平垂直居中

         方法一

      子绝父相
      先设置元素绝对定位
      然后top bottom left right都设置为0
      最后margin设置auto

         
      方法二
         
      

      子绝父相
      先设置元素绝对定位
      然后top left设置50%
      根据transform：translate属性设置

         
      方法三
         
      

      给父元素设置display：flex
      align-items：center定义父元素的子元素垂直居中
      justfiy-content: center定义父元素的子元素水平居中

   4. 居中完结篇(https://mp.weixin.qq.com/s/GU53AdyXk1H5KBotBHUGEA)

2. 盒子模型的理解

   1. 所有HTML元素可以看作盒子，一个盒子包括了content（实际内容）、border（边框）、padding（内边距）和margin（外边距）

   2. 其实盒模型有两种，分别是ie盒子模型（IE6以下版本浏览器)和标准w3c盒子模型，区别在于前者content的宽度和高度包括了border和padding。margin（外边界）虽不可见，但是它确实在文档中占据了空间，我们要区分两个概念即：盒子所占空间（计入margin ）和盒子实际的大小（不计入margin） 。

   3. box-sizing有三个取值：

      1、content-box:使元素遵循标准 w3c 盒子模型（默认值）。

      2、border-box:使元素遵循ie 盒子模型。

      3、 inherit： 规定应从父元素继承 box-sizing 属性的值。

3. 浮动的理解

   1. 浮动	影响	方法
      	父元素高度塌陷	给父元素添加伪元素
      	影响后续相邻兄弟元素	再后续相邻兄弟元素前加一个空div：clear：both

4. margin和padding理解区别

   1. 相同点
      1. 复合值
      2. 可以取4个值
      3. 取值顺时针规律

   2.不同点margin

   • 间距重叠，取大值
   • 给子元素设置上下外边距时父元素会塌陷
   • 1给父元素加个边框border-颜色可以取本身颜色，也可以取背景颜色，但是大小会变化
   • 2给父元素添加属性overflow：hidden，涉及到BFC机制

5. 文字基线

   1. 图片是以文字基线对齐的，不会对text-align生效果，必须给图片添加vertical-align: middle

6. 外边距合并

   1. 给子元素设置上下外边距时父元素会塌陷，给父元素添加属性overflow：hidden

7. Overflow

   1. CSS overflow 属性用于控制内容溢出元素框时显示的方式。

      CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

   2. 值	描述
      visible	默认值。内容不会被修剪，会呈现在元素框之外。
      hidden	内容会被修剪，并且其余内容是不可见的。
      scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
      auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
      inherit	规定应该从父元素继承 overflow 属性的值。

   3. 注意:overflow 属性只工作于指定高度的块元素上。

      注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

8. 网格布局Grid

9. 几个易混淆的css属性

   1. transform

      translate

      transition

      animation

      overflow

      outline

      Display display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

      Visibility visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

10. CSS3 弹性盒子(Flex Box)

11. %，vh,vw，px，em，rem的区别

    1. px	绝对单位，页面按精确像素展示，px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。是我们网页设计常用的单位，也是基本单位。通过px可以设置固定的布局或者元素大小，缺点是没有弹性。
       em	em的值并不是固定的； em会继承父级元素的字体大小。相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
       rem	rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。 (另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。
       %	1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口），
       vwvh	css3新单位，view width的简写，是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px， css3新单位，view height的简写，是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px

12. CSS中的继承

    1. 子元素继承父元素的样式，但是并不是所有属性都是默认继承的。
    2. 通过文档中的 inherited：yes 来判断属性是否可以继承，关于继承可以参见css的继承关键字：

13. display:none和visibility:hidden的异同点

14. css定位的理解

15. 媒体查询原理

16. 移动端布局方案

17. css选择器

    （1）id选择器（#myid）
    （2）类选择器（.myclassname）
    （3）标签选择器（div,h1,p）
    （4）后代选择器（h1 p）
    （5）相邻后代选择器（子）选择器（ul>li）
    （6）兄弟选择器（li~a）
    （7）相邻兄弟选择器（li+a）
    （8）属性选择器（a[rel="external"]）
    （9）伪类选择器（a:hover,li:nth-child）
    （10）伪元素选择器（::before、::after）
    （11）通配符选择器（*）
    

18. 伪类与伪元素的区别

    css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
    
    伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。
    
    伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
    
    有时你会发现伪元素使用了两个冒号（::）而不是一个冒号（:）。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
    

19. 超链接访问过后的hover样式就不出现，原因及解决方法

    1. 被点击访问过的超链接样式就不再具有hover和active了，解决办法就是改变css属性的排列顺序LVHA