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

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

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

E：标签本身

E>N:父子标签

E+N：兄弟标签

E*N:生成指定数量的标签

E(标签内容):设置标签的内容

$:相当于一个计数变量

E[属性=属性值]：标签属性

E#id：标签ID属性

E.class:标签class属性

二、标签归类

inline 行级元素(内联元素)

内容决定元素所占位置，不可以通过css改变宽高

包括：span、strong、em、a、del等

block 块级元素

独占一行，可以通过css改变宽高

包括：div、p、ul、li、ol、form、address等

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:

position:absolute;

display:inline-block;

float:left/right;

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.youkuaiyun.com/Bao_haha/article/details/107500389