背景:经常有些样式不经常用就容易忘记.想一想还是记录下来.以后好找一点.
图片描述
1:关于文字下划线
text-decoration属性
<html>
<body>
<div style="text-decoration: underline;"> hello world!</div>
<div style="text-decoration: underline dotted;margin-top: 20px;">你好 世界!</div>
<div style="text-decoration: underline dotted red;margin-top: 20px;">你好 世界!</div>
<div style="text-decoration: green wavy underline;margin-top: 20px;">你好 世界!</div>
<div style="text-decoration: underline overline #FF3028;;margin-top: 20px;">你好 世界!</div>
</body>
</html>
效果图:
2:强制内容不换行
<nobr>不换行的内容写这里</nobr>
代码:
<html>
<body>
<style>
div{
width:200px;
color:#bbbbbb;
margin:20px;
}
</style>
<div>大家好,我是第一行</div>
<div>大家好,我是第二行,我的文字比第一行多一点</div>
<div><nobr>大家好,我是第三行,我的文字比第二行多一点,但是我没有换行哦</nobr></div>
</body>
</html>
效果图:
父级div设置dispaly:flex也可以达到多个子元素不换行.
3:超出文本显示省略号
overflow: hidden; //内容会被修剪，并且其余内容不可见
white-space: nowrap; //规定段落中的文本不进行换行
text-overflow:ellipsis; //超过部分显示省略号
代码:
<html>
<body>
<style>
div{
width: 200px;
color: #bbbbbb;
}
</style>
<div>hello world!在这里超出宽度的部分没有显示省略号呢</div>
<div style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis;margin-top: 20px;">hello world!我想超出宽度的部分显示省略号</div>
</body>
</html>
效果图:
4:关于border边框
border-left //设置左边框，一般单独设置左边框样式使用
border-right //设置右边框，一般单独设置右边框样式使用
border-top //设置上边框，一般单独设置上边框样式使用
border-bottom //设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
border //整个边框
代码:
<html>
<body>
<style>
.div{
width:100px;
height:100px;
background: #f5efef;
margin-left:20px;
}
.div1{
border-left:5px solid brown;
}
.div2{
border-right:5px solid rgb(221, 126, 126);
}
.div3{
border-top:5px solid rgb(25, 150, 87);
}
.div4{
border-bottom:5px solid rgb(121, 131, 184);
}
.div5{
border:5px solid rgb(181, 197, 41);
}
</style>
<div style="display: flex;">
<div class="div div1"></div>
<div class="div div2"></div>
<div class="div div3"></div>
<div class="div div4"></div>
<div class="div div5"></div>
</div>
</body>
</html>
效果图:
5:float属性
left //元素向左浮动。
right //元素向右浮动。
none //默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit //规定应该从父元素继承 float 属性的值。
代码:
<html>
<body>
<style>
.left{
float: left;
color: rgb(38, 197, 144);
}
.right{
float: right;
color: rgb(17, 173, 173);
}
.none{
float: none;
color: rgb(131, 173, 17);
}
.inherit{
float: inherit;
color: rgb(107, 6, 36);
}
.div{
width:300px;
height:100px;
background: #dbdada;
clear: both;
}
</style>
<div class="div">
<div class="left">我在左边</div>
<div class="right">我在右边</div>
<div class="none">我没有动</div>
<div class="inherit">我继承父元素的float</div>
</div>
</body>
</html>效果图:
6:带文字的分割线
实现原理:
我把div样式设置为高度设为1px,底色设置为灰色,文字显示效果为居中.距离顶部的距离为50px.
(距离顶部的距离可以任意更改,文字不会改变位置,我只是为了方便截图才加margin-top: 50px;)
内容的样式设置为底色为白色,颜色为黑色,绝对定位,距离顶部距离为-10px,显示空白处.
(如果不加white-space:pre;在文字前后输入空白是不会显示出来的.你也可以在文字前后再加两个空白标签.实现效果是一样的.)
代码:
<html>
<body>
<style>
div{
height: 1px;
background: #bbbbbb;
text-align: center;
margin-top: 50px;
}
.content{
background: #ffffff;
color: black;
position: absolute;
margin-top: -10px;
white-space:pre;
}
</style>
<div>
<span class="content"> 2019年09月06日 </span>
</div>
</body>
</html>
效果图:
我发现整体截图这样看可能效果不是很明显.再截一张中间文字的图片附上:
7:使元素的边框产生阴影
使用到的css属性:box-shadow
实现原理:
box-shadow: 60px -16px rgb(51, 173, 112); /* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 10px 5px 5px rgb(110, 9, 9); /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgb(89, 121, 29); /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: inset 5em 1em rgb(236, 189, 58); /* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 3px 3px rgb(223, 22, 22), -1em 0 0.4em olive; /* 任意数量的阴影，以逗号分隔 */
指定单个 box-shadow 的用法：
给出两个、三个或四个数字值的情况。
如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>。
如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。
可选， 插页(阴影向内) inset。
可选， 颜色值 <color>。
声明多个shadows时， 用逗号将shadows隔开。
代码:
<html>
<body>
<style>
.div1{
height: 200px;
width:200px;
background: #a2d5ee;
box-shadow: 10px 5px 5px rgb(110, 9, 9);
}
.div2{
margin-left: 50px;
height: 200px;
width:200px;
background: #a2d5ee;
box-shadow: 60px -16px rgb(51, 173, 112);
}
.div3{
margin-left: 100px;
height: 200px;
width:200px;
background: #a2d5ee;
box-shadow:2px 2px 2px 1px rgb(89, 121, 29);
}
.div4{
margin-left: 50px;
height: 200px;
width:200px;
background: #a2d5ee;
box-shadow:inset 5em 1em rgb(236, 189, 58);
}
.div5{
margin-left: 50px;
height: 200px;
width:200px;
background: #a2d5ee;
box-shadow:3px 3px rgb(223, 22, 22), -1em 0 .4em olive;
}
.div{
display: flex;
margin: 50px 0px 0px 50px;
}
</style>
<div class="div">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
</html>
效果图:
8:first-clild选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:first-child</title>
<style>
.parent-ele p:first-child {
color: red;
}
.parent-ele p:last-child {
color: blue;
}
.parent-ele p:nth-child(2) {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent-ele">
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>
<p>这是第四个段落</p>
<p>这是第五个段落</p>
</div>
</body>
</html>效果图:
8:flex布局
强制内容换行: white-space:normal
强制左上角对齐:align-items
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。