前端-入门之旅——html-css知识点小结

Miraitowa007
251 阅读4分钟

1，常见行级元素，块级元素, 行级块元素其特性

  • 行级元素——inline

    1，常见的行级元素
    <a>,<span>, <i> ,<,strong>, <em>
    2，特性
    多个元素占一行，不能设置宽高，竖直方向的内外边距不会产生效果，⾏级元素内不可以嵌套块级元素，进行浮动或转换为行级块元素或块级元素可以设置宽高。

  • 块级元素 ——block

    1， 常见的块级元素
    <div> <p> <ul> <li> <ol> <h1~h6> <table>
    2， 特性
    单个元素占据一行，可以设置宽高，但即使可以设置宽度仍然独占一行，块级元素内可以嵌套行级元素或块级元素
    p标签不能嵌套块级元素。

  • 行级块元素 ——inline-block

    1， 常见的行级块元素
    <img><button><input>
    2， 特性
    可以多个元素占据一行，可以设置宽高，行级块元素内可以嵌套行级元素或块级元素，但默认回车换行会产生一定间距（可以将其转化为块级元素，或进行浮动）；

2.常见的css选择器及其优先级

1， 选择器

    1.id选择器--#+id名+{样式}  
    2.class选择器--.+class名+{样式}
    3.标签选择器--标签名+{样式}
    4.后代选择器--祖先+空格+后代++{样式}   
    5.⼦代选择器--父代+>+后代+{样式}
    6.伪类选择器--标签名+：+...(常用：hover)
    7.伪元素选择器--标签名+::+...（常用于::before/after->必须有一个属性content，可以用来清除浮动）

2，选择器的优先级

id > class / 伪类 > 标签 / 伪元素
优先级：

  • id选择器=100；
  • class选择器=10;
  • 伪类选择器=10；
  • 标签选择器=1；
  • 伪元素选择器=1；
  • 内联样式=1000；
  • important 最高；
  • 子代选择器和后代选择器的优先级通过所使用选择器的优先级累加计算。

3， 标准盒模型和怪异盒模型

  • 标准盒模型（box-sizing=content-box；）

    设置的宽度是元素内容的宽度； dom对象的offsetwidth=设置的宽度+padding+border;

  • 怪异盒模型（box-sizing=border-box；）

    设置的宽度是总宽度； dom对象的offsetwidth=设置的宽度；
    注：button本身就是一个怪异盒模型

3，外边距合并问题及其解决方法

  • 嵌套关系的外边距合并问题

    1， 产生原因
    父元素是一个无内容的空元素，父元素和子元素同时设置外边距，上/下外边距合并为父元素/子元素中所设置的较大的外边距。

    2， 解决方法

        1，给父元素设置边框，为不改变样式，可以设置为transparent；
    2，父元素overflow：hidden；
    3，给父元素/子元素做定位（absolue/fixed）；
    4，父元素/子元素设置浮动；

  • 相邻元素的外边距合并问题

    1， 产生原因

    当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并，变成所设置的较大的外边距

    2，解决方法

     1，将外边距设置在一个元素上

4，元素浮动产生影响及解决方法

  • 元素浮动后会脱离⽂档流，造成⽗元素塌陷，也就是使被子元素内容撑开的父元素高度减小或消失

  • 解决方法 1.⽗元素设置⾼度
    2.⽗元素设置溢出隐藏 overflow:hidden
    3.在⽗元素内添加最后⼀个⼦元素class="clear"，并且在⼦元素上设置清楚浮动

      .clear  
     {  
      clear:both;  
      height:0;  
     }

    4.clearfix

      .clearfix::after   
      {
      content:'';  
      display:block;  
      clear:both;  
      }

5, 常见定位及其特征

1，相对定位（position:relative）

   相对于元素本身进行定位，相对于元素正常情况下的位置定位，定位后空间不会释放

2，绝对定位（position：absolute）

   相对于最近已定位的祖先元素进行定位，如果没有祖先元素定位，则相对于body进行定位，定位后空间释放

3，固定定位（position： fixed）

   相对于浏览器窗口定位 定位后空间释放

4，粘性定位（position: sticky)

   relative+fixed 
   是相对定位和固定定位的结合  
   先相对于元素本身定位，后相对于浏览器窗口定位（例如：天猫页面）定位后空间不会释放

5，静态定位（position：static）

   默认的定位方式

6，BFC (Block Format Content 块级格式化上下文)

    它是一个独立的渲染区域，只有Block level box参与，它规定了内部的Block level Box如何布局，并且与这个区域外部毫不相干     
    可以解决元素浮动，父元素塌陷问题，外边距合并问题
    触发BFC的条件 （下列之一） 
    1,创建根元素html;  
    2,position:absolute或fixed;  
    3,对元素进行浮动（float不是none);
    4,内联块 (元素具有 display: inline-block/display：inline);
    表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性);  
    表格标题 (元素具有 display: table-caption, HTML表格标题默认属性);  
    5,overflow 且值不是 visible 的块元素(例overfloat:hidden);
avatar
文章
阅读
粉丝