【深圳大学基于web的编程】易混淆点记录（html+css+js）

归忆_AC

已于 2024-05-29 16:42:18 修改

阅读量469

点赞数 10

分类专栏： web学习文章标签：前端 html css javascript

于 2024-03-11 16:56:18 首次发布

本文链接：https://blog.csdn.net/qq1677852098/article/details/136628370

版权

web学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

水平分隔线和其边框

遇到一个题目，其中一个要求是设置水平分隔线粗细为5、颜色为#FF3333。

于是我想当然的写下

hr {
  border: 5px solid #0033FF;
}

结果当然不对，查了下发现。设置水平分隔线的粗细不应该通过边框，而应该按下面这种。

hr {
  /*border: 5px solid #0033FF;*/ /*设置水平分隔线和设置边框不同*/
  height: 5px;
  color: #0033FF;
}

而上面那种等同于如下所示

hr {
  border-width: 5px;
  border-style: solid;
  border-color: #0033FF;
}

CSS 中的 border 属性是用来设置元素的边框的，包括边框的宽度、样式和颜色。

使用 border: 5px solid #0033FF; 时，它设置了一个宽度为 5 像素、样式为实线、颜色为 #0033FF 的边框。

这个边框是围绕在元素周围的，而不是在元素内部绘制，因此它不会影响到元素的大小。

color和background-color

color 属性用于设置文本的颜色。

background-color 属性用于设置元素的背景颜色。

因此下面的css样式是不对的

hr {
  height: 1px;
  color: #000FFF;
}

水平分隔线不是文本，设置颜色应该使用background-color

hr {
  height: 1px;
  background-color: #000FFF;
}

i标签（行内元素）无法居中

<i> 标签是 HTML 中用于表示斜体文本的标签。

对i标签直接加text-align:center;样式是不会生效的，因为i标签是行内元素。

块元素、行内元素、行内块元素

先用display: block;将其转换为块元素就可以居中啦

i {
  display: block;
  text-align: center;
}

当然也可以外面加一层div标签后再对div居中处理。

文本段首缩进

可以用 代表空格。也可以用text-indent，如下所示：

p {
  text-indent: 2em; /* 使用 em 单位，表示相对于当前字体大小的倍数 */
}

全角和半角符号

今天交前端oj的时候一直报方括号错误，不管我试了英文的[]还是中文的【】

本以为方括号就这两种，结果原来还有第三种，全角的方括号［］

终于过了......

图片链接附近有一个小横线

如下图所示

推测是链接的下划线，尝试给a标签设置去除下划线。

a {
  /*去掉下划线*/
  text-decoration: none;
}

发现成功消除

行高

行高用line-height而不是height

对齐——html内嵌样式 >>> css样式

（1）align="bottom"对应的是vertical-align: baseline;而不是vertical-align: bottom;

（2）align="middle"对应的是vertical-align: -webkit-baseline-middle;而不是vertical-align: middle;

ps.-webkit-：代表safari、chrome浏览器私有属性

px和em

px 是像素单位，它是相对于显示设备上的像素大小来定义尺寸的。1 像素等于显示设备上的一个实际像素点。

em 是相对单位，它是相对于父元素的字体大小来定义尺寸的。1em 等于当前元素的字体大小。例如，如果父元素的字体大小为 16px，则子元素的 1em 将等于 16px。

设置页面背景颜色为渐变色

示例：从左到右，从浅蓝色到浅紫色渐变

body {
    /*线性渐变*/
    background: linear-gradient(to right, #6495ed, #D8BFD8);
}

将div页面居中

<style>
    html,body{
	    height:100%;
	}

	body{
		position:relative;
		margin:0;
	}

	.div1{
		position:absolute;

        /*移动元素左上角到页面中心，50%指的是页面的*/
        top: 50%;
        left: 50%;

        /*调整为元素中心在页面中心，50%指的是元素的*/
        transform: translate(-50%, -50%);
	}
</style>

<body>
	<div class="div1">box</div>
</body>