WEB前端代码：尺寸样式、textarea样式、样式继承、表格样式、显示和隐藏、外边距、块标签距中

最新推荐文章于 2025-06-18 22:04:25 发布

hahahafree

最新推荐文章于 2025-06-18 22:04:25 发布

阅读量910

点赞数

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： WEB

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/95864132

Web 专栏收录该内容

80 篇文章

订阅专栏

1、尺寸样式:

1.height
2.width
3.max-height
4.max-width
5.min-height
6.min-width

div{
		width: 100%;
		height: 200px;
		background: #888;
		max-width: 500px;
	}

min-width: 500px;

2、textarea样式:

resize:none;

textarea{
		width: 500px;
		height: 100px;
		resize: none;
	}
	
	</style>
</head>
<body>
	<p>留言</p>
	<textarea></textarea>

</body>

3、样式继承:

1.字体样式
2.文本样式

div{
		color: #00f;
		font-size: 30px;
		font-style: italic;
		font-weight: bold;
		text-decoration: underline;
		letter-spacing: 20px;
		word-spacing: 10px;
		/*text-align: center;*/
		text-indent: 100px;
		line-height: 300px;
	}

4、表格样式:

1.表格合并
border-collapse:collapse;

2.表格空隙
border-spacing:10px;

table{
			border-spacing:20px;/*表格空隙*/
			/*border-collapse:collapse;*/
		}	
	 
	</style>
</head>
<body>
	<table width='700px' border='1px'>
		<tr>
			<th>编号</th>
			<th>用户名</th>
			<th>密码</th>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>
		<tr>
			<td>1</td>
			<td>user1</td>
			<td>123</td>
		</tr>

	</table>

</body>

table{
			
			border-collapse:collapse;/*表格合并*/
		}

表格样式

table{
			
			border-collapse:collapse;
			width:700px;
			height:400px;
			margin:0 auto;
		}	
		td,th{
			border:1px solid #00f;
			text-align:center;
		}

		td{
			vertical-align:bottom;
		}

5、滚动条样式:

overflow:hidden|auto|scroll
overflow-x
overflow-y

div{
			width: 100px;
			height: 300px;
			background: #888;
			color: #f00;
			/*overflow: auto;自动加滚动条*/
			/*overflow: hidden;隐藏多余的*/
			overflow-x: scroll;/*出现滚动条*/
			overflow-y: hidden;/*隐藏滚动条*/

		}

	 
	</style>
</head>
<body>
	<div>
		<p>吃鸡吗?????????????????????????????</p>
		<p>吃鸡吗?????????????????????????????</p>

		<p>吃鸡吗?????????????????????????????</p>

		<p>吃鸡吗?????????????????????????????</p>


		<p>吃鸡吗?????????????????????????????</p>
		<p>吃鸡吗?????????????????????????????</p>
	</div>

6、显示和隐藏:

display:none|block|inline
visibility:visible|hidden

display和visibility区别:
1.display:none不占位隐藏
2.visibility:hidden占位隐藏

div{
			width: 100px;
			height: 300px;
			background: #888;
			color: #f00;
			/*display: none;不占位隐藏*/
			visibility: hidden;/*占位隐藏*/

		}

visibility显示与隐藏

	<style>
		*{
			font-family: 微软雅黑;
		}
		.hcls{
			background: #888;
		}

		.hcls2{
			background: #f0f;
		}
	</style>
	<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
	<h1>display显示和隐藏</h1>
	<span class='hcls'>aaaaaaaaaaaaaaaaaaaaa</span>
	<span class='hcls2'>bbbbbbbbbbbbbbbbbbbbb</span>
	<br>
	<br>
	<button class='show'>显示</button>
	<button class='hidden'>隐藏</button>

</body>
<script>
$('.show').click(function(){
	$('.hcls').css({'visibility':'visible'});
});

$('.hidden').click(function(){
	$('.hcls').css({'visibility':'hidden'});
});
</script>

7、外边距:

margin-left:10px;
margin-top:10px;
margin-right:10px;
margin-bottom:10px;

外边距缩写:
margin:10px; 四个边同时
margin:10px 20px; 上下左右
margin:10px 20px 30px; 上左右下
margin:10px 20px 30px 40px; 上右下左

.div1{
			width:100px;
			height:100px;
			background: #00f;
			margin-left:150px;
			margin-top:150px;
			margin-bottom:100px;
		}

		.div2{
			width:100px;
			height:100px;
			background: #f00;
			margin-left:100px;
		}
	</style>
	<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
	<div class='div1'>
		
	</div>	

	<div class="div2">
		
	</div>

8、内边距:

padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

内边距缩写:
padding:10px; 四个边同时
padding:10px 20px; 上下左右
padding:10px 20px 30px; 上左右下
padding:10px 20px 30px 40px; 上右下左

.div1{
			width:100px;
			height:100px;
			background: #00f;
			padding-left:  50px;
			padding-top: 50px;
			
		}

9、块标签距中:

margin:0px auto;

.div1{
			width:100px;
			height:100px;
			background: #00f;
			margin: 0px auto;
			
		}

body与生俱来的外边距

body{
			margin:0px;
		}

	ul{
			padding-left: 0px;
			margin:0px;
		}
		

	
	</style>
	
</head>
<body>
	<ul>
		<li>12312312</li>
		<li>12312312</li>
		<li>12312312</li>
		<li>12312312</li>
		<li>12312312</li>

	</ul>
</body>