HTML+CSS常见问题总结

CSS 布局技巧

从外到内、先宽高背景色、放内容、调节内容的位置、控制文字细节。

CSS 通用布局

默认问题：

• 网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致
• 盒子的宽高会加上内边距和边框

* {
	padding:0; 	/* 清除内边距 */
	margin:0; 	/* 清除外边距 */
	box-sizing: border-box;	/* 使整个盒子的宽高固定 */
    list-style: none;	/* 去除列表前的圆点 */
}

行内元素 高、宽 直接设置是无效的

解决方案：将行内元素转化为块元素。

• 转换为块元素：display: block;（由于经常需要设置宽高，所以通常会将行内元素转换为块元素）
• 转换为行内块：display: inline-block;（常用）

版心居中

外边距可以让块级盒子水平居中，但是必须满足两个条件：

• 盒子必须指定了宽度 width
• 盒子左右的外边距都设置为 auto

div {
    width: 900px;
    height: 200px;
    background-color: pink;
    /* 上下 100 左右 auto */
    margin: 100px auto;
}

使单行文字垂直居中

a {
    height: 40px;
    /* 一个小技巧：单行文字垂直居中的代码，让文字的行高等于盒子的高度 */
    line-height: 40px;
}

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（准确的描述应该是：大的外边距覆盖小的）。

解决方案：
尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，当子元素有上外边距，此时父元素会塌陷较大的外边距值（外边距效果显示在父元素之上）。

解决方案：

• 可以为父元素定义上边框（比如：可以给一个透明 transparent 边框）
• 可以为父元素定义上内边距。
• 可以为父元素添加 overflow: hidden 推荐
• 转化成行内块元素。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。

通过 margin 或 padding 改变行内标签的垂直位置，无法生效

行内元素可以使用 line-height 改变行高，来改变垂直位置。

span {
    line-height: 100px;
}

浏览器解析行内块或行内标签的时候，如果标签换行书写，渲染时会产生一个空格

CSS 书写顺序

浏览器执行效率更高。

1、浮动 / display
2、盒子模型：margin border padding 宽度高度背景色
3、文字样式

使用伪元素清除浮动

为什么需要清除浮动？

• 父级没高度
• 子盒子浮动了
• 影响下面布局了，我们就应该清除浮动了

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

<div class="box clearfix">
    <div class="damao">大毛</div>
    <div class="ermao">二毛</div>
</div>
<div class="footer"></div>

关于 vertical-align:middle 的理解

属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。即是图片、span元素的基线和div的基线对齐。呢

关于vertical-align:middle的理解

关于 line-height 的理解

行高等于元素高，可将文本内容垂直居中。

p{ height: 50px; line-height: 50px; background: yellowgreen; width:100px; }
<p>测试文本</p>

没加行高：

行高等于元素高：

https://blog.youkuaiyun.com/liting_1992/article/details/120888328

子绝父相

定位的口诀：子级是绝对定位的话，父级要用相对定位。

1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2、父盒子需要加定位限制子盒子在父盒子内显示。
3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。

重点：竖向上布局找标准流，横向上布局找浮动，空间上布局找定位！

文字超出显示省略号

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;