# Css 随笔

最新推荐文章于 2024-10-12 09:53:06 发布

全栈程序员

最新推荐文章于 2024-10-12 09:53:06 发布

阅读量429

点赞数 1

分类专栏：前端开发文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_37248504/article/details/121872302

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Css 随笔

Css 元素

margin：设置元素的外边距
padding：设置元素的内边距
overflow：滚动条属性设置
white-space: nowrap：文字不换行一行显示，会出现滚动条
text-overflow: ellipsis：超出的部分使用省略号显示，div需要指定宽度
display: inline-block;：inline-block不设置宽度时，内容撑开宽度

Flex 布局（弹性布局）

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
常用属性flex-wrap：如果一条轴线排不下，如何换行。

.homepage {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  /* flex 布局 */
  display: flex;
  /* 自动换行按照宽度 */
  flex-wrap: wrap;
}

布局效果如下图

请添加图片描述

去掉页面的滚动条

注意要找对滚动条出现的位置块，例如下面的这个页面滚动条是最外面的html的
要隐藏这个滚动条，加上下面的样式就可以了

html {
  /* 隐藏 html 页面的滚动条 */
  overflow: hidden;
}

页面全部填充

设置 margin padding，设置宽度为100%

* {
  margin: 0px;
  padding: 0px;
}
html,
body {
  width: 100%;
  /* 隐藏 html 页面的滚动条 */
  overflow: hidden;
}

元素超出宽度后神略号显示

使用text-overflow: ellipsis属性

<html>
  <head></head>
</html>
<body>
  <h1 style="text-align: center">Css学习</h1>
  <hr style="border: 1px solid red" />

  <label>
    <div class="div-one">
      感冒：我大抵是病了，横竖都不舒服，胡乱吞了一包药，便又和衣睡下。头昏昏沉沉的，做什么都没有了力气。吃药是七天，不吃药也是七天，我向来是知晓的。黯黯然吸了一下鼻子，好家伙，一边是堵的，另一边还是堵的。
    </div>
  </label>
</body>
<style>
  .div-one {
    /* 指定宽度 */
    width: 500px;
    /* 文字不换行一行显示，会出现滚动条 */
    white-space: nowrap;
    /* 不显示滚动条 */
    overflow: hidden;
    /* 超出的部分使用省略号显示 */
    text-overflow: ellipsis;
  }
</style>

效果

Css Tooltip 鼠标移上去弹框显示

鼠标移动到元素事件：.tooltip:hover

<html>
  <head></head>
</html>
<body>
  <h1 style="text-align: center">Css学习</h1>
  <hr style="border: 1px solid red" />

  <div class="tooltip">
    鼠标移动到这
    <span class="tooltiptext">提示文本</span>
  </div>
</body>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    /* div 元素下面的线 */
    border-bottom: 1px dotted black;
  }

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* 定位 */
    position: absolute;
    z-index: 1;
  }

  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
</style>