css重要知识点总结（1）

css重要知识点总结（1）

一、*{margin：0；padding：0；}

       body ,ul, li,p,h1~h6,dd,dt 等……都有默认的margin 或padding值的，加上这句就可以删除浏览器这些默认值，方面后面的设置。（注：不是没它不行，只是方便而已）

      比如我们自己写网站，规模小，标签内容少，那么* {}就可以重置一些基本样式，就不需要为那么多的标签分别重置样式。

      新浪等一些大站，内容多，多每个标签要求也很高。那么他们就要把每个标签的默认属性都调为一样。除了用* {}还要对标签分别设置。

二、line-height

line-height：单行文本所占高度

height：容器所占高度

font-size：设置文本高度

实现单行文本在容器中垂直居中：height=line-height；

 

<div>
    新浪新闻新浪新闻新浪新闻新浪新闻
</div>

div{
           border:1px solid black;
           height: 200px;
           line-height: 200px;/*height=line-height 垂直居中*/
           text-align: center;/*水平居中*/
           font-size:16px;
       }

效果：

 

三、选择器权重

 

选择器	权重
！important	infinity
内联样式	1000
id	100
class|属性|伪类	10
标签|伪元素	1
通配符	0

 

 

 

 

 

 

 

 

 

 

 

优先选择权重大的选择器；权重相等选择后一个选择器

计算选择器权重;

如 #id p{}   权重为：100+1=101

特殊：infinity+1>infinity

 

<div class="main" >
</div><!--class权重高，所以样式呈现的是.main的样式-->

 

*
    {
        padding: 0;
        margin: 0;
    }

    div{
        width: 100px;
        height:100px;
        border: 10px dotted green;
    }
    .main{
         width: 100px;
         height: 100px;
         border: 10px solid red;
     }

效果：

 

四、颜色代码

 

00-ff代表饱和度

transparent   透明色（底部颜色）

 

 

五、用border画三角形

<div>
</div>

 

*
    {
        padding: 0;
        margin: 0;
    }

    div{
        width: 0px;
        height:0px;//使上下左右边框为填充的三角形
        border: 100px solid black;
        border-bottom-color:red ;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: transparent;//只剩下底部边框为红色，其他边框都为透明色
    }

效果：

 

六、行级元素、块级元素、行级块元素

 

HTML标签基本分为三类：

 

1.行级元素/内联元素（inline）

特点：内容决定元素所占位置；不可以通过css改变宽高

代表：span   strong     em    a    del

 

2.块级元素（block）

特点：独占一行；可以通过css改变宽高

代表: div  p  ul   li   ol  form   address

 

3.行级块元素（inline-block）

特点：内容决定宽高，可以改宽高

代表：img

 

4、但很重要的一点：可以通过display来改变

如：span{display：block}，此处span会变成块级元素

 

5、一个小问题：

 

<div>
    <img src="timg.jpg">
    <img src="timg.jpg">
    <img src="timg.jpg">
    <img src="timg.jpg"><!--四张相同照片-->
</div>

 

*
    {
        padding: 0;
        margin: 0;
    }
img{
        width: 100px;
        height:120px;
    }//设置的照片长宽

效果：

为什么照片中间会有间隙？

因为凡是带有Inline或inline-block的元素，都有文字特性（如编辑器中空格分隔文字，该空格在浏览器中占4px）

解决方法:去掉文字分隔符即在编辑器中标签之间不留空格，空格被认为是文字分隔符

<div>
    <img src="timg.jpg"><img src="timg.jpg"><img src="timg.jpg"><img src="timg.jpg">
</div>

css不变

 

效果：

注意：不可以用margin-left：-4px,因为文件打包时会合起来进行压缩，即去空格，去回车，那么图片会嵌进去

 

可能会变成如图所示情况：

 

七、写项目时要注意可读性

 

<div class="red size2"></div>
<div class="green size1"></div>

 

*
    {
        padding: 0;
        margin: 0;
    }//也由于权重为零，方便对元素的修改
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
    .size1{
        width: 100px;
        height:100px;
    }
    .size2{
        width:200px;
        height:200px;
    }

 

先定义功能，后在HTML中选样式，那么样式可以给很多标签使用。

比如可以专门写一个css文件用于导航栏

 

八、定位

 

1、position：absolute     脱离原来位置，则原来位置空了

相对于最近的有定位的父级进行定位，如果没有相对于文档html进行定位

（1）

<div class="wrapper">
    <div class="content"></div>
    <div class="content1"></div>
</div>

 

*
    {
        padding: 0;
        margin: 0;//body的margin默认为8px
    }
    .content{
        width: 100px;
        height:100px;
        background-color: red;
        opacity: 0.5;
        position: absolute;
    }
    .content1{
        width: 200px;
        height: 200px;
        background-color: green;
    }

效果：

可以看到原来content所占位置被content1占了，content父级元素没有定位，相对于文档进行定位

 

（2）

<div class="wrapper">
    <div class="content">
        <div class="content1"></div>
    </div>
</div>

 

*
    {
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width: 200px;
        height: 200px;
        background-color: orange;
        margin-left: 100px;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-left: 100px;
    }
    .content1{
        width: 50px;
        height:50px;
        background-color: red;
    }

效果：

 

修改css:

*
    {
        padding: 0;
        margin: 0;
    }
    .wrapper{
        position: relative;//将大盒子改为相对定位
        width: 200px;
        height: 200px;
        background-color: orange;
        margin-left: 100px;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: green;
        margin-left: 100px;
    }
    .content1{
        width: 50px;
        height:50px;
        background-color: red;
        position: absolute;//将小盒子改为绝对定位
        left: 50px;//且向右偏移50px
    }

效果

发现content1是相对于wrapper定位的

2、position：relative   保留原来位置进行定位

相对于自己原来的位置进行定位

position:fixed  相对于窗口可视区

3、很重要一点

在进行元素定位时可以：relative作为参照物（对后续元素没有影响）    absolute定位