Day03

一.css样式中的属性

1.1.盒子模型的传参

<style>
     <div>
     width:40px;
     height:40px;
     background-color:red;
     margin:20px 30px 40px 50px;
<style>

margin传递的参数：
1——传递两个参数，先上下后左右；
2——传递三个参数，先上，左右，后下；
3——传递四个参数，先上，再右，再下，后左；

1.2.padding的传参

 div{
            width:100px;
            height:100px;
            background:red;
            padding:10px 20px 30px;
            border:1px solid #333;      /*对padding填充的修饰设置
        }

padding 传递一个参数，四面都被改变
传递两个参数，先上下，后左右
传递三个参数，上，左右，下
传递四个参数，上，右，下，左；

二.标签分类

1.1.块标签

  <h1>h1</h1>
        <p>p</p>
        <ul>
            <li>12</li>
            <li>2</li>
        </ul>
        <dl>
            <dt>dt</dt>
            <dd>dd</dd>
        </dl>
        <div>div</div>

其 h1 p div ul li dl dt dd ——块标签
特点：独占一行能设置宽高
且只有块标签可以实现元素居中（margin-right margin-left）

1.2.内联标签

<a href="#">a</a> 
<span> </span> 
<i>i</i> 
<em>em</em> 
<strong>strong</strong>

内联标签
特点：并排显示 不能设置宽高 不能设置
margin-top
margin-bottom

1.3.内联块

<input type="text">
<img src="images/icon1.png"alt="">
<button>btn</button>

内联块
input img button
特点并排显示 能设置宽高

1.4.内联标签，内联块的居中

 span{
            display: block;
            margin-right: auto;
            margin-left: auto;
            background: red;
            width:100px;
        }

内联元素和内联块元素水平居中（此方法将内联标签转化为块标签）
display: block;
margin-right: auto;
margin-left: auto;
块标签默认 display：block；
内联标签默认 display:inline;
内联块默认 display:inline-block;

<style>
        body{
            text-align: center;
        }
    
 </style>

此方法可不改变内联标签和内联块的display属性实现水平居中

三.选择器

1.1.兄弟选择器

div+p{
            color:red;
        }
div~p{
            color:red;
        }

<body>
    <div>div</div>
    <p>hellow</p>
    <p>hellow</p>
    <p>hellow</p>
    <p>hellow</p>
    <input type="text">
    
</body>

兄弟选择器
div+p{} 选择div之后的第一个p元素
div~p{} 选中di之后的所有的p元素

1.2.分组选择器

 <style>
        p,h1,div{
            color:red;
        }    
    </style>
</head>
<body>
    <p>hellow world</p>
    <h1>h1</h1>
    <div>div</div>
</body>

1.3.后代选择器

.parent>p{
            color:red;
        }


    
    </style>
</head>
<body>
    <div class="parent">
        <p>hellow </p>
        <p>hellow</p>
        <div>
            <p>hellow</p>
            </div>
     </div>
</body>

.parent>p{} 亲儿子选择parent之后的所有p元素

1.4.属性选择器

p[class="one"]{
            color:red;

        }
    

    </style>
</head>
<body>
    <p class="one">
        hellow 
    </p>
</body>

1.5.选择器的优先级排列

  p{
            color:red !important;
        }
        .one{
            color:yellow;
        }
        #two{
            color:green;
        }
    </style>
</head>
<body>
    <p class="one" id="two">hello world</p>
</body>

排列： ! important > id> class > p{ }

1.6.选择器的权重

   */
        .child{
            color:red;
        }
        .parent{
            color:green;
        }
    
    </style>
</head>
<body>
    <div class="parent">——————嵌套层次较浅
        <div class="child">child</div>——————嵌套层次较深
        </div>
</body>

嵌套层次深的权重比较重，优先调用