前端html、css基础
一、html基础
如何理解html语义化？
- 例子：全用div就不是语义化，用 h1、p、ul、li等语义化标签就是
- 语义化优点：
- 代码可读性更高； 2.对搜索引擎更友好，提高seo
默认情况下，哪些html标签是块级元素，哪些是内联元素？
- 块级元素独占一行 display:block/table; div h1 h2 table ul ol p 等
- 内联元素会一个个往后排 display:inline/inline-block; span img input button 等
二、css 基础
盒模型宽度计算：
- 默认：offsetWidth = (内容宽度+padding+border）， 不含外边距（margin）；width只包含内容
- 设置box-sizing:border-box后，设置的width是包含了内容、padding、border
margin竖向重叠
- 相邻元素 margin-top和margin-bottom会重叠（取其二者中最大值）
- 空白内容的
也会重叠（不占高度）
marin 负值问题
- margin-top\left 为负，当前元素上移\ 左移
- margin-right\bottom 为负， 右侧\下发元素左移\上移，当前元素不受影响
BFC（Block Format Context, 块级格式化上下文）理解和应用
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
- 形成BFC的条件：
- float不是none
- position 是 absolute或 fixed
- overflow不是visible
- display是flex、inline-block等
- BFC常见应用：清除浮动 . bft{ overflow:hidden } 如下图：如果container不是bfc，img则会跑出去，而不是撑高容器
flex画筛子
- 常用语法：
- flex-direction:选择主轴
- justify-content：对齐方式
- align-items：
- flex-wrap:
- align-self:
<style type="text/css">
/* 画筛子 */
.box{
width:200px;
height: 200px;
border:2px solid #ccc;
padding:20px;
display: flex; /* flex布局 */
justify-content: space-between; /* 两端对齐 */
}
.item{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
#666;
}
.item:nth-child(2){
align-self: center; /* 居中对齐 */
}
.item:nth-child(3){
align-self: flex-end; /* 尾端对齐 */
}
</style>
<body>
<h1>筛子</h1>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
absolute和relative分别依据什么定位
- absolute 依据最近一层的定位元素定位（没有就找最上层body）
- relative 依据自身定位
居中对齐
- 水平居中
- inline元素： text-align：center；
- block元素： margin：auto；
- absolute元素： left:50%; margin-left: -宽度/2;
- 垂直居中
- inline元素： line-height等于height值；
- block元素： ；
- absolute元素
- 方法1：top:50%; margin-top: -高度/2;
- 方法2：transform(-50%,-50%);
- 方法3（最好）：top,left,bottom,right = 0; margin:auto;
line-height的继承问题：
- 具体数值、比例，直接继承（line-height:10px; line-height:1.5;）
- 百分比，继承计算出来的值（line-height:20%；height:100；继承：20px；）
响应式
- rem 相对长度单位，相对于根元素，数值可固定，适合响应式（配合media-query，根据不同屏幕宽度，设置对应根元素font-size）
- em 响度长度，相对于父元素，不固定
- px 绝对长度单位，不能响应式
- 如何实现响应式
css3 （动画）
- transform
手写浮动清除 clear fix
.clearfix:after{
content: "";
display: block;
clear:both;
}
.clearfix{
*zoom:1; /* ie6-7识别*，解决其兼容性 */
}
圣杯布局、双飞翼布局
技术总结：
- 使用float布局
- 两侧使用margin负值、以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding一个用margin
