CSS 全解析实战(三)-CSS 基础

1 选择器(1)

  • 基本规则


    img_ed26223284cb17076e078af8ca846c26.png

    ;是分隔符,而不是语句结束符


    img_0759dfadcdc30b45b701020a0dfd3b23.png
  • 选择器
    浏览器是从右往左解析的,继续向左解析只是验证,如此一来,性能极大提高


    img_1e3fd30d96bd64af3a9102600fd455fd.png
  • 选择器的分类


    img_34d729c0fe7636c5bc640334b0e99768.png
  • 选择器权重


    img_88788ba771a8377aa6d17d067b29b45b.png

    img_397cb604bc0a5920e9f9dba1fbb13fea.png

    img_76b1c2b1ea51911b386042c0f91c4dfb.png
  • 非布局样式-字体


    img_fe58a1c461d4ca191128896b9daf1e83.png

    img_ce1be258df113a10b56d1326cd43932d.png
  • 非布局样式-行高


    img_4a0fdec58a47f4769fda1482dc13a12f.png

背景

img_f7be369355415ede991942dcc2e8dc38.png

非布局样式(边框)

img_3fa6f73c9badf4744de6004bcfff45d8.png

非布局样式(滚动)

内容超出容器大小


img_aee4b08aa03adcb54d179457cc220a4f.png

img_3122d2ebfbceb252796e377bdaee2f5a.png

非布局样式(文本折行)

img_88a6f0e61c0685d2e06e828cc0424fc6.png

img_8775b90b545eb8ffd545e2d556b93c84.png

img_abc8685e8ccbf846ab40ea19236df5d2.png
  • 单词空格换行
    • 把单词尽量当一个整体


      img_f71c10e48b960689a74c6238f88ba992.png

      img_4e4c366c9bd6e045b534a81f1bf1ae61.png
    • 不把单词当一个整体,打断所有


      img_53e6f3188b8c71f1b95870e93a72edb8.png

      img_7c7f7728a3d8d35f18f60cd1829f670f.png
    • 就不换行!


      img_24540ab0cdc97e773d24bf28fba8b859.png

      img_0ca4e02d4f77d0a4108822fcb6705c86.png

非布局样式(装饰性属性)

img_979dd0e8821096da279c60b64be0f3de.png

hack和案例(1)

img_b38da529d505906d3ecd4a21f7150c46.png

img_923629e768295d14d176977300025d41.png

hack和案例(2)

img_65893327fe2aa8020925055a8e5ea361.png
CSS实现 checkbox

img_544789b7d1b783514a4b7455cbe9509c.png

面试题

img_900042fca4f72b49c55a57e7d22620d0.png

img_8751547a35af4c4a5a0b5cbbd675b0b0.png

img_76b052c1ca27e5d8b39e9484021e7029.png

img_d85932d9198aa02173cfec70502e6984.png

img_16d78261d7be8dddcec0887f80c235c9.png

img_b4f8b43e318c343fd58762803804a20a.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值