00.CSS基础知识回顾

2018-01-23  本文已影响0人  Ching_Lee

1.选择器

标签名 {}
p {}：选中所有的p元素
h1 {}：选中所有的h1元素

#id {}
#p1 {}:选中id为p1的元素

.class {}
.pclass {}：选中类为pclass的所有元素
结合元素选择器
a.class{}：选中类为class的a元素
多类选择器
.p1.p2{}: 选中类为p1同时为p2的元素

p[title] {}：选中所有包含title属性的p元素
p[title="hello"]{}：选中所有title属性值是hello的元素

父元素>子元素{}

div>span{}：选中div元素中的子元素span，只能是一代父子关系

div span{}:选中所有div中的span
#d1 p span{}：选中id为d1的p元素中的所有span元素

<style>
    div+p{
      background-color:blue;
    }
</style>
</head>

<body>
  <div>
      <div>
          <p>品</p>
      </div>
       <p>品</p>
       <p>品</p>
       <p>品</p>
       <p>品</p>
  </div>

</body>

<style>
    div~p{
      background-color:blue;
    }
</style>
</head>

<body>
  <div>
      <div>
          <p>品</p>
      </div>
       <p>品</p>
       <p>品</p>
       <p>品</p>
       <p>品</p>
  </div>

</body>

#p1,.p2,h1 {}:选中id为p1、类为.p2、元素为h1的所有元素。只需满足一个条件

当选择器中包含多种选择器时，将优先级相加再比较。但是注意，选择器的优先级计算不会超过他的最大数量级。

如果选择器优先级一样，则使用靠后样式。

并集选择器的优先级是单独计算
div,p,#p1,.hello
可以在样式的最后添加一个!important;则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示，但不推荐使用。

2.CSS基本样式

3.CSS定位

1）CSS定位属性

position:把元素放在static、relative、absolute、fixed的位置中。

top:元素向上的偏移量
left:元素向左的偏移量
right:元素向右的偏移量
bottom:元素向下的偏移量
overflow:设置元素溢出其区域发生的事情
clip:设置元素显示的形状
vertical-align:设置元素垂直对齐方式
z-index：设置元素的堆叠顺序，谁值大谁呈现在前面。

2）CSS浮动
<style>
    #box1{
      border:10px blue solid;
    }
    #box2{
        width:200px;
        height:200px;
        background-color:yellow;
    }
    #bottombox{
       height:200px;
       background-color:red;
    }
</style>
</head>

<body>
<div id="box1">
    <div id="box2"></div>
</div>
<div id="bottombox"></div>

可以看到box1的高度是由其子元素box2撑起来的。


当我们让子元素box2浮动：

#box2{
        width:200px;
        height:200px;
        background-color:yellow;
        float:right;
    }

box1已经没有高度了。



解决方法：
1）IE6之外浏览器
通过overflow:hidden给塌陷的父元素开启BFC
当开启元素的BFC后元素会具有如下特点:


2)IE6不支持BFC模式，利用zoom：1开启hasLayout

<style>
    #box1{
      border:10px blue solid;
      overflow:hidden;
      zoom:1;
    }
    #box2{
        width:200px;
        height:200px;
        background-color:yellow;
        float:right;
        
        
    }
    #bottombox{
       height:200px;
       background-color:red;
    }
</style>
</head>

<body>
<div id="box1">
    <div id="box2"></div>
</div>
    <div id="bottombox"></div>
</body>

3）利用clear属性，为父元素的：after尾元素清除浮动(IE6不支持)

<style>
    #box1{
      border:10px blue solid;
    
    }
    #box2{
        width:200px;
        height:200px;
        background-color:yellow;
        float:right;
        
        
    }
    #bottombox{
       height:200px;
       background-color:red;
    }
    
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
    .clearfix{
             <!--IE6还是要用zoom -->
      zoom:1;
     }
</style>
</head>

<body>
<div id="box1" class="clearfix">
    <div id="box2"></div>
</div>
    <div id="bottombox"></div>
</body>

4.CSS盒子模型

盒子模型

5.CSS常用操作

1）使用margin属性进行水平对齐

//使div居中
margin-left:auto;
margin-right:auto;
//上面代码等同于
margin:0px auto;

2）使用position属性进行左右对齐

//向右对齐
position:absolute;
right:0px;
//向左对齐
position:absolute;
left：0px;

3）使用float属性进行左右对齐

//向右对齐
float:right;
//向左对齐
float:left;
上一篇下一篇

猜你喜欢

热点阅读