css基础知识

通配符选择器（用来重置网页样式）**

　　*{

　　padding:0;

　　margin:0;

}

ul标签去除圆圈  list-style:none;

a标签去除下划线  text-decoration:none;

<p id="q1" class="lg lv" >清风</p> #可以给一个标签去多个类名

1.高级选择器

　　后代选择器 *****　

　　　　可以是儿子、孙子.....

 .father ul li p {
            color:red;
        }

　　子代选择器

　　　　只能是儿子

.father>p{
     color: red;
}
.father>ul>li{
     color: red;
}

　　组合选择器

　　　　多个选择器组合到一起共同设置样式

　　　　div,p,a,li,span{

　　　　　　font-size:14px;

}

　　交集选择器

        div.active{
            color: red;
        }

　　属性选择器

　　　　input[type="text"]

        form input[type="text"]{
            background-color: red;
        }
        form input[type="password"]{
            background-color: yellow;
        }

　　伪类选择器：LoVe HAte

　　　　a:link　　　　没有被访问

　　　　a:vistied　　　访问过后的

　　　　a:hover　　　　鼠标悬停的时候

　　　　a:active　　　　摁住的时候

　　伪元素选择器

　　　　p:before 在..的前面添加内容 一定要结合content

　　　　p:after  在...的后面添加内容，与后面的布局有很大的关系

        <!--将p标签首元素调整-->
        p:first-letter{
            color: red;
            font-size: 26px;
        }
        p:before{
            content: '^';
        }
        p:after{
            content: '$';
        }
        .box2{
            /*隐藏元素不占位置*/
            /*display: none;*/
            display: block;
            /*隐藏元素 占位置*/
            visibility: hidden;
            /*不占位置了*/
            height: 0;
        }

2.css的继承性和层叠性

　　继承性：color、text-xxx、font-xxx、line-xxx的属性是可以继承下来，盒子模型的属性是不可以继承下来的

　　　　a标签有特殊情况，设置a标签的的字体颜色要选中a，不能用继承性

　　层叠性：覆盖

　　　　1.行内>id>class>标签*****

　　　　2.数 id class 标签

　　　　3.继承来的属性，他的权重为0，与选中的标签没有任何可比性

　　　　4.如果都是继承来的属性，保证就近原则

　　　　5.都是继承来的属性，选择的标签一样近，再去数权重

3.盒模型

　　属性：

　　　　内容的宽高

　　　　height：内容的高度

　　　　padding：内边距 内容到边框的距离

　　　　border：边框

　　　　margin：外边距，另一个边到另一个边的距离

        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
            margin-left: 50px ;
        }

　　盒模型的计算：

　　　　总结：如果保证盒模型的大小不变，加padding就一定要减width或者减height

　　　　　　　　前提是在标准文档流

　　　　　　　　　　padding：父子之间调整位置

　　　　　　　　　　margin：兄弟之间调整位置

4.布局的方式  浮动

　　　　浮动能实现元素并排

　　　　盒子一浮动，就脱离了标准文档流，不占位置

　　float:right;  float:left;

 触碰标签显示小手 

cursor: pointer;