CSS样式小结

最新推荐文章于 2023-10-07 14:01:07 发布

Tessa_zzl

最新推荐文章于 2023-10-07 14:01:07 发布

阅读量312

点赞数 1

文章标签： css

本文链接：https://blog.youkuaiyun.com/Tessa_zzl/article/details/89256899

版权

本文是对CSS样式的总结，包括首行缩进、阴影效果、文字溢出处理、背景模糊、清除浮动方法、字体设置、动画属性和变形、清除按钮默认样式、CSS3计算宽高等实用技巧。同时，提到了圣杯布局的应用和textarea、input number类型的特殊样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式小结(不定期更新)

首行缩进：em-字符单位

text-indent:20px;
text-indent:2em;

阴影：
*20px：水平阴影的位置
*10px：垂直阴影的位置
8px：模糊距离
5px：阴影的尺寸
outset/inset：外阴影/内阴影

box-shadow: 20px 10px 8px 5px #888888 inset;

文字超出盒子长度，后面显示…

 width:200px;    
 white-space:nowrap;    
 word-break:keep-all;    
 overflow:hidden;    
 text-overflow:ellipsis;

背景模糊 --属性filter
如果要做到背景模糊而文字内容不模糊，需要再添加一个兄弟div

<div id="top" >
   <div class="bg"></div>
   <div style="width:1100px;position:absolute">
     <!--Conten-->
   </div>
 </div>

.bg{
  background: url('../assets/black_desktop.jpg')top center no-repeat;
  width:100%;
  height: 100%;
  background-size: cover;
  filter: blur(10px);
}

清除浮动 ----父级根据子级的大小变动，需要在最后一个子级元素添加下面的样式

clear: both;

或者在改元素后面添加一个虚拟元素去清除浮动

div::after{
	content: '';
	clear: both;
}

设置字体：
1.5表示行高
\5b8b\4f53字体编码

font:12px/1.5 tahoma,arial,\5b8b\4f53

设置横向字间距

letter-spacing: 2px;

动画属性、变形
资料链接：css动画animation、transition、transform、translate
transform相关介绍

transition: all 0.4s ease-in-out;
transform: rotate(90deg);  /*顺时针旋转90度*/

清除button默认样式

border:none;
outline: none;
background-color: transparent;

css3计算宽高
获取窗口的宽度100vw, 获取窗口的高度100vh
计算方法cacl(), 注意兼容问题!

/*计算宽度方法相同*/
 max-height: -moz-calc(100vh - 230px);
 max-height: -webkit-calc(100vh - 230px);
 max-height: calc(100vh - 230px);

圣杯布局
左右宽度固定, 中间自适应
参考网址: https://www.jianshu.com/p/81ef7e7094e8

<div id="header">header</div>
<div id="container">
  <div id="center" class="column">center</div>
  <div id="left" class="column">left</div>
  <div id="right" class="column">right</div>
</div>

html,body{
  height: 100%;
}
#header{
  width: 100%;
  height: 50px;
  background: #aaa;
}
#container{
  height: calc(100vh - 50px);
  width: 100%;
  padding-left: 440px;
  padding-right: 440px;
  min-width: 1320px;
}
#container::after{
  content: '';
  clear: both;
}
.column{
  height: 100%;
  float: left;
}
#left{
  width: 440px;
  background: #99ff22;
  margin-left: -100%;
  position: relative;
  right: 440px;
}
#right{
  width: 440px;
  background: #31b6fc;
  margin-right: -440px;
}
#center{
  width: 100%;
  background: #ccc;
}

在这里插入图片描述
textarea 禁止鼠标拖拉修改大小

resize: none;

resize属性:

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

去掉input type="number"的上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}

字体的引入

@font-face{
	font-family: 'fontName';
	src: url(./font/DS.ttf);
}
p{
	font-family: 'fontName';
}