美文网首页
前端基本功--css实战1 9.10

前端基本功--css实战1 9.10

作者: 多佳小昕 | 来源:发表于2017-09-16 21:10 被阅读0次

    一、京东页面

    1.Font字体综合写法

    font:字体加粗  字号/行高 字体;

    font-weight:bold = 700;正常是400

    2.用于做一些小装饰的标签:

    s  del删除线

    i   em倾斜

    u   ins下划线

    3.字体的装饰:

    字体加粗font-weight: 700;

    让字体不加粗:  font-weight:normal;

    字体倾斜:  font-style:italic;不用

    字体不倾斜:font-style:normal;

    不下划线不删除线:  text-decoration: none;

    4.定位

    (1)position:static 静态定位 约等于标准流

    (2)浮动的不浮动 float:none;  none left right

            定位的不定位  position:static ;  absolute relative fixed

    5.权重问题

    标签 1   类10     id 100    行内1000

    6.网页的稳定性

    Width和height最稳定  其次padding  最后才考虑margin

    7.关于浮动

    浮动目的:可以让多个块级元素放到一行上。

    清除浮动的目的:就是为了解决父盒子高度为0的问题。

    清除浮动:

    1.额外标签法

    2. Overflow: hidden触发bfc模式 就不用清楚浮动

    3.伪元素

    .clearfix:after {

    content:””;

    Visibility:hidden;

    Display:block;

    Height:0;

    Clear:both;

    }

    .clearfix{

    Zoom:1;

    }

    清除浮动:真正的叫法闭合浮动(将clearfix加在父级元素上)

    .clearfix:before,.clearfix:after{

    display:table;

    content:"";

    }

    .clearfix:after{

    clear:both;

    }

    .clearfix{

    zoom:1;

    }

    overflow:hidden;属性可以保证div的高度或宽度不变。

    div里添加的东西再多,高度或宽度也不变。超出的部分隐藏。使盒子保持本身的宽高。

    相关文章

      网友评论

          本文标题:前端基本功--css实战1 9.10

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