HTML、CSS（补充知识点）

最新推荐文章于 2024-07-22 15:19:55 发布

键.

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量386

点赞数

分类专栏： htmlcss 文章标签：前端

本文链接：https://blog.csdn.net/beekim/article/details/121492439

版权

htmlcss 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.超链接与锚点

1.a标签代表超级链接
2.通过href属性指定要跳转的目的链接或者锚点
设置href="#"，代表跳转到页面最顶部
通过设置的id，跳转到指定id的位置
3.通过target属性指定是否要在新窗口中打开目的链接，

target="_self"，默认在当前窗口打开
target="_blank"，在新窗口打开
target="_parent" ，在父窗口打开
target="_top"，使得文档载入包含这个超链接的窗口

4.br{$}*100+tab可以快速生成100行，并且数字递增。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#end">end</a>
		<br>1
		<br>2
		<br>3
		<br>4
		<br>5
		<br>6
		<br>7
		<br>8
		<br>9
		<br>10
		<br>11
		<br>12
		<br>13
		<br>14
		<br>15
		<br>16
		<br>17
		<br>18
		<br>19
		<br>20
		<br>21
		<br>22
		<br>23
		<br>24
		<br>25
		<br>26
		<br>27
		<br>28
		<br>29
		<br>30
		<br>31
		<br>32
		<br>33
		<br>34
		<br>35
		<br>36
		<br>37
		<br>38
		<br>39
		<br>40
		<br>41
		<br>42
		<br>43
		<br>44
		<br>45
		<br>46
		<br>47
		<br>48
		<br>49
		<br id='mid'>50
		<br>51
		<br>52
		<br>53
		<br>54
		<br>55
		<br>56
		<br>57
		<br>58
		<br>59
		<br>60
		<br>61
		<br>62
		<br>63
		<br>64
		<br>65
		<br>66
		<br>67
		<br>68
		<br>69
		<br>70
		<br>71
		<br>72
		<br>73
		<br>74
		<br>75
		<br>76
		<br>77
		<br>78
		<br>79
		<br>80
		<br>81
		<br>82
		<br>83
		<br>84
		<br>85
		<br>86
		<br>87
		<br>88
		<br>89
		<br>90
		<br>91
		<br>92
		<br>93
		<br>94
		<br>95
		<br>96
		<br>97
		<br>98
		<br>99
		<br id='end'>100
		<a href="#mid">mid</a>
		<a href="#">top</a>
	</body>
</html>

2.布局

2.1div+css

正常写的那种布局

2.2iframe

作用：把其他页面嵌套在当前页面中

 米哈游：<iframe src="http://www.mihayou.com" frameborder="0"  height="200px"></iframe>
腾讯<iframe src="http://www.qq.com" frameborder="0" height="200px"></iframe>

2.3frameset

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

与body同级，有body就没有frameset 用于后台管理，如菜单栏点击之后，只有某个frame对应的页面刷新，其他不动，即局部

基础代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
		<!-- frameset_set.html主页面，定义区域 -->
		<frameset rows="15%,85%">
		    <frame src="frame1.html"/>
		    <frameset cols="20%,80%">
		        <frame src="frame2.html"/>
		        <frame src="frame3.html"/>
		    </frameset>
		</frameset>
	
</html>

<body>frame1
	</body>

<body>frame2
	</body>

<body>frame3
	</body>

效果：

局部刷新：

<!-- frameset_set.html主页面，定义区域，指定刷新区域并命名 -->
<frameset rows="15%,85%">
    <frame src="frame1.html"/>
    <frameset cols="20%,80%">
        <frame src="frame2.html"/>
        <frame src="frame3.html" name="showframe"/>
        <!-- 此为局部刷新的区域，命名为showframe -->
    </frameset>
</frameset>

<!-- 修改frame2.html 副页面，在该区域中设置链接，定义targrt属性，即点击此处，会在target处刷新并显示内容-->
<body>
    <a href="frame3.html" target="showframe">frame3</a>
    <a href="frame4.html" target="showframe">frame4</a>
    <!-- 当点击frame4时，会在showframe页面上显示frame4.html页面的内容 -->
</body>

<!-- frame4.html 新增副页面，辅助局部刷新的效果显示-->
<body>
    frame4
</body>

效果：点击左下角的frame3时，右下角显示frame3.html的内容
点击左下角区域的frame4字样时，右下角显示frame4.html的内容

3.嵌套规则

块元素：独立一行，可以设置宽高，默认宽高100%
文字类块元素：p,h1~h6,
容器类块元素：div,table,ul,li,ol,dl,dt,dd,tr,td,th,form
行元素：不独立一行，不能设置宽高，根据内容调整
如：input,strong,em,del,a,img,span
特殊字符：可当作文字，如br,&nbsp

嵌套规则：

1，块元素可以嵌套行元素

2，行元素可以嵌套行元素

3，行元素不能嵌套块元素：如

<a><div></div></a>//这种是错的

4，文字类块元素不能嵌套块元素：如

<p><div></div></p>//这种是错的

5,容器类块元素可以嵌套块元素

<div> <p></p></div>

4.属性选择器

属性选择器：对带有指定属性的 HTML 元素设置样式。
1.基本标签[属性]
2.基本标签[属性=值]
3.基本标签[属性~=值]：空格隔开，包含指定值的元素
4.基本标签[属性^=值]：以指定值开始的元素
5.基本标签[属性$=值]：以指定值结束的元素

1，基本标签[属性]

div{
    width: 300px;
    height: 300px;
    background-color: skyblue;
}
p[id]{
    color: gold;
}

<div>
    <p id='hutao'>胡桃</p>
    <p>七七</p>
</div>

2.基本标签[属性=值]

p[id=qiqi]{
    color: gold;
}

<div>
    <p id='hutao'>胡桃</p>
    <p id='qiqi'>七七</p>
</div>

3.基本标签[属性~=值]

p[id~=qiqi]{
    color: gold;
}

<div>
    <p id='hutao qiqi'>胡桃</p>
    <p id='qiqi'>七七</p>
</div>

4.基本标签[属性^=值]

p[id^=qiqi]{
    color: gold;
}

<div>
    <p id='qiqihutao '>胡桃</p>
    <p id='qiqi'>七七</p>
    <p id='qiganyu'>甘雨</p>
</div>

5.基本标签[属性$=值]

p[id$=qi]{
    color: gold;
}

<div>
    <p id='qiqihutao '>胡桃</p>
    <p id='qiqi'>七七</p>
    <p id='ganyuqi'>甘雨</p>
</div>

5.伪元素选择器

p::before{
    content: 'before';
    color: gold;
}
p::after{
    content: 'after';
    color: gold;
}

<p>
    托马
</p>

除了上述两个外还有：

first-letter第一个字（母）
first-line第一行

p::first-letter{
color: gold;
font-size: 20px;
}

<p>
    托马在2.2就要up了托马在2.2就要up了托马在2.2就要up了
    托马在2.2就要up了托马在2.2就要up了托马在2.2就要up了
    托马在2.2就要up了托马在2.2就要up了托马在2.2就要up了
    托马在2.2就要up了托马在2.2就要up了托马在2.2就要up了
    托马在2.2就要up了托马在2.2就要up了托马在2.2就要up了
</p>

p::first-line{
    color: gold;
    font-size: 20px;
}

6.背景

background:color，image，repeat，attachment，position (复合属性)

**background-attachment: fixed; ** 背景图片位置固定

7.文字

1.字符间距letter-spacing（可以设置负值）
2.字间距word-spacing （每一段话之间的距离）
3.左右方向：direction

两个参数：

ltr，leftroright从左到右
rtl，righttoleft从右到左

4.给文字加线：text-decoration

参数：

line-through
over-line
underline

5.文字对齐方式：text-align

参数：

left
center
right
justify,两端对齐

6.缩进text-indent
7.英文字母大小写text-transform

参数：

uppercase
lowercase
capitalize,首字母大写

8.多余的字变成省略号：

①width；②white-space：nowrap；
③overflow：hidden；④text-overflow：ellipsis

单行：

p {
   /**
	思路：
	1.设置inline-block属性
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
  display: inline-block;
  white-space: nowrap; 
  width: 200px;
  overflow: hidden;
  text-overflow:ellipsis;
}

多行：

/**
思路：
	1.超出的文本隐藏
	2.溢出用省略号显示
	3.溢出不换行
	4.将对象作为弹性伸缩盒子模型显示
	5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
	6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
  */
  .text2{
	width:200px;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

9.图片文字结合（垂直对齐、文字浮动）

vertical-align

8.margin重叠问题

8.1平级取最大值

1问题

.box1{
    margin: 60px;
    background-color: rgb(86, 238, 26); 
}
.box2{
    margin: 30px;
    background-color: rgb(118, 179, 230);
}

<div class="box1">box1</div>
<div class="box2">box2</div>

box1为60px,box2为30px，两者margin重叠，两者的实际距离为60px

2解决该问题

1，float

只改变css

.box1{
    margin: 60px;
    background-color: rgb(86, 238, 26); 
}
.box2{
    margin: 30px;
    background-color: rgb(118, 179, 230);
}
div{
    float: left;
    width: 900px;
}

2.inline-block

css

.box1{
    margin: 60px;
    background-color: rgb(86, 238, 26); 
}
.box2{
    margin: 30px;
    background-color: rgb(118, 179, 230);
}
div{
    display: inline-block;
    width: 900px;
}

效果与1相同

8.2嵌套问题

1问题

.box1{
    margin: 30px;
    background-color: green;
}
.box2{
    margin: 60px;
    background-color: rgb(233, 94, 210);
}

<div class="box1">
    <div class="box2">box2</div>
</div>

运行结果为两者重叠在一起了

2解决

1.子级div前后加文字，css不变

<div class="box1">
    box
    <div class="box2">box2</div>
    box
</div>

2.border

.box1{
    margin: 30px;
    background-color: green;
    border: 1px solid red;
}
.box2{
    margin: 60px;
    background-color: rgb(233, 94, 210);
    border: 1px solid red;
}

  <div class="box1">
        <div class="box2">box2</div>
   </div>

3.padding

.box1{
    margin: 30px;
    background-color: green;
    padding: 1px;
}
.box2{
    margin: 60px;
    background-color: rgb(233, 94, 210);
}

<div class="box1">
    <div class="box2">box2</div>
</div>

给父级div添加padding

4.overflow

.box1{
    margin: 30px;
    background-color: green;
    overflow: hidden;
}
.box2{
    margin: 60px;
    background-color: rgb(233, 94, 210);
}

<div class="box1">
    <div class="box2">box2</div>
</div>

9.清除浮动

标准流中，块级元素是独占一行的，float可使一行中放进多个块级元素，一行放不下，就到下一行

整体浮动

div{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    float: left;
}

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>

局部浮动

div{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;

}
.div2{
    width: 50px;
    height: 50px;
    float: left;
    background-color: gold;
}

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>

9.1清除浮动的三种方式

1.clear:both
2.给父级添加高度
3.伪类：
::after{
	content:'';
	display:block;
	clear:both;
}

1.clear:both

div{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;

}
.div2{
    width: 50px;
    height: 50px;
    float: left;
    background-color: gold;
}
.div3{
    clear: both;
}

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>

2.给父级添加高度

.box{
    height: 1000px;
}
div{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;
    float: left;
}

<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>
</div>

3.伪类

使用伪元素的after来清除浮动
1.先将伪元素转变为真元素（添加内容content）
2.将after这个行元素转为块元素（独占一行，display）
3.清除浮动

.box{
    background-color: rgb(247, 199, 95);
    border: 1px solid green;
}  
.div1,.div2,.div3,.div4,.div5{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;
    float: left;
}
.box::after{
    content: '';
    display: block;
    clear: both;
}

<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>
</div>

9.2伪元素解决margin重叠

最外层盒子没有加边框，也不加文字内容（盒子没有被封起来或填充），就会有margin重叠问题

.box{
    background-color: rgb(247, 199, 95);
    /* border: 1px solid green; */
    margin: 30px;
}  
.div1{
    width: 200px;
    height: 200px;
    background:lightblue;
}
.div2,.div3,.div4,.div5{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;
    float: left;

}

<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>
</div>

css添加

.box{
    background-color: rgb(247, 199, 95);
    /* border: 1px solid green; */
    margin: 30px;
}  
.div1{
    width: 200px;
    height: 200px;
    background:lightblue;
}
.div2,.div3,.div4,.div5{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;
    float: left;

}

.box::after{
    content: '';
    display: block;
    clear: both;
}

green; */
margin: 30px;
}
.div1{
width: 200px;
height: 200px;
background:lightblue;
}
.div2,.div3,.div4,.div5{
width: 200px;
height: 200px;
border: red 1px solid;
background:lightblue;
float: left;

}


````html
<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <div class="div4">div4</div>
    <div class="div5">div5</div>
</div>

[外链图片转存中…(img-c8ldJE1w-1637648698854)]

css添加

.box{
    background-color: rgb(247, 199, 95);
    /* border: 1px solid green; */
    margin: 30px;
}  
.div1{
    width: 200px;
    height: 200px;
    background:lightblue;
}
.div2,.div3,.div4,.div5{
    width: 200px;
    height: 200px;
    border: red 1px solid;
    background:lightblue;
    float: left;

}

.box::after{
    content: '';
    display: block;
    clear: both;
}

键.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML、CSS（补充知识点）

1.超链接与锚点1.a标签代表超级链接2.通过href属性指定要跳转的目的链接或者锚点设置href="#"，代表跳转到页面最顶部通过设置的id，跳转到指定id的位置3.通过target属性指定是否要在新窗口中打开目的链接，target="_self"，默认在当前窗口打开target="_blank"，在新窗口打开target="_parent" ，在父窗口打开target="_top"，使得文档载入包含这个超链接的窗口4.br{$}*100+tab可以快速生成100行
复制链接

扫一扫