css写法，css选择器，css几种常见样式，盒模型定位，浮动，元素塌陷问题，雪碧图

KaltZK 发布于2019-08-29 16:17 / 2133人阅读

摘要：选择器权重值选择器在选择的时候是从后往前选择的，不是从前往后。内联权重值常用的几个样式表示通配符，所有标签都使用。

css的写法

1.内联样式:样式直接写在标签里面。
2.内部样式：样式写在

哈哈

哈哈是蓝色

哈哈

交换类选择器的顺序，哈哈还是蓝色

哈哈

style> 交换类选择器定义的顺序，哈哈变成了红色

哈哈

嘎嘎

嘎嘎的样式会重叠，蓝色字体，绿色背景，这样实现多样化，没有多id选择器，尽量使用类选择器。

h1

h1，p全是浅蓝色

h1

 h1是浅蓝色,选中了同时满足既是h1标签又是ff类的。

3.id选择器权重值100

css选择器在选择的时候是从后往前选择的，不是从前往后。比如


    DIV

他是先找id是div的，再看他是不是div标签，css中id是唯一的，这里多判断了一次，多此一举。

4.分组选择器（用，分隔表示同时选中不同的选择器）
5.后代选择器（用空格表示谁的后代）
6.子代选择器（用>表示）

#div h1{
    background: blue;
    }

    h1
    
        h11
      

h1,h11全是蓝色。

只想让儿子h1是蓝色
 #div1 > h1{
    background: blue;
    }

    h1
    
        h11
      

h1是蓝色。

7.伪类选择器

#div2:hover{
    background: red;
}
div2
鼠标划到div2上背景变成红色，IE6只支持给加hover

#ul1 li:first-child{
    background: red;
 }
 
     item1
     item2
 
 item1背景是红色。
 
 #ul1 li:nth-child(2)
      }
表示第二个列表项是红色

#ul1 li:nth-child(2n)
      }
表示偶数项列表项是红色

#ul1 li:nth-child(2n+1)
      }
表示奇数项列表项是红色

#div3 h1:nth-child(1){
    color: red;
   }

    h1
    pppppp
    h1h1h1h1

h1是红色


 #div3 p:nth-child(1){
    color: red;
   }

    h1
    pppppp
    h1h1h1h1

都没有变化，nth-child（1）和前面什么标签没有关系，就表示第一个孩子。想要和标签类型与关要使用nth-of-type(1)

  #div3 p:nth-of-type(1){
    color: red;
   }

    h1
    pppppp
    h1h1h1h1


pppppp是红色

8.伪对象选择器

#p1{ height: 200px; width: 100px; background: #ccc; } #p1；first-line{ color: red; }

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

显示出来的每一行不一点就是代码中写的字数，加了伪对象选择器，第一行哈哈哈。。。是红色。

伪类伪对象区别？

伪类的对象是真实存在的，想给她设置样式的时候直接选中。
伪对象的对象是不存在的，相当于浏览器选中的一行哈哈哈，给它加了一个隐式的元素，对这个元素设置样式。

内联权重值 1000

常用的几个css样式

*表示通配符，所有标签都使用。

rgba( , , , )最后一个值是透明度 0-1 值越小越透明
opacity的值是会继承的，解决办法1：把两个div设置成兄弟，不是父子。

                  解决方法2：使用rgba()。

把background的属性写在一行 background： url（"1.jpg") no-repeat rgba(80,80,80,0.5);

    #div1{
        width: 200px;
        height: 200px;
        background: #ccc;
        text-align: center;
        line-height: 200px;
        }
     哈哈
     哈哈会水平垂直居中在灰色框中，但是line-height=height只能设置单行文本。
     
     #div1{
        height: 150px;
        width: 150px;
        background: #ccc;
        display: table;
     }
    #div2{
        display: table-cell;
        vertical-align: middle;
    }
    
        
               哈哈哈哈哈哈哈哈哈
               或或或或或或或或或或或或或或
               或或或或或或或或或或或或或或或或或或或

实现多行文本垂直居中 text-decoration: none;可以去掉下划线。 text-indent :20px; 首行缩进20像素。 盒模型

网页中所有的元素都是框
行框：由内容大小撑起来的。

 display: block转化成块级元素。

块框：垂直分布。

 宽是自适应的，意思是占据父元素的剩余空间，高是内容的高度。
 可以设置宽高。
 display: inline转化成行级元素。    

display: inline-block 元素水平排列并且可以设置宽高。

margin设置一个值：上下左右

      两个值：上下 左右
      三个值：上 左右 下
      四个值：上 右 下 左

外边距合并问题

    #a, #b{
        height: 100px;
        width: 100px;
        background: #f00;
    }
    #a{
        margin-bottom: 50px;
        }
    #b{
        margin-top: 30p取了较大值x;
        }
    a
    b
    兄弟关系，两个红框垂直分布，取了较大值，间距是50px。
    
    #a, #b{
        height: 100px;
        width: 100px;
        background: #f00;
    }
    #a{
        width :200px;
        height: 200px;
        }
    #b{
        margin-top: 30px;
        background: #0f0;
        }
    
        
    
    父子关系，父子会一起向下移动30px。
    解决方法： 1.给父元素加边框，设置边框透明也会有阴影。
              2.给父元素加下内边距，但是父元素会变宽，设置狂傲是给内容设置。
              3.给子元素加浮动 float: left;
              4.给子元素加绝对定位：poosition: absolute;
              5.给父元素加 overflow: hidden;
   
   去掉在IE6下会生成怪异盒模型，设置的宽高包括内容，padding,border. 
   box-sizing: content-box; 标准浏览器下
   box-sizing: border-box; IE6浏览器下 宽高包括三部分。

定位

    相对定位：相对于自己之前的位置
             不释放空间，后面的元素不会挤上来。    
    绝对定位：相对于最近已定位的祖先元素，不一定是父元素
             会释放空间，后面的元素会挤上来。  
    固定定位：相对于浏览器定位
             释放空间
             块级元素加了这个属性之后，宽度不再是自适应，而是由内容撑开。

浮动

    #a，#b, #c{
         width： 100px；
         height： 100px；
         }
   #a{
           background: red;
           float: left:
          }
   #b{
           background: green;
          }
   #
           background: blue;
          }   
         
      
        
    红色会把绿色盖住
    如果全都向左浮动，三个快排列在左侧，从左向右 红 绿 蓝
    如果全都向右浮动，三个快排列在右侧，从右向左 红 绿 蓝
    
    float可以让块级元素横过来，display：block也可以让元素横过来，两者的区别？
    display：block 块之间会有间隙，float是紧贴着的。这个间隙是代码中不同的div换行导致的。
    inLine-block不会导致元素释放空间。浮动会导致元素空间释放，后面的挤上来。
    
    不想让某个元素浮动： clear: both;

元素塌陷问题

浮动导致元素塌陷问题

    list-style: decimal数字
    
    #ul1{
        background: #ccc;
        list-style: none;
        }
    #ul1 li{
            background: #f00;
            float: left;
        }
      
        item1 
        item2 
        item3 
       
    ul的高度变成0，因为子元素浮动，空间释放了，没有子元素撑着父元素，父元素没有高了。
    解决方法1：已知父元素高度直接加高度。
           2： 在列表项最后再加一个li，设置样式 float: none clear:both, 相当于新加一个空列表项，他不浮动，自己撑着空间。
           3：父元素加 overflow: hidden       
           overflow:hidden是解决溢出问题的，这场来说不能解决其他问题，但是他在这就是好使，这叫做css hack ,用特殊手段解决浏览器兼容性问题。

雪碧图

     #div1{         
          width: 136px;
          height: 63px;
          background: url("1.jpg") no-repeat -152px -402px #ccc; 数字是小块图片的左、上外边距
          }
          
     性能优化的一种方式

私有云混合云 css选择器基础选择器css 浮动-前端-css css样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113648.html

读后总结--精通css高级web标准解决方案（第二版）

摘要：无论是否移动，元素仍然占据原来的空间。绝对定位绝对定位使元素的位置与文档流无关，因此不占据空间。为啥读这本书现在前端圈子过于浮躁，掌握基础无疑比掌握一个js框架重要 css怎么都能写出来，但是要写的好写得快还得多读书 css魔法推荐的，读完这个读读css揭秘当然，根本原因还是觉得自己掌握不好开始总结吧~ 一. 基础知识经过上世纪没有 css的痛苦时的混沌时期，人们开始了进...

leone 2019-08-30 13:05 评论0 收藏0
【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

MangoGoing 2019-08-29 15:30 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

zorro 2019-08-22 17:30 评论0 收藏0
前端面试题2（CSS）

摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。前端面试之CSS display: none; 与 visibility: hidden; 的区别联系：它们都能让元素不可见区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

meteor199 2019-08-05 13:57 评论0 收藏0