CSS工具箱

1，盒模型的居中：

margin: 0 auto;      /*block 元素居中*/

text-align: center;  /*inline inline-block 元素居中*/

2，图片的居中 

链接：https://blog.csdn.net/wang414300980/article/details/75089066

3，position属性

1）static（默认属性）

2）relative（相对位置，例子：质能公式）

          * 非 static 元素可以用 top left bottom right 属性来设置坐标

            例如：

    position: relative;
    top: 36px;
    right: 70px;

3）absolute（绝对位置，以非static属性为靠；会随着页面滚动）

4）fixed（不会随页面滚动）

4，链接的属性

_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

例：

<a href="http://tech.sina.com.cn/i/2018-05-09/doc-ihaichqz0837923.shtml"  target="_blank">

新浪发布2018年第一季度未经审计财报</a>

5，清除浮动的属性：clear

left：清除左侧的浮动

right：清除右侧的浮动

both：清除两侧的浮动

none：默认值，允许浮动元素出现在两侧

inherit：规定应该从父元素继承 clear 属性的值

6、@media 标签 （使用 @media 查询来制作响应式设计：）

https://www.runoob.com/cssref/css3-pr-mediaquery.html

媒体类型：

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕，平板电脑，智能手机等。

speech：应用于屏幕阅读器等发声设备

媒体功能：……

例子：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

7，样式优先级(从高到低)
    !important
    内联样式
    <style> 中的样式
    link 中的样式

8，选择器优先级(从高到低)
    !important
    内联样式
    id 选择器
    class 选择器
    元素选择器