css

头像
sly94
    阅读 9 分钟

    一. link和import都可以为页面引入css,区别?
    link方式:<link rel="stylesheet" href=""/>
    @import 方式 <style>
    @import "a.css"
    </style>

    ① 祖先的差别,link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情,比如定义RCC,定义rel连接属性等;@import就只能加载css了。

    ② 加载顺序的区别。当一个页面被加载的时候,link引用的css会同时被加载,而@import引用的css会等到页面全部被下载完再被加载。所以有时候浏览@import加载css的页面时开始会没有样式(就是闪烁),网速慢时更为明显

    ③ 兼容性的差别,@import是css2.1提出的所有老浏览器不支持。@import只有在IE5以上的才能识别,而link标签无此问题

    ④ 使用DOM控制样式时的差别,当使用JavaScript控制DOM改变样式时,只能使用link标签,@import不是DOM可以控制的

    二. css盒子模型,与低版本IE的盒子模型区别
    标准盒子模型(IE6以上版本和firefox,chrome等):宽度 = 内容宽度(content)+border+padding+margin
    图片描述
    低版本IE盒子模型(IE6和以下的版本):宽度 = 内容宽度(content+border+padding)+margin

    图片描述

    三. box-sizing属性(content-box默认值与W3C标准盒子模型一致,元素外盒宽高=content+padding+border+margin,css中设置的width只是包含content的宽;border-box与IE低版本的盒子模型一致,外盒宽高 =content(content+padding+border)+margin),css中设置的width包含content+padding+border宽度;inherit默认继承父类盒子模型。

    <style>
        #content{
            width: 100px;
            height: 100px;
            margin: 30px;
            padding: 20px;
            border:5px solid #333;
            background-color: #f00;
    
        }
        .content1{
            box-sizing:content-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            border:5px solid #f00;
            margin: 30px;
        
        }
        .img{
            width: 100%;
            height: 100%;
            display: inline;
        }
    
        .content2{
            box-sizing:border-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            border:5px solid #f00;
            margin: 30px;
        
        }
      
    </style>
    
    <div id="content">
    
    </div>
    <div class="content1">
        <img class="img" src="../src/assets/images/background-image.jpg">
    </div>
    <div class="content2">
        <img class="img"  src="../src/assets/images/background-image.jpg">
    </div>

    图片描述

    四.css选择器有哪些?哪些属性可以继承
    css选择器:id选择器(#id),类选择器(.class),标签选择器(div p h1-h6 em strong等),相邻选择器(h1+p),子选择器(ul>li),后台选择器(li a),通配符选择器(*),属性选择器(a[name=’content’]),伪类选择器(a:hover,li:nth-child)

    可继承的属性:font-size,font-weightfont-family等以font开头的属性,color

    不可继承的属性:borderpadding margin width height 等

    优先级(就近原则):!important>[id>class>tag]

    !important比内联优先级高

    五. css优先级算法如何计算
    !important最高

    内联样式:1000

    Id选择器:100

    类选择器 伪类选择器 属性选择器:10

    标签选择符:1

    通用选择器,子选择器,相邻同胞选择器:0

    六. css3新增伪类有哪些
    p:first-of-type 对应p:first-child 父元素的第一个元素

    p:last-of-type 对应p:last-child 父元素的最后一个元素

    p:only-of-type 对应p:only-child 父元素的唯一的子元素

    p:nth-of-type(2) 对应p:nth-child(2) 父元素的第二个子元素

    p:nth-last-of-type 对应p:nth-last-child(2) 父元素第二个子元素,从最后一个元素开始计数

    :enabled :disabled 表单控件的禁用状态

    :checked单选框或复选框被选中

    :not :not(p)选择非p元素的每个元素

    :root 选择文档的根元素

    :empty p:empty 选择没有子元素的每个p元素

    :target #news:target 选择当前活动的#news元素

    [attr^=value] a[name^=’abc’]匹配属性name的值以abc开头的所有a元素

    [attr$=value] a[name^=’abc’]匹配属性name的值以abc结束的所有a元素

    [attr*=value] a[name^=’abc’]匹配属性name的值包含abc的所有a元素

    ::selection 被用户选取元素部分

    <style>
        p:first-of-type{
            color:red;
        }
        p:last-of-type{
            color: green;
        }
        p:nth-of-type(2){
            color:yellow;
        }
        p:nth-last-of-type(2){
            color:tan;
        }
        p:only-of-type{
            color: darkturquoise;
        }
    
        .testChild:first-child{
            background-color: slateblue;
        }
        .testChild:last-child{
            background-color: salmon;
        }
        .testChild:nth-child(2){
            background-color: purple;
        }
        .testChild:nth-last-child(2){
            background-color: palegreen;
        }
        .testAttr[name*='a']{
            color: orange;
        }
        .testAttr[name^='mn']{
            color: olivedrab;
        }
        .testAttr[name$='xyz']{
            color: navy;
        }
    </style>
    
    <div class="testType">
        <p>11</p>
        <p>22</p>
        <p>33</p>
        <p>44</p>
        <p>55</p>
    </div>
    <div>
        <p>66</p>
    </div>
    <div>
        <p class="testChild">aa</p>
        <p class="testChild">bb</p>
        <p class="testChild">cc</p>
        <p class="testChild">dd</p>
        <p class="testChild">ee</p>
    </div>
    <div>
        <label class="testAttr" name="abcdefgsaaahijkdddlmno">哈哈</label>
        <label class="testAttr" name="mnox">呵呵</label>
        <label class="testAttr" name="xicixyz">哄哄</label>
    </div>
    
    

    七. div如何垂直水平居中

    <style>
    .content{
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .content1{
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .content2{
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        position:relative; 
     
    }
    .img{
        width: 100px;
        height: 100px;
      
    }
    .img2{
        width: 100px;
        height: 100px;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
    .content3{
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        position:relative; 
    }
    .img3{
        width: 100px;
        height: 100px;
        position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
    }
    .content4{
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
        position:relative; 
    }
    .img4{
        width: 100px;
        height: 100px;
        margin-top: 100px;
        margin-left: 100px;
    }
    </style>
    
    <div class="content">
        <img src="../src/assets/images/background-image.jpg" alt="" class="img">
    </div>
    <div class="content1">
        <img src="../src/assets/images/background-image.jpg" alt="" class="img">
    </div>
    <div class="content2">
        <img src="../src/assets/images/background-image.jpg" alt="" class="img2">
    </div>
    <div class="content3">
        <img src="../src/assets/images/background-image.jpg" alt="" class="img3">
    </div>
    <div class="content4">
        <img src="../src/assets/images/background-image.jpg" alt="" class="img4">
    </div>

    图片描述

    八. display有哪些值?说明作用
    ① display:none;

    ② display:block;(块级元素,单独占一行,块级元素都是从上向下排列,设置width,height,padding,margin均有效)

    ③ display:inline;(内联元素从左向右排列,设置width,height无效,宽高根据自身的文字高度和长度。padding和margin设置上下值无效,左右值有效,padding-top和padding-bottom不会影响它的高度,但是会影响他的背景高度。)

    <style>
        .content{
            margin-top: 100px;
            width: 200px;
            color:red;
            border:1px solid #333;
            height: 100px;
        }
        .demo{
            margin:50px;
            padding: 30px;
            background-color: green;
        }
    </style>
     <div class="content">
       <span class="demo"> hhh</span>
     </div>
    

    图片描述

    ④ display:inline-block(结合了block和inline两个元素特征,不单独占一行,并且设置宽高都有效,padding,margin不管上下还是左右都有效)

    ④和⑤,inline和inline-block元素之间的空白(解决方案:1.设置父元素的font-size:0,子元素自行设置元素字体大小,如果要有兼容性问题结合letter-spacing或word-spacing去除间隙;2:编写inline元素和inline-block元素时,直接写在一行)

    ⑥display:table;display:table-cell将元素类似表格元素垂直水平居中显示

    ⑦display:flex 详见http://www.ruanyifeng.com/blo...^%$

    九:position的值

    static(默认):按照正常文档流进行排列,忽略top,bottom,left,right或者z-index
    relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;
    absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;
    fixed(固定定位):所固定的参照对像是可视窗口。
    inherit继承父元素position属性的值
    十:css3有哪些性特征。参考https://segmentfault.com/a/11...

    十一:用纯css创建一个三角形的原理?
    首先需要把元素的宽高设置为0,然后设置边框样式。border分为border-top,border-right,border-bottom,border-left。详细参考http://www.cnblogs.com/jack-c...

    
      .content{
            border-top: 50px solid #f00;
            border-right: 50px solid #0f0;
            border-bottom: 50px solid #00f;
            border-left: 50px solid rgb(85, 201, 255);
            height: 0;
            width: 0;
        }
        .right{
            width: 0;
            height: 0;
            border-left: 50px solid #f00;
            border-top:50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .left{
            width: 0;
            height: 0;
            border-right: 50px solid #0f0;
            border-top:50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .top{
            width: 0;
            height: 0;
            border-bottom: 50px solid #f96;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .bottom{
            width: 0;
            height: 0;
            border-top:50px solid #00f;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
      <!-- 所有边框 -->
    <div class="content"></div>
    <!-- 箭头向右 -->
    <div class="right"></div>
    <!-- 箭头向左 -->
    <div class="left"></div>
    <!-- 箭头向上 -->
    <div class="top"></div>
    <!-- 箭头向下 -->
    <div class="bottom"></div>
    

    clipboard.png

    十二:常见兼容性问题
    1.去掉浏览器间隙问题

    *{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }

    2.图片间的空隙,只要是display:inline;display:inline-block;元素分行写都会有间隙,设置父元素font-size:0 如果还有间隙,可设置 letter-spacing: 和;word-spacing: 的值为负数

    .content{
    width: 800px;
    height: 800px;
    font-size: 0;
     }
    .img{
        width: 100px;
        height: 100px;
    }
     <div class="content">
        <img class="img" src="../src/assets/images/background-image.jpg" alt="">
        <img class="img" src="../src/assets/images/background-image.jpg" alt="">
        <img class="img" src="../src/assets/images/background-image.jpg" alt="">
    </div>
    

    clipboard.png
    3.E8及IE更低版本不支持opacity rgba

     .content1{
            width: 500px;
            height: 100px;
            background: red;
            opacity: 0.1;
            /* background-color: rgba(255, 0, 0, 0.1) */
        }
        .content2{
            border:1px solid #333;
            width: 800px;
            height: 500px;
        }
    <div class="content1">
    
    </div>
    

    clipboard.png

    clipboard.png
    4.块属性标签float后,又有横行的margin情况下,在IE6显示margi比设置的大
    常见症状:在IE6下后面的一块被顶到下一行
    解决方案:在float的标签样式控制中加入display:inline;将其转换成行内属性
    5.设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度。hack:给超出高度的标签设置overflow:hidden,或者设置行高line-height小于你设置的高度


    sly94
    45 声望0 粉丝

    下一篇 »
    css3媒体查询