美文网首页程序员我爱编程
CSS 属性区别及常见问题

CSS 属性区别及常见问题

作者: Yoyo_UoU | 来源:发表于2017-12-24 23:01 被阅读0次
    块级元素,行内元素区别
    块级元素 行内元素
    div span
    h1~h6 a
    p img
    dl b,i
    dd button
    dt em
    fieldset label,select
    form input,textarea
    hr br
    blockquote q
    ul small
    table th,td
    li sub,sup

    区别:

    • 块级元素会独占一行,其宽度自动填满其父元素宽度
      行内元素不会独占一行,其宽度是根据内容而变化,如果和相邻的内联元素排不了一行会自动跳行
    • 块级元素可设置宽高,行内元素不行
    • 块级元素可设置margin 和 padding,行内元素只有水平方向的属性才能有效果,垂直方向无效如(margin-top,margin-bottom)
    • 块级元素可嵌套某些块级元素和内联元素以及文本,内联元素只能容纳文本或者其他内联元素
    CSS 继承

    css的继承是指子元素拥有祖先元素的样式

    可继承属性 不可继承属性
    color border
    opacity padding
    font margin
    text-align display
    line-height background
    cursor text-decoration

    表单元素不会继承字体属性,需要单独设置

    使元素水平居中

    块级元素 margin:auto
    内联元素 text-align:center

    px, em, rem 有什么区别
    • px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。不随着父元素而改变,是固定的。不用去计算
    • em:相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。需要计算,比较麻烦
    • rem:相对单位,相对根元素的字体大小,可以说集px和em
      优点于一身,只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应
    IE盒模型和W3C盒模型有什么区别

    在IE6之前的浏览器版本才会出现IE盒模型问题


    区别在于width的计算,W3C盒模型不包含内边距和边框的宽,IE盒模型则是包含内边距和边框的宽。
    这让我想到一个属性box-sizing: border-box;使用它给元素设置width,就类似IE盒模型,固定宽,设置的边框宽度和内边距宽度都会包含在width里面,当然 如果设置的边框宽度和内边距宽度超出本身宽度范围,会溢出

    line-height: 2和line-height: 200%有什么区别

    这个问题就和 line-height:numberline-height:% 有什么区别一样。

    number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
    % || em:基于当前字体尺寸的百分比行间距。
    length:带有单位如px,设置固定的行间距。
    normal:行高由浏览器默认设置。

    overflow、display、visibility的区别

    他们都能让元素隐藏。

    • overflow:hidden;是当内容超出父元素所能包含的宽度的时候隐藏
    • display:none; 隐藏元素不占据位置,脱离文档流
    • visibility:hidden; 隐藏元素但占据位置,不脱离文档流

    visibility特别之处是就算父元素隐藏了,但子元素设置 visibility:visible;还可以显示。

    使用inline-block 左右会有间距 也会导致高度不一

    inline-block:行内块元素,拥有内联和块级的优点,可以并排显示也可设置margin、wiidth、height。

    • 解决间距

    1.在编译器里面不换行,去掉多余空格

    <div class="box">
        <a href="#">
        学习</a><a href="#">
        css</a><a href="#">
        属性</a>
    </div>
    

    2.借助HTML注释

    <div class="box">
        <a href="#">学习</a><!--
     --><a href="#">css</a><!--
     --><a href="#">属性</a>
    </div>
    

    3.不要闭合标签,除了最后一个

    <div class="box">
        <a href="#">学习
        <a href="#">css
        <a href="#">属性</a>
    </div>
    

    不符合代码规范
    4.margin负值

    .box a{
        display: inline-block;
        margin-right: -5px;
    }
    

    你真的愿意计算?
    5.display:flex

    .box {
        display: -webkit-flex;
        display: flex;
    }
    

    弹性盒子布局,如果兼容老手机,请在父元素里添加display:-webkit-box;

    6.设置父元素字体为0

    .box {
        font-size: 0;
        -webkit-text-size-adjust:none;  //考虑兼容i7
    }
    .box a {
        font-size: 12px;
    }
    

    感觉最好用的就是6了

    • 解决高度不一
      使用 vertical-align
    .box a{
        vertical-align:top;    
    }
    
    • 解决img有空隙问题
    img{
       vertical-align: middle;
    }
       
    
    font属性
    body{
      font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    }
    

    字体名称有连字符“-”或" "空格,或字符时应该加引号,防止有些浏览器解析的时候不认识。
    '\5b8b\4f53' 指的是字体,这么写是因为有些编码和浏览器的编码不匹配,如果直接写汉字会乱码,导致字体设置失效的问题,把字符串转义,就不会出现这个问题。

    • 单行文本溢出变省略号
      给元素设置固定高,一般情况溢出会换行并超出父元素,先给它一个溢出隐藏,和强制不换行,在设置一个省略符号的属性
    p{
        font-size:14px;
        height:16px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    
    • css渐变色
      background: linear-gradient(to top, pink, burlywood);
      最好使用十六进制颜色

    • 文字描边

    p{
        -webkit-text-stroke:1px #f00;
    }
    

    IE和火狐不支持,基于webkit内核,都得加前缀

    • 修改 placeholder 颜色
    element::-webkit-input-placeholder,
    element:-ms-input-placeholder,
    element::-moz-placeholder{ 
        corlor: pink;
    }
    
    • 设置页面标题的图标
      <link rel="icon" href="路径" type="image/x-icon">
      图标类型要 icon

    • 清除下拉框的箭头

    appearance: none;
    -moz-appearance:none;
    -webkit-appearance:none;
    
    • 使被选中元素的文本改变样式 只有background-color,color 有效
    ::selection {
            background:pink; 
            color:#fff;
        }
    
        ::-moz-selection {
            background:pink; 
            color:#fff;
        }
    
        ::-webkit-selection {
            background:pink; 
            color:#fff;
        }
    
    • 为父元素设置透明度 子元素才不会继承
      给父元素添加 background-color 属性,然后再写opacity,子元素会继承透明度,但直接给父元素的值设置 rgba,将不会被继承
    
    div {
           line-height: 1.5;
           width: 260px;
           color: pink;
           background-color: rgba(0, 0, 0, .1);
        }
    
    • 在IE下 透明度私有设置
      filter:alpha(poacity=0~100)
    • 父元素包含不了子元素
      有使用浮动属性( float )
      定位属性 (absolute,fixed)

    解决方法:

    • 给父元素设置固定宽度
    • 利用js获取子元素高度来设置父元素高度
    • 清除浮动
    ele::before,
    ele::after {
        content : "";
        display: block;
        height: 0;
        clear: both;
    }
    ele{
      zoom:1;
    }
    

    不止这一种清除浮动的方法 根据你自己喜欢去用其他的

    • 不想button元素点击就自己提交表单
      button 默认有两个属性 1.提交表单按钮,2.普通 点击按钮 浏览器默认是提交表单按钮,如果不想提交 要设置 type 类型。type="button"

    • 相对元素定位的问题
      刚开始了解css的时候 看到网上说,要父元素设置定位属性的relative。子元素设置absolute,子元素才会相对父元素进行绝对定位,其实没说全,令我产生 只有子元素设置absolute,父元素设置relative,才会起效,对于初学者 有这种误解 那就一直踩坑。
      后来自己测试,发现父元素除了static这个值,子元素都会相对父元素进行自身定位,如果父元素没有除了static以外的值,会自动往上层查找元素是否有定位属性 再来进行参照物进行自身的定位。

    • 设置滚动条样式
      ele::-webkit-scrollbar {}

    • pattern属性 h5新特性
      可以设置pattern的值为正则字符串,并加上设置title,提交表单的时候不用单独写js可以验证。错误提示会输出title的值


    用 CSS 实现一个三角形
    css.png
    简单实现风车
           .box {
                position: relative;
                width: 80px;
                height: 75px;
                z-index: 10;
                animation: around 1s linear infinite
            }
            @keyframes  around{
                0%{transform: rotate(0deg);}
                100%{transform: rotate(360deg);}
            }
            .winnower {
                position: absolute;
                width: 0;
                height: 0;
                border: 20px solid transparent;
                border-top-width: 12px;
                border-top-color: lightskyblue;
                top: 50px;
            }
    
            .winnower:nth-of-type(1) {
                top: 0;
                left: 5px;
                transform: rotate(90deg);
            }
    
            .winnower:nth-of-type(2) {
                top: 35px;
                left: 0;
            }
    
            .winnower:nth-of-type(3) {
                top: 5px;
                left: 40px;
                transform: rotate(180deg);
    
            }
    
            .winnower:nth-of-type(4) {
                left: 35px;
                top: 40px;
                transform: rotate(270deg);
            }
    
            .stick {
                position: absolute;
                background-color: pink;
                width: 6px;
                top: 45px;
                left: 45px;
                height: 70px;
                border-radius: 50px;
            }
    
    效果图
    CSS sprite

    CSS Sprites(雪碧图)是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。



    优点

    • 减少网页的http请求,提高性能
    • 减少图片的字节:多张图片合并成1张图片的字节小于多张图片的字节总和;
    • 减少了命名困扰:只需要在一张集合的图片命名,不需要对每一个小元素进行命名提高制作效率;
    • 更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便。

    缺点

    • 自己合成图片比较麻烦
    • 背景设置时,需要得到每一个背景单元的精确位置

    在线生成工具https://www.toptal.com/developers/css/sprite-generator

    相关文章

      网友评论

        本文标题:CSS 属性区别及常见问题

        本文链接:https://www.haomeiwen.com/subject/xaehgxtx.html