学习HTML&css样式遇到的注意点和问题

最新推荐文章于 2022-11-14 10:56:54 发布

河间地

最新推荐文章于 2022-11-14 10:56:54 发布

阅读量242

点赞数

文章标签： HTML CSS

本文链接：https://blog.csdn.net/qq_42784391/article/details/102575839

版权

#学习HTML&css样式遇到的注意点和问题
##HTML注意点：
一、块级标签

1.独占一行，不和其他元素待在同一行

2.能设置宽高

常见的块级标签：div,p,h1-h6,ul,li,dl,dt,dd

二、行级标签

1.能和其他元素待在同一行

2.不能设置宽高

常见的行级标签：a，span,strong,u,em–>

三、行内块标签

1.能和其他元素待在一行

2能设置宽高

常见的行内块标签：img,input,textarea

<div style="display:inline"></div>
<span style="display:block"></span>
<span style="display:inline-block"></span>
//使用css样式display属性可以设置标签为行内、块级、行内块

##CSS样式注意点：

###如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

<head>
<style> 
	.head
	{
	background-color:black;
	}
</style>
</head>

<link href="head.css" type="text/css" rel="stylesheet">
.head
{
	background-color:white;
}

外部样式将覆盖内部样式
###内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
###使用<div style="clear:both">解决float浮动问题
###对于一对父子级标签position属性的使用：

<div style="position:relative">
<div style="position:absolute;left:0;right:0;">
//此处使用left、right、top、bottom属性来改变子标签的位置

##实践中遇到的小点（备忘）
1.取消下拉框小箭头

-webkit-appearance:none;
-moz-appearance:none;

##遇到的问题：
一对父子级div标签。

	<body>

	 <div style="background-color: aqua;height: 100px;width: 100px;id="1">
				<div style="background-color: black;height: 50px;width: 50px;margin: 50px;id=“2”">
				</div>
	</div>
	
	</body>

div（id=1）对于div（id=2）是父级标签，父级是否为子级的容器。那么子级div标签的margin属性为什么是相对于body而不是父级div。

河间地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习HTML&css样式遇到的注意点和问题

#学习HTML&css样式遇到的注意点和问题##HTML注意点：一、块级标签1.独占一行，不和其他元素待在同一行2.能设置宽高常见的块级标签：div,p,h1-h6,ul,li,dl,dt,dd二、行级标签1.能和其他元素待在同一行2.不能设置宽高常见的行级标签：a，span,strong,u,em–>三、行内块标签1.能和其他元素待在一行2能设置宽高常见的...
复制链接

扫一扫