============================

行级元素与块级元素的区别

行级元素:多个占一行

行级元素不能设置宽高；

行级元素标签举例:

<span> <a> <input>

块级元素:一个占一行

块级元素可以设置宽高块级元素标签举例:

<div> <h1~h6> <p>

常见的CSS选择器

标签选择器如:p{}
类选择器如.xxx{}
ID选择器如#xxx{}
伪类选择器如:hover
伪元素选择器如:before
子代选择器如:#content>li
后代选择器如:p span

注意!
id 名称必须是唯一的页面内不可重复

CSS知识点

CSS引入方式

内联样式 (优先级最高)
内部样式

<style>
</style>

外部样式

<link>/*引入css文件 后缀.css*/

CSS超链接样式

a:link{}:未被访问之前的样式
a:visited{}:已被访问过的样式
a:hover{}:鼠标悬停时的样式
a:active{}:在鼠标点击与瞬间释放之间发生的事件时的样式

注意！！！ 如设置必须按照以上顺序设置

选择器优先级

内联>ID选择器>类选择器=伪类选择器>标签选择器=标签选择器

！important 特殊性最高，详情访问重要性
对于内联样式，加1000
对于选中器中给定的ID属性值，加0100
对于选择器中给定的类属性，属性选择或伪类，加0010
对于选择器中给定的元素选择器和伪元素，加0001.
结合符和通配符选择器对特殊性没有任何贡献，0000

注意！！！

同一元素的相同样式权重相同的话后面的样式会覆盖前面

同一元素的相同样式权重不同的话按照权重大小展示

同一元素的不同样式会合并

标准盒模型怪异盒模型

标准盒模型

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型(IE盒模型)

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

外边距合并问题

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

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决办法:
1.可以为父元素定义1像素的上边框或上内边距
2.可以为父元素添加overflow:hidden
3.可以为父元素或子元素设置float
4.可以为父元素或子元素设置position:absolute

元素浮动造成结果及解决

浮动后造成的结果:父元素塌陷

解决办法:

1.父元素设置高度;

2.父元素设置溢出隐藏overflow:hidden;

3.在父元素内添加最后一个子元素,并且在子元素上设置清除浮动:clear:both;

4.clearfix

clearfix具体

.clearfix::atfer{
    content: '';
    display: block;
    clear: both;
}

居中展示

块级元素水平居中

div{
    margin:0 auto;
}

单行文本处置居中

行高等于容器的高度

div{
    width:200px;
    height:100px;
    /*行高*/
    line-height:100px;
    /*文本水平居中*/
    text-align:center;
}

块级元素垂直居中

div{
    width:300px;
    height:300px;
    line-height:300px;
    /*块级元素垂直居中*/
    vertical-align:middle;
    border:1px solid red;
}

常见的position及特点

常规取值： 1.static(静态） 2.Relative(相对） 3.Absolute(绝对) 4.fixed(固定)

static(静态)：HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中

Relative(相对):相对定位。特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

Absolute(绝对)：绝对定位特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。

fixed(固定)：固定定位。特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。(空间释放,相对于浏览器定位)

注意!
absolute(绝对定位)以最近定位的父元素元素为基准进行定位
定位后可用z-index设置层级

HTML,CSS知识点整理