HTML和CSS常见问题整理

[yygmind]

• 盒子模型

对于现代浏览器来说，css中指定的width就是content width。

对于IE5.x和6来说，在怪异模式中width等于content、左右padding和左右border。

其中padding和margin的4种写法。

1、上 右 下 左

padding:10px 5px 15px 20px;

2、上 右左 下

padding:10px 5px 15px;

3、上下 右左

padding:10px 5px;

4、四边一致

padding:10px;

• display和position介绍

  • display规定元素应该生成的框的类型。

  值	描述
  flex	设置弹性容器
  block	此元素将显示为块级元素，此元素前后会带有换行符。
  inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
  inline-block	行内块元素。（CSS2.1 新增的值）
  none	此元素不会被显示。
  list-item	此元素会作为列表显示。

  • position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。

  值	描述
  absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 left 位置添加 20 像素。
  static	默认值。没有定位，元素出现在正常的流中 （忽略 top, bottom, left, right 或者 z-index 声明）。
  inherit	规定应该从父元素继承 position 属性的值。

• CSS选择器分类

  不同级别：排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。

  同一级别：后写的会覆盖先写的。

• em和strong的区别

  • em（emphasize）强调，表示语义上的强调，默认为斜体
  • strong着重，表示重要性的一种强调，strong是比em更强烈的强调，默认为粗体

• 使元素消失的方法

  • opacity：0：该元素隐藏起来，但不会改变页面布局，如果该元素绑定了事件会触发。
  • visibility:hidden：该元素隐藏起来，但不会改变页面布局，不会触发该元素已经绑定的事件。
  • display:node：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。

• 如何画一个三角形

  左右边框设置为透明，长度为底部边框的一半。左右边框长度必须设置，不设置则只有底部一条边框，是不能展示的。

  .child{
    	width: 0;
      height: 0;
      border-bottom: 100px solid cyan;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
  }

• 浮动相关

  • 为什么要清除浮动

    主要是为了解决父元素高度坍陷问题。

    一个块级元素如果没有设置height,其height由子元素撑开，对子元素使用了浮动之后，子元素就会脱离文档流。那么父元素中没有内容撑开其高度，这样父元素的height就会被忽略。

  • 如何清除

    1、父元素设置overflow: hidden(少用)
    
    2、clearfix：使用内容生成的方式清除浮动，不会破坏文档流。
        .clearfix: after { 	 // :after选择器向选定的元素之后插入内容
            content:""; 	 // 生成内容为空
            display: block;  // 块级元素显示
            clear:both; 	 // 清除前面元素
        }

• 行内元素居中

  .parent {
      text-align: center
  }

• DIV居中问题

  1、使用flex

  .parent {
      height: 600px;
      border: 1px solid red;
      
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  .child {
      border: 1px solid green;
    	width: 300px;
  }

  2、使用transform

  .parent{
    height: 600px;
    border: 1px solid red;
    position: relative;
  }
  .child{
    border: 1px solid green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  3、使用margin-top -一半的高度

  .parent{
    height: 600px;
    border: 1px solid red;
    position: relative;
  }
  .child{
    border: 1px solid green;
    width: 300px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -50px;
  }

  4、使用绝对布局absolute和margin:auto

  .parent{
    height: 600px;
    border: 1px solid red;
    position: relative;
  }
  .child{
    border: 1px solid green;
    position: absolute;
    width: 300px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

• 三栏布局

  要求两边两栏宽度固定，中间栏宽度自适应

  • 方案一：position绝对定位法

    center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。

    .parent {
      border: 1px solid red;
      position: relative;
    }
    
    .child_left {
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      position: absolute;
    }
    
    .child_right {
      width: 100px;
      height: 100px;
      border: 1px solid green;
      position: absolute;
      right: 0;
    }
    
    // div在html中必须放在left和right之后
    .child_center {
      height: 100px;
      border: 1px solid black;
      margin: 0 100px;
    }

  • 方案二：float 自身浮动法

    center的div需要放到后面，对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，然后设置margin属性，留出左右两边的宽度。

    .parent {
      border: 1px solid red;
      position: relative;
    }
    
    .child_left {
      width: 100px;
      height: 100px;
      border: 1px solid gray;
      float: left;
    }
    
    .child_right {
      width: 100px;
      height: 100px;
      border: 1px solid green;
      float: right;
    }
    
    .child_center {
      height: 100px;
      border: 1px solid black;
      margin: 0 100px;
    }

• 介绍BFC

  BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。

  • 如何生成BFC：（即脱离文档流）

    • 1、根元素，即HTML元素（最大的一个BFC）
      2、float的值不为none
      3、position的值为absolute或fixed
      4、overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
    • 5、display的值为inline-block、table-cell、table-caption

  • BFC布局规则：

    • 1.内部的Box会在垂直方向，一个接一个地放置。

      2.属于同一个BFC的两个相邻的Box的margin会发生重叠

      3.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此, 文字环绕效果，设置float

      4.BFC的区域不会与float box重叠。

    • 5.计算BFC的高度，浮动元素也参与计算

  • BFC作用：

    • 1.自适应两栏布局
      2.可以阻止元素被浮动元素覆盖
      3.可以包含浮动元素---清除内部浮动 原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内
    • 4.分属于不同的BFC时，可以阻止margin重叠

• CSS3特性 vh和vw

  • vh 相对于视窗的高度，视窗高度是100vh
  • vw 相对于视窗的宽度，视窗宽度是100vw

  这里是视窗指的是浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

  • 可以通过**@supports**来判断是否支持某个css属性。

  @supports (property: value){
    element {
      property: value;
    }
  }
  
  // 例
  @supports (display: flex){
    .flex {
      display: flex;
      float: none;
    }
  }

交流

本人Github链接如下，欢迎各位Star

https://github.com/yygmind/blog

欢迎加我微信进一步交流或者找我内推，前行的路上，共勉！

[GodD6366]

三栏布局中child_center的样式写的好像不对

因为没有达到自适应的效果，应该是这样:

.child_center {
    height: 100px;
    border: 1px solid black;
    margin: 0 100px;
}

[rocky-191]

三栏布局中child_center的样式写的好像不对

因为没有达到自适应的效果，应该是这样:

.child_center {
    height: 100px;
    border: 1px solid black;
    margin: 0 100px;
}

我也发现了

[yygmind]

三栏布局中child_center的样式写的好像不对

因为没有达到自适应的效果，应该是这样:

.child_center {
    height: 100px;
    border: 1px solid black;
    margin: 0 100px;
}

已更改，谢谢提醒

[pengcc]

有一处笔误， 是元素消失的方法中，display:node，应该是display:none

[wangzl1163]

padding的四种写法让我想起了孔乙己的回字的八种写法

[TheCokeCat]

grid

[TangMingChao]

BFC的概率不是太清晰, 建议加些实例说明；