# Css 随笔
Posted MarlonBrando1998
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了# Css 随笔相关的知识，希望对你有一定的参考价值。
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>
以上是关于# Css 随笔的主要内容，如果未能解决你的问题，请参考以下文章