CSS基础知识整理

vivichen
191 阅读4分钟

清除浏览器默认样式，基础样式

cdn.bootcss.com/core.css/3.… github.com/necolas/nor…

基本概念：

  • 元素
  • 块级元素(block-level)
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。
  • 行内元素(inline-level)
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
  • 行内块元素（inline-block）
<img />、<input />、<td>
特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
  1. Static：默认值。没有定位，元素出现在正常的流中
  2. Relative：生成相对定位的元素，相对于其正常位置进行定位
  3. Absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位
  4. Fixed:生成绝对定位的元素，相对于浏览器窗口进行定位
  5. Inherit:规定应该从父元素继承position属性的值(不说这个也可以)
  6. absolute, fixed定位脱离文档流
  • css优先级计算规则
  1. ID选择器的特殊性值，加0,1,0,0。
  2. 类选择器、属性选择器或伪类，加0,0,1,0。
  3. 元素和伪元素，加0,0,0,1。
  4. 通配选择器*对特殊性没有贡献，即0,0,0,0。
  5. 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
  6. 行间样式的特殊性是1,0,0,0
  7. 当特殊性值也一样的时候，css规则会按顺序排序，后声明的规则优先级高
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/

<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第6、7行规则，第7行优先级高-->
</div>

  • a链接伪类顺序： :link、:visited、:hover、:active

  • 媒体查询

.pic{
        position: absolute;
        width: 1920px;
        top: 0%;
    }
    
    //窗口宽度大于1024px
    @media screen and(min-width: 1024px)
    {
        .pic{
            left: -260px;
            height: 540px;
            font-size: 12px;
        }
    }

    //窗口宽度大于1280px
    @media screen and(min-width: 1280px)
    {
        .pic{
            left: -260px;
            font-size: 14px;
            height: 555px;
        }
    }

    //窗口宽度小于1900px
    @media screen and(min-width: 1680px)
    {
        .pic{
            left: -1px;
            font-size: 16px;
            height: 600px;
        }
    }


  @media print {   
    textarea,input,select,textarea[disabled],input[disabled] {    
      color: rgb(0, 0, 0) !important;
    }   
    .ant-select-disabled{
      color:rgb(0, 0, 0) !important;
    }
  }
  • @keyframes
div
{
width:100px;
height:100px;
background:red;
position:relatives;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
avatar
文章
阅读
粉丝