css 层叠样式表  



写法：

  1：内部写法  优先级最高

     写在开始标签上

     <p style="color:red;"></p>

    

  2：内链写法

      <heade>
          ...
          <style>
            p { 
              color: red;
            }
          </style>
      </heade>

  3：外链写法


  css结构

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

  选择器 (暂留坑)

    标签（标签名）选择器

    class 类选择器    .类名称

    * 通配符 选择器  （优先级最低）   用来 清除  标签自带 的样式

    id 选择器    #id名称

    伪类选择器  :xxxxxx
111111111111111

css 优先级    

   !important 可以让元素的优先级最高

路径：


  绝对路径
     C:\Users\bmy\Desktop\front-end-team\每天课程\index.css

  相对路径

        C:\Users\bmy\Desktop\front-end-team\每天课程\2022-03-04\index.css

        /    根路径  C:\

        ./   当前路径


        ../  上一级


注意事项：

  1：避免使用公共类名 选中 标签







盒子模型

  外边距  margin

  内边距  padding

  边框 border

  内容  content

  标准盒子模型：

    元素的真实宽度  =  你写的 （宽度+左右padding+左右边框） +  高 （上下内边距+上下边框）

  怪异盒子模型：

    box-sizing: border-box;   







常用css 属性：

  list-style: none;  清除 li 标签的小圆点
  text-decoration: none;  清除 a 标签的下划线

  display: 
    inline  行内标签
    block   块标签
    inline-block   行内块标签
    none    隐藏元素

  font-size  字体大小 
  background  背景色 
  outline: none; 清除  input  button 外边框
  border-radius 圆角

  overflow：设置子元素宽高 超过 父元素 宽高后 如何显示

    scroll  超过部分，以滚动的显示展示
    hidden 


居中的一些方式：

  水平居中：

    块标签的居中  margin: 0 auto;
      必须在子元素上设置宽度

    块标签内部行标签(文字)  text-align: center;

  垂直居中：

    单行文字（行标签 & 文字）在父标签内部垂直居中 line-height: 就是父标签的高度

    两个行内标签进行相互对其的时候使用的： vertical-align: bottom;


 被定位的元素，如何设置垂直水平居中？？？

    元素设置 50% 距离，然后margin 减去自身宽度或者高度的一半

    left: 50%;
    margin-left: -8px

    calc 数学计算函数，可以进行加减乘除运算