HTML与CSS常见问题解决方式以及重点内容归类

HTML与CSS常见问题解决方式及重点内容归类

一、快速生成标签的快捷写法归类（TAB键）：

E：标签本身
E>N:父子标签
E+N：兄弟标签
E*N:生成指定数量的标签
E(标签内容):设置标签的内容
$:相当于一个计数变量
E[属性=属性值]：标签属性
E#id：标签ID属性
E.class:标签class属性

二、标签归类

1. inline 行级元素（内联元素）
   内容决定元素所占位置，不可以通过css改变宽高
   包括：span、strong、em、a、del等

2. block 块级元素
   独占一行，可以通过css改变宽高
   包括：div、p、ul、li、ol、form、address等

3. inline-block 行级块元素
   内容决定大小，可以改宽高
   包括:img等

三、margin塌陷

现象：垂直方向的margin，父子元素结合到一起，二者取最大值
如以下代码则会导致margin塌陷现象

.wrapper{
    margin-left:100px;
    margin-top:100px;
    width:100px;
    height:100px;
    background-color:black;
}
.contect{
    margin-left:50px;
    margin-top:50px;
    width:50px;
    height:50px;
    background-color:green;
}

效果图：

解决方式：触发盒子的bfc（以下方式均有弊端应看情况使用）

如何触发一个盒子的bfc:

1. position:absolute;
2. display:inline-block;
3. float:left/right;
4. overflow:hidden;(溢出盒子部分隐藏）
   如：

.wrapper{
    margin-left:100px;
    margin-top:100px;    
    width:100px;    
    height:100px;    
    background-color:black;    
    overflow: hidden;
}
.content{
    margin-left:50px;    
    margin-top:50px;    
    width:50px;    
    height:50px;    
    background-color:green

解决后效果图：

四、margin合并

现象：两个兄弟结构的元素在垂直方向上的margin直接接触时合并为一个

解决方式：给其中一个盒子或两个盒子加上一层父级元素，并将父级元素设置为bfc，设置bfc的方法见上边第二条，margin塌陷。

注：这种方式改变了HTML结构，在实际应用中一般不解决此问题,通过改变margin-bottom的值达到目标效果。

五、清浮动

方式：利用伪元素，注意要将伪元素设置为块级元素

例：

.wrapper::afer{
    content:"";
    clear:both;
    display:block;
}

本文地址：https://blog.csdn.net/Bao_haha/article/details/107500389