css面试题----css测试9

最新推荐文章于 2023-06-15 17:38:06 发布

曾皙

最新推荐文章于 2023-06-15 17:38:06 发布

阅读量158

点赞数

分类专栏： css 前端小测文章标签： css float

本文链接：https://blog.csdn.net/qq_39148344/article/details/97138231

版权

css 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

前端小测

9 篇文章 0 订阅

订阅专栏

每个星期6都会去去看张鑫旭直播写一些小demo然后再去吧写每天学习到的东西，心得记下来，并且会长期去完成这个任务

IT这个东西真的是要去强迫自己学学习一些好的东西，多去优化代码，而不是去停滞不前，

鸡汤喝的差不多了先上题目图吧

好了题目就算这样了，说真的我基础真的还是不行，很写这样的demo还是太少了，一下就会发现自己有很多不足这个题目好像是11分我写了2天得了9分还在第二问偷偷看人别人写的一个属性direction: rtl(下面去介绍使用方法)

解法一用flex布局

css

<style>
    .title {
      color: #959AA2;
      font-size: 20px;
    }

    .title>.title-line {
      display: flex;
      margin-bottom: 10px;
    }

    .title>.title-line>.title-line-text {
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* direction: rtl; */
      flex: 1 1 auto;
      margin-right: 10px;
    }

    .title .label {
      display: flex;
      flex: 1 0 auto;
      justify-content: flex-end;
    }

    .title .label>span {
      display: flex;
      align-items: center;
      margin-right: 5px;
      padding: 0 5px;
      border-radius: 3px;
      line-height: 1;
      font-size: 16px;
    }

    .title .label>span:last-child {
      margin-right: 0;
    }

    .title .label>span.theme {
      color: #959AA2;
      border: 1px solid #959AA2;
    }

    .title .label>span.state {
      color: #F06066;
      border: 1px solid #F06066;
    }

    .title .label>span.quantity {
      color: #4D8DEE;
      border: 1PX solid #4D8DEE;
    }
  </style>

HTML

<body>
  <div class="title">
    <li class="title-line">
      <p class="title-line-text">
        大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字</p>
      <div class="label">
        <span class="theme">都市</span>
        <span class="state">连载中</span>
        <span class="quantity">54.82万字</span>
      </div>
    </li>
    <li class="title-line">
      <p class="title-line-text">大家好我是一段中等长的文字,大家好我是一段中等长的文字,大家好我是一段中等长的文字大家好我是一段中等长的文字</p>
      <div class="label">
        <span class="theme">都市</span>
        <span class="state">连载中</span>
        <span class="quantity">54.82万字</span>
      </div>
    </li>
    <li class="title-line">
      <p class="title-line-text">大家好我是一段短文,大家好我是一段短文,大家好我是一段短文,大家好我是一段短文</p>
      <div class="label">
        <span class="theme">都市</span>
        <span class="state">连载中</span>
        <span class="quantity">54.82万字</span>
      </div>
    </li>
  </ul>
</body>

第一种用flex布局其实就是用到了一些flex的基本用法

第二种兼容IE8

这里就有一些要说明的

1.块格式化上下文BFC

2.overflow和其他一些BFC的区别

解析：

什么是块格式化上下文：MDN--是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域,这个是MDN的说法如果还是不清楚的，建议去看MDN他说的很清楚我就没必要在复制粘贴多BB了
overflow和其他的区别倒是是什么呢？我们和一些我们经常会遇到的一些属性，同时会造成BFC的属性进行比较

overflow:hidden 这个超棒的哦！不像浮动和绝对定位，玩得有点过。也就是溢出剪裁什么的，本身还是个很普通的元素。因此，块状元素的流体特性保存相当完好，附上BFC的独立区域特性，可谓如虎添翼，宇宙无敌！哈无诶瓦(However), 就跟清除浮动：

为什么说overflow就如虎添翼了呢？因为浮动，绝对定位，inline-bolck，这些导致的BFC会有一个影响就是会导致元素成为行块元素，但是当为什么使用overflow的时候没用这个影响overflow就可以完成自适应的扩展自己的宽度

所以我的第二中兼容IE8就是用的overflow+float的写法

HTML

<body>
  <ul class="title">
    <li class="title-line">
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
      <p class="title-line-text">
        大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字,大家好我是一段很长的文字1111</p>
    </li>
    <li class="title-line">
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
      <p class="title-line-text">
        大家好我是一段很长的文字,大家好我是一段很长的文</p>
    </li>
    <li class="title-line">
      <ul class="label">
        <li class="theme">都市</li>
        <li class="state">连载中</li>
        <li class="quantity">54.82万字</li>
      </ul>
      <p class="title-line-text">
        大家好我是一段很长的文字</p>
    </li>
  </ul>
</body>

css

<style>
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    p {
      margin: 0;
    }

    .title>.title-line {
      margin-bottom: 10px;
    }

    .title>.title-line>.title-line-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* display: table-cell; *display: inline-block; width: 2000px; *width: auto; */
    }
    .title .label{
      float: right;
    }
    .title .label>li {
      box-sizing: border-box;
      display: inline-block;
      margin-right: 5px;
      border-radius: 3px;
    }

    .title .label>li:last-child {
      margin-right: 0;
    }

    .title .label>li.theme {
      color: #959AA2;
      border: 1px solid #959AA2;
    }

    .title .label>li.state {
      color: #F06066;
      border: 1px solid #F06066;
    }

    .title .label>li.quantity {
      color: #4D8DEE;
      border: 1px solid #4D8DEE;
    }
  </style>

注意：这里要注意的是文字和标签的位置是先写标签在写文字，这样的目的是因为浏览器的渲染是先上在下当渲染，如果先写文字在有overflow的情况下，那么文字就是是div为width100%了那么标签就会另其一行，了所以要先先渲染标签后文字就会自适应的吧内容填充满‘

那么第二题如何反向打点

这里就是我上面说的direction: rtl这个属性了

direction：改变的只是内联元素块的左右顺序，文字内容顺序是不会改变的

曾皙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css面试题----css测试9

每个星期6都会去去看张鑫旭直播写一些小demo然后再去吧写每天学习到的东西，心得记下来，并且会长期去完成这个任务IT这个东西真的是要去强迫自己学学习一些好的东西，多去优化代码，而不是去停滞不前，鸡汤喝的差不多了先上题目图吧好了题目就算这样了，说真的我基础真的还是不行，很写这样的demo还是太少了，一下就会发现自己有很多不足这个题目好像是11分我写了2天得了9分还在第二问偷偷看人别人...
复制链接

扫一扫

专栏目录