html , css, javascript (全栈 语言)


css 三种写法：

  内联写法 优先级最高

  内部写法

  外链写法


 !important 改变css默认的优先级

 选择器 {
     css属性名: css属性值
 }  

// 同时选中
 选择器, 选择器 {
     css属性名: css属性值
 }  

// 嵌套的意思，后面的选择器是前面选择器的子元素
 选择器  选择器 选择器{
     css属性名: css属性值
 }  

// 选择同级别标签
选择器 + 选择器{
     css属性名: css属性值
 }  

// 选择父元素内部第一层子元素
 选择器 > 选择器{
     css属性名: css属性值
 }  



 选择器：

   class  .

   id    #

   标签选择器

   通配符符选择器 * 一般用来清除标签的默认样式

   伪类选择器


盒子模型

  外边距  margin
 
  内边距  padding

  边框    border

   border: 边框的粗细 边框的类型 边框的颜色

  内容    content

  盒子模型真实宽高的计算规则？？


  真实宽高 = 你写的宽高（content） + 边框 + 内边距


  box-sizing: border-box;  改变盒子模型的计算规则



浮动：

  让元素漂浮起来，可以左右的漂浮移动

  子元素 漂浮后，父容器将没有高度，那么父容器后面div将挤上去
  解决方案：
    1：给父容器设置高度（等于子元素高度）
    2：给父容器设置 overflow: hidden; （让浏览器自动设置父容器的高度）
    3: 给子元素加 clear: both;


定位：

  为了让元素产生堆叠（重叠），或者放在任意一个位置！


  相对定位 relative
   当元素设置 相对定位 后，元素原本位置还在（没有被删除）

   定位参考对象：
     他原本的位置·

  绝对定位 absolute
   当元素设置 绝对定位 后，元素原本位置不在，被删除了

   定位参考对象：
      父元素设置 定位，那么参考父元素的位置（当前位置）
      父元素没有设置 定位，那么参考浏览器边框

  固定定位 fixed
   当元素设置 固定定位 后，元素原本位置不在，被删除了
   定位参考对象：
     浏览器边框


calc()  支持写数学表达式

元素垂直水平居中的N中场景和N方法：

  定位
    水平  子元素 left 50%  , margin-left: -子元素宽度一半
    垂直  子元素 top 50%   , margin-top: -子元素高度一半


  块标签内部的文字需要：
    垂直（单行文字） line-height: 数值等于父元素的高度
         多行文字：padding-top: 8.86px; 父元素高度一半 - 内部子元素高度一半
    水平居中   text-align: center;


  块标签内部的块标签需要：
    垂直: 给父元素设置  padding-top: (父元素高度 - 子元素高度) / 2 ，还需要加上：    box-sizing: border-box;
    水平：margin: 0 auto;  


  两个行内标签设置垂直方向对象：
    高度高的元素：vertical-align: middle;