html、css新学的属性

最新推荐文章于 2024-04-30 23:17:05 发布

litchi dream

最新推荐文章于 2024-04-30 23:17:05 发布

阅读量121

点赞数

分类专栏： html+css+css3

本文链接：https://blog.csdn.net/ladream/article/details/104868739

版权

html+css+css3 专栏收录该内容

15 篇文章 5 订阅

订阅专栏

html、css新学的属性

1.display:table;

此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符。

2.display:table-cell;

此元素会作为一个表格单元格显示（类似 < td > 和 < th >）
参考的博客：
display:table和display:table-cell实现单行，多行文本垂直居中
（主要就是在外面套一个大盒子，将其设置为display:table，再加上text-align:center;里面的p元素设置为display：tabe-cell;再给p元素加上vertical-align: middle;）

3.placeholder

定义：该属性可描述输入字段信息的剪短提示信息，该提示会在输入字之前显示在输入位置起提示作用。
注：placeholder并不适用于所有input类型，placeholder 属性适用于下的 input 类型：text、search、url、tel、email 和 password。
在这里插入图片描述

input{
			width:150px;
			height:40px;
			border:1px solid gray;
		}
<input type="text" placeholder="请输入文字"></div>i

4.transform：translation(X,Y); （X,Y单位可为px,%）

X,Y是正数表示向X,Y轴的正方向移动，负值则是负方向。
在这里插入图片描述

#triangle{
			display: block;
			width: 0px;
			height: 0px;
			border: 20px solid transparent;
			border-bottom-color: grey;
			background-color: lightblue;
			transform: translate(50px,50px);
		}
<div id="triangle"></div>

5.rotate旋转（2D）

rotate旋转只能设单值，正数表示向顺时针旋转，负数表示向逆时针旋转。如：transform: rotate(30deg);(deg是角度）
在这里插入图片描述

#triangle{
			display: block;
			width: 0px;
			height: 0px;
			border: 20px solid transparent;
			border-bottom-color: grey;
			transform: rotate(30deg);
		}
<div id="triangle"></div>

6.box-shadow加阴影

box-shadow: h-shadow v-shadow blur spread color inset;
菜鸟教程的介绍：
在这里插入图片描述
blur通俗来说就是羽化（数值越大越模糊）

#box{
			width:100px;
			height:100px;
			background-color: yellow;
			box-shadow: 10px 10px 10px 2px grey;
		}
<body>
	<div id="box"></div>
</body>

相关的博客：
box-shadow 单边阴影双边阴影
 css四边阴影

7.background-clip

background-clip属性指定背景绘制区域。
这个属性有三个值：
（1）border-box：是默认值，背景包含了边框
在这里插入图片描述

#box{
			width:100px;
			height:100px;
			border:20px dotted black;
			padding:10px;
			background-color: yellow;
			background-clip:border-box;
		}
<body>
	<div id="box"></div>
</body>

（2）padding-box：背景不包含到border
在这里插入图片描述

#box{
			width:100px;
			height:100px;
			border:20px dotted black;
			padding:10px
			background-color: yellow;
			background-clip:padding-box;
		}
<body>2
	<div id="box"></div>
</body>

（3）content-box:背景不包括padding和border.
在这里插入图片描述

#box{
			width:100px;
			height:100px;
			border:20px dotted black;
			padding:10px
			background-color: yellow;
			background-clip:content-box;
		}
<body>2
	<div id="box"></div>
</body>

litchi dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html、css新学的属性

1.display:table;此元素会作为块级表格来显示（类似 < table >），表格前后带有换行符。2.display:table-cell;此元素会作为一个表格单元格显示（类似 < td > 和 < th >）display:table和display:table-cell实现单行，多行文本垂直居中3.placeholder定义：该属性可描...
复制链接

扫一扫

专栏目录