前端复习

前言：很繁琐，但是也有成就感。只贴图片，保证对内容有个印象，以后碰到意外情况知道原因。近来设计页面，发现很多磕磕绊绊的地方，基础不牢地动山摇啊，后续只会不经意间花费更多时间。

html

快速生成css样式同理，大多只需要单词首字母，然后tab

css

块级元素-行内元素-行内块元素区别

1、块元素，也可以称为行元素，布局中常用的标签，如：div、p、ul、li、h1-h6等等都是块元素

2、内联元素，也可以称为行内元素，布局中常用的标签，如：a、span、em、b、strong、i等等都是内联元素

3、内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。

页面布局之margin和padding区别

注：从内部往外部想总体占用空间
参考链接：CSS 彻底理解margin与padding

复合选择器

注：后代选择器和子元素选择器是一样
后代选择器----空格
子元素选择器---->
并集选择器----,

链接a伪类选择器器----:
inpu的focus选择器----:focus
块级元素----div（独占一行，无实义）
行内元素----span（不独占一行，无实义）

元素显示模式装换display----可以将块级转化为行内，行内转化为块级，行内转化为行内块

 <style>
     a {
         width: 150px;
         height: 50px;
         background-color: pink;
         /* 把行内元素 a 转换为 块级元素 */
         display: block;
     }

     div {
         width: 300px;
         height: 100px;
         background-color: purple;
         /* 把 div 块级元素转换为行内元素 */
         display: inline;
     }

     span {
         width: 300px;
         height: 30px;
         background-color: skyblue;
         display: inline-block;
     }
 </style>

背景样式----background-image: url(images/logo.png);（本来不用专门提出来，只是自己比较容易混淆）

常见背景方位名词应用（这个在定位时极其有用）

    <style>
        div {
            width: 300px;
            height: 300px;
            /* backgroud 前缀名相同的可以复合写*/
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* background-position:  方位名词; */
            /* background-position: center top; */
            /* background-position: right center; */
            /* 如果是方位名词  right center 和 center right 效果是等价的 跟顺序没有关系 */
            /* background-position: center right; */
            /* 此时 水平一定是靠右侧对齐  第二个参数省略 y 轴是 垂直居中显示的 */
            /* background-position: right; */
            /* 此时 第一个参数一定是 top y轴 顶部对齐   第二个参数省略x  轴是 水平居中显示的 */
            background-position: top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            /* rgba 第四个参数是透明度*/
            background: rgba(0, 0, 0, .3);

        }
    </style>

css三大特性-层叠、继承、优先

层叠性：
相同样式情况，代码从上往下执行，最后一个样式生效

继承性：
子标签继承父标签，但也不是所有都能继承。
text-、font-、line-元素开头可以、color可以（较常用）

优先级：
范围越小，越精确描述（标签-类-id）优先级越高，行内style更高，!important最高。
继承过来不具有比较性，权重最低。
复合选择器，权重叠加，就是下面选择器权重值相加

盒子模型-浮动-定位

注：只标出一些重点

清除浮动-为什么需要清除

4种方式

清除浮动之双伪元素清除

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

CSS属性书写顺序

定位-子绝父相

注：
-1、静态定位
1、相对定位，相对原位置移动，但占有原位置
2、绝对定位，不占有原位置
3、固定定位、固定屏幕上某处，不占有位置
4、粘性定位、占有原先位置