CSS常用的Tips

CSS選擇器

1,CSS的引入方式

較常見為

    <!--引入外部的样式-->
    <link href="css/index.css" rel="stylesheet">
复制代码

以下寫法為行內樣式

• .focus

    <style>
        p[name="jack"]{
            color: red;
        }
        /* 伪类 */
        input:focus{
            /* 去掉外边框 */
            outline: none;
            width: 150px;
        }
        /*当鼠标移动上来的时候*/
        .main:hover{
            width: 300px;
            height: 200px;
            background-color: yellow;
        }
        /*下面兩個是偽元素*/
        p[age="10"]:first-letter{
            color: red;
        }
        p[age="10"]:before{
            content: url("https://xxx.jpg");
        }


    </style>
复制代码

2,css样式遵守的规则:

     1.相同类型的选择器遵守:a.就近原则 b.叠加原则
     2.不同类型的选择器遵守:
       important > 内联(行内) > id选择器 > 类选择器 > 标签选择器
复制代码

3,HTML有N多标签，根据显示的类型，主要可以分为3大类

• 块级标签 独占一行的标签 能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

• 行内标签（内联标签） 多个行内标签能同时显示在一行 宽度和高度取决于内容的尺寸（比如span、a、label）

• 行内-块级标签（内联-块级标签） 多个行内-块级标签可以显示在同一行 能随时设置宽度和高度（比如input、button）

CSS中有个display属性，能修改标签的显示类型 none：隐藏标签

block：让标签变为块级标签

inline：让标签变为行内标签

inline-block：让标签变为行内-块级标签（内联-块级标签）

4,注意:以上的塊級,行內,行內-塊級佈局都屬於標準流佈局,而有些時候我們看到有些網站上面有些按鈕是懸浮於整個頁面上的,這就需要脫離標準流了

• 樣式裏面加上 flout:left; 意思為浮動到父控件的最左邊
• 使用 position 有一個原則是 子絕父相(子絕對定位父控件相對定位) 在父控件的樣式中加上 position:relative; 在子控件的樣式中加上 position:absolute; 然後在子控制的樣式中如 left:30; top:50;等都是相對於父控件的精準定位了,如果想相對於整個瀏覽器則用 position:fixed; 即可直接設置left:..等

5,像有些網頁當我們拉小寬度時會自適應屏幕,這就用到了屏幕監測,例如下面代碼,當寬度小於1095時將a標籤寬度變為150px

/*自适应布局*/
@media screen and (max-width: 1095px){
        #nav ul li a{
            width: 150px;
        }
}
复制代码

转载于:https://juejin.im/post/5a5d998b6fb9a01caa208876