HTML&CSS常见问题

一、HTML5新特性&语义化

增加了新标签，header、nav、main、article、section、aside、footer

1>HTML语义化

指的是合理的使用语义化标签构建页面

2>语义化的优点

1.在没有css的样式的情况下，页面也可以呈现很好的实现效果

2.代码结构清晰，易于阅读

3.便于开发和维护

4.有利于搜索引擎优化

二、CSS选择器的优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

三、position属性的值

releative：相对于自己偏移，不脱离文档流

absolute：相对于最近带有定位的元素定位，如果没有相对于整个元素定位，脱离文档流

fixed：根据浏览器的窗口进行定位

static：按照正常的文档流排列

sticky：定位基于用户滚动的位置

四、box-sizing属性

content-box: 该块的总宽度 = width + padding + border + margin

border-box: 该块的的总宽度 =  width + margin (width包含了padding+border)

五、BFC（块级化上下文）

布局规则：

1.内部的Box会在垂直方向，一个一个的排列

2.Box垂直方向的距离有margin值决定，两个相邻的Box的margin值会重叠

3.每个元素的margin的左边会与包含块borderbox的左边相接触

4.bfc区域不会与float box相重叠

5.bfc是一个独立的区域，容器里面的子元素不会影响外部的元素

6.计算bfc的高度时，浮动元素也会参与计算

如何创建BFC

1.根元素，及HTML元素

2.float的值不为none

3.position的值为absolute或者fixed

4.display-block的值为inline-block、table-cell、table-caption

5.overflow的值不为visible

BFC的使用场景

1.去除边距重叠现象

2.清除浮动等

六、文本、元素水平垂直居中的方式

1.文本水平垂直居中

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.text{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background: skyblue;
}
</style>
<!-- html 结构 -->
<div class="text">文本垂直居中</div>

2.元素垂直居中

1>使用绝对定位，根据calc属性进行计算（已知自身盒子的宽高） 

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
body{margin: 0;padding: 0;}
.calc{
  position: absolute;
  width: 200px;
  height: 200px;
  left:calc((100% - 200px)/2);
  top:calc((100% - 200px)/2);
   background: yellow;
}
</style>
<!-- html 结构 -->
<div class="calc">元素垂直居中</div>

2>使用绝对定位，结合margin：auto（已知自身盒子的宽高）

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
/* 绝对性定位 */
.div {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    background: skyblue;
}
</style>
<!-- html 结构 -->
<div class="div">margin: auto;元素垂直居中</div>

3>使用绝对定位，利用margin负值属性（已知盒子宽高）

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.div {
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    /*margin-left: -100px 0 0 -100px;*/
    background:red;
}
</style>
<!-- html 结构 -->
<div class="div">margin: -100px;元素垂直居中</div>

4>绝对定位，利用transform属性

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.div {
    position: absolute; /* 相对定位或绝对定位均可 */ 
    width:200px; 
    height:200px; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    background-color: pink;
}
</style>
<!-- html 结构 -->
<div class="div">利用 transform 进行垂直居中</div>

5>Flex布局

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
/* 利用 flex 布局 不需要盒子本身宽高 但需要父级盒子高度*/
.container { 
    display: flex; 
    align-items: center;/* 垂直居中 */ 
    justify-content: center; /* 水平居中 */ 
    height:100vh; /* 父元素高度需设置 */ 
} 
.container div {
    width: 200px; /* 宽高可以不设置 */ 
    height: 200px; 
    background-color: greenyellow;
}
</style>
<!-- html 结构 -->
<div class="container">
    <div>利用 flex 布局进行水平垂直居中</div>
</div>

6>table-cell布局

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
/* table-cell 不需要盒子本身宽高*/
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 500px;
    height: 500px;
    background: pink;
    
}
.table-cell div{
    width: 200px;
    height: 200px;
    background:skyblue;
    display: inline-block;

}
</style>
<!-- html 结构 -->
<div class="table-cell">
    <div >利用 table-cell 进行水平垂直居中</div>
</div>

七、隐藏页面元素的方法

1.opacity:0,元素隐藏起来，但是不会改变页面布局

2.visibility:hidden 元素隐藏，不会改变页面的布局

3.display:none,元素隐藏，会改变页面布局

八、用CSS实现三角符号

/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
  position: absolute;
  width: 0px;
  height: 0px;
  content: " ";
  border-right: 100px solid transparent;
  border-top: 100px solid #ff0;
  border-left: 100px solid transparent;
  border-bottom: 100px solid transparent;
}

九、Flex布局

容器的属性：

• flex-direction：决定主轴的方向（即子 item 的排列方法）flex-direction: row | row-reverse | column | column-reverse;
• flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reverse;
• flex-flow： .box { flex-flow: || ; }
• justify-content：对其方式，水平主轴对齐方式
• align-items：对齐方式，竖直轴线方向
• align-content

项目的属性（元素的属性）：

• order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
• flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大
• flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个 item 的 flow-shrink 为 0，则为不缩小
• flex-basis 属性：定义了在分配多余的空间，项目占据的空间。
• flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
• align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
• align-items，默认属 性为 auto，表示继承父元素的 align-items

十、清除浮动的方式

1.添加额外标签

<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>

2.设置高度

3.父级添加overflow属性

4.伪元素清除浮动

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

十一、rem布局

相当于根元素font-size计算。