大前端笔记04

HTML第一阶段day04-盒模型

一、css三大特性

层叠性

• 冲突：就近原则
• 不冲突：不会层叠
  继承性
• 文本相关属性默认继承的 （text- font- line- color）
• 特殊情况：a标签的下划线和颜色必须通过a标签本身设置,不会继承父级
• inherit 值用来主动继承父标签的属性
  优先级
  -基础选择器权重表:
  - id选择器(#)>类/伪类选择器(./:)>标签选择器(div)>通配符(*)

•       (#)100  >  (./:) 10  >  (div) 1  >  (*) 0
  

- 权值越大优先级越高

• 复合选择器权值计算： 把组成复合选择器的所有基本选择器权值相加 （群组选择器以单个选择器的权值计算）
• !important : 权重最高，比行内样式高 ，不建议使用

二、css背景属性

• 1、background-color 背景颜色
• 2、background-image 背景图片

      background-image:url("./pic.jpg");
  

• 3、bakground-repeat 背景重复
  • repeat : 重复，默认值
  • no-repeat : 不重复
  • repeat-x : 水平重复
  • repeat-y ： 垂直重复

     background-repeat:no-repeat;  //背景图不重复
  

• 4、background-position 背景定位

      background-position: 水平  垂直;
      background-position: left/center/right  top/center/bottom;
      background-position: 50px  100px;
      background-position: 50%  100%;
      background-position: right;  //right center 
      - 如果只设置一个值，第二个值默认是center
  

三、css盒模型

• 盒模型分四层

• 内容content

  • width 宽
  • height 高

• 内边距（内填充、内补丁）padding

  • padding-top 上内边距
  • padding-bottom 下内边距
  • padding-left 左内边距
  • padding-right 右内边距

  简写语法：

      padding: 10px;  上下左右都是10px
      padding: 10px 20px;  上下10px   左右20px
      padding: 10px 20px 30px;  上10px   左右20px  下30px
      padding: 10px 20px 30px 40px; 上10px  右20px 下30px  左40px
  

• 边框 border

  • border: border-width border-style border-color;

    • border-width: 边框的宽度
    • border-color : 边框的颜色
    • border-style: 边框的风格
      • solid 实线
      • dashed 虚线
      • dotted 点线
      • double 双实线

  • border-top

  • border-bottom

  • border-left

  • border-right

  • border-top-width

  • border-top-style

  • border-top-color

• 外边距 margin ：外边距是当前元素和父元素或者相邻元素之间的距离

  • margin-top 上内边距
  • margin-bottom 下内边距
  • margin-left 左内边距
  • margin-right 右内边距
    简写语法：

      margin: 10px;  上下左右都是10px
      margin: 10px 20px;  上下10px   左右20px
      margin: 10px 20px 30px;  上10px   左右20px  下30px
      margin: 10px 20px 30px 40px; 上10px  右20px 下30px  左40px
  

  • margin可以设置负值
  • margin:0 auto; 块元素水平居中

四、块级标签和行内标签的区别

• 块级： div h1-h6 p br hr ul ol li dl dt dd form

• 默认从上到下排列（独占一行）

• 宽度默认是父元素的100%

• 可以设置所有的盒模型属性

• 行内： a span i em b strong

• 默认从左到右在一行显示

• 宽度默认是内容撑开

• 不能设置宽高及垂直方向的盒模型属性

• 行内块 ： img input select textarea

• 默认从左到右在一行显示

• 宽度默认是内容撑开

• 可以设置所有的盒模型属性

五、外边距塌陷问题

1、margin-top传递

• 当父元素没有border、padding、float、overflow、position等属性，给子元素设置margin-top,会把父元素一块拉下来
• 解决：
  ①、给父级设置1px padding
  ②、给父级设置1px border
  2、垂直方向margin合并
• 相邻两个元素，上面元素设置了下外边距 40px，下面的元素设置上外边距 60px ， 最后间距以较大的为准 60px