前端开发学习（初级）知识点1

最新推荐文章于 2021-09-02 08:00:00 发布

Congee_porridge

最新推荐文章于 2021-09-02 08:00:00 发布

阅读量786

点赞数 3

分类专栏：前端开发学习文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_45722699/article/details/119278872

版权

前端开发学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端开发学习（初级）知识点1

一、清除默认样式

部分默认样式（更新中）：

*{
    margin: 0;
    padding: 0;
}
ul,ol{
    list-style-type: none;
    /* 去除列表标志 */
}
a{
    /* 去掉超链接默认的下划线 */
    text-decoration: none;
}

二、选择器

1、标签选择器（元素选择器）

指的是html中的body、p、h1~h6、a、span、ul、li、img、div、dl、dd、dt、hr等标签直接作为选择器。

body{
/*样式*/
}

2、id选择器

**一般用于页面布局。**要被唯一的引用一次。使用“#”。

HTML中：

<!-- 顶部 -->
<div id="top">
    <!-- 内容 -->
</div>
<!-- 头部 -->
<div id="header">
    <!-- 内容 -->
</div>

CSS中：

#top{
    /* 设置样式 */
}
#header{
    /* 设置样式 */
}

或者是在html文件的<head></head>标签中，使用<script type="text/css">CSS代码</style>

3、类别选择器

**一般用于样式。**可以被多次引用，作用于多个网页的内容上；使用“.”。

HTML中：

<div id="header">
     <div class="a1">相应内容</div>
     <div class="a2">相应内容</div>
 </div>  
 <div class="a3">相应内容</div>

CSS中：

#header{
    width: 20px;
	height: 20px;
    /*……*/
}
#header .a1{
    /*……*/
    /*这里包含了嵌套声明，嵌套声明中两者之间使用空格分隔开*/
}
#header .a2{
    /*……*/
    /*这里包含了嵌套声明，嵌套声明中两者之间使用空格分隔开*/
}
.a3{
    /*……*/
}

4、群组选择器

多个样式统一声明成一种样式——集体声明，使用**逗号**分隔开

举例如下：

#top,#header,#nav,#banner,#main,#footer{
	/*多个id选择器的同时声明*/
	/*具体样式*/
}
.a1,.a2,.a3{
	/*多个类别选择器的同时声明*/
	/*具体样式*/
}
body,p{
	/*多个标签选择器的同时声明*/
	/*具体样式*/
}

5、后代选择器

HTML中：

<!-- 精选配件 -->
<div id="accessory">
     <div class="container">
            <div class="acc_top"><img src="img/wb.png"></div>
            <div class="acc_main">
				 <div class="a1">相应内容1</div>
				 <div class="a2">相应内容2</div>
				 <div class="a3">相应内容3</div>
		    </div>
     </div>
</div>

CSS中：

#accessory .acc_main>div:last-child{
    /* 具体样式 */
    /* 这一选择器指的是id值为accessory的标签中，class值为acc_mian的标签中的对应的div中的最后一个，在上例中，指的就是a3所对应的那一元素（元素=“标签+属性”） */
    /* HTML标签对应于DOM树 */
}
#accessory .acc_main>div:first-child{
    /* 具体样式 */
    /* 这一选择器指的是id值为accessory的标签中，class值为acc_mian的标签中的对应的div中的第一个，在上例中，指的就是a1所对应的那一元素（元素=“标签+属性”） */
    /* HTML标签对应于DOM树 */
}

6、奇偶选择器

表格中，便于使用奇偶选择器。
使用方法：
标签名：nth-child(odd|even)
其中，odd对应于奇数行（表格的行从表头开始数起作为1）
	 even：对应于偶数行；

例如：

tr:nth-child(odd){
	/*具体样式*/
	/*比如实现表格各行显示不同颜色*/
}

7、混合使用

①多个class选择器混合使用，用空格分开
eg.
<div class="a1 a2 a3">相应内容</div>

②id和class混用
eg.
<div id="my" class="a1 a2">相应内容</div>

③id选择器不可以多个同时使用，也不要多次使用

三、定位机制中的文档流定位

1、常见的block元素（块元素）及其特点

常见的块元素：
文字类：p、h1~h6
列表类：自定义列表：（dl、dd、dt）、有序列表：（ol、li）、无序列表：（ul、li）
其他：水平线：hr、区域：div、表格：（table、th、tr、td）、表单元素：form

特点：
①独占一行；默认情况下，其宽度自动填满其父元素宽度
②元素的height、width、margin、padding都可设置
③宽度缺省时，默认值为其容器的100%

2、常见的inline元素（内联元素）及其特点

常见的内联元素
超链接：a
字体：加粗：（b、big）、强调：（em、strong）、斜体：i、小号字体：small
换行：br
段内分组：span
特殊点的：定义单选或多选菜单：select、多行文本输入控件：textarea、图片：img、输入框：input

特点：
①不单独占用一行（相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化）
②元素的height、width、margin、padding不可设置
③宽度（width就是它所包含的文字或图片的宽度，不可改变

3、特殊的

input、img、textarea、input都是行内元素，但是它们是可以设置宽和高的。
inline-block元素：同时具备inline元素和block元素的特点
①不单独占用一行
②元素的height、width、margin、padding都可设置

相互转换：display：block；/*inline、inline-block、none*/

四、对齐

1、水平对齐

所见的使用方法有：

text-align:center;/*内联元素；常用于图片、文字水平居中*/
margin:0 auto;/*块元素、auto是关键*/

①定宽块状元素水平居中
例如：

div{
	width:100px;/*定宽*/
	margin:0 auto;
}

②不定宽块状元素水平居中

（1）利用table标签

/*方法1*/
/*只包含关键代码*/
<style>
.hex{
	display:table;
	margin:0 auto;
}
</style>
/*……*/
<div class="hex">
	<p>内容1</p>
	<p>内容2</p>
</div>

/*方法2*/
<style>
table{
	margin:0 auto;
}
</style>
/*……*/
<div>
	<table>
		<tbody>
		<tr><td>
		<ul>
			<li>内容1</li>
			<li>内容2</li>
			<li>内容3</li>
		</ul>
		</td></tr>
		</tbody>
	</table>
</div>

（2）块级元素和内联元素通过display相互转换后，以使用其相应的对齐方式，也可
例如：在子元素中将display设置为inline,父元素text-algin设置为center；

html中：

<div class="container">
	<ul>
		<li>相关内容1</li>
		<li>相关内容2</li>
	</ul>
	<ul>
		<li>相关内容3</li>
		<li>相关内容4</li>
	</ul>
</div>

css中：

.container{
	text-align:center;
}
.container ul{
	list-style:none;
	margin:0;
	padding:0;/*margin:0;padding:0;就是第一个提到的清除默认样式，消除的是文本与div边框之间的距离*/
	display:inline;
}
.container li{
	margin-right:6px;
	display:inline;/*margin-right:6px;为li文本之间的距离*/
}

（3）设置position:relative和left:±50%:利用相对定位的方式，将元素向左偏移50%，即达到居中的目的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>水平居中</title> 
<style>
.wrap {
	float:left;
    position:relative;
	left:50%;
}
.center {
    position:relative;
	left:-50%;
}
</style>
</head>
<body>
<div class="wrap">
	<div class="center">
  		<p>我是水平居中的。</p>
	 	<p>我是水平居中的。</p>
	</div>
</div>
</body>
</html>

③内联元素水平居中
例如：

img{
	text-align:center;
}
p{
	text-align:center;/*这里实现的并不是段落本身的对齐方式，而是段落内元素居中对齐*/
}

2、垂直对齐

所见到的使用方式：

/*方法1：仅对单行文本有效*/
height:80px;
line-height:80px;/*此处，line-height需和height值相等*/
/*方法2：使用较为复杂*/
/*该属性定义**行内元素的基线相对于该元素所在行的基线的垂直对齐**。
允许指定负长度值和百分比值。这会使元素降低而不是升高。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。*/
vertical-align: middle;
/*在对父元素设置此样式时，会对inline-block类型的子元素有用*/
/*方法3：仅对单行文本有效*/
padding:60px 0px;/*此时需未设定区域高度;此设置即上下内边距均为60px，自然实现垂直居中*/

设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：
1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中，但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。
——引自菜鸟教程

此外，也可使用position和transform来实现。（学习后，进行补充）

3、水平、垂直均居中

<html>
<head>
<meta charset="utf-8"> 
<title>水平垂直居中</title> 
<style>
.center {
    padding: 70px 0;/*垂直*/
    border: 3px solid green;
	text-align:center;/*水平*/
}
</style>
</head>
<body>
<div class="center">
  <p>我是水平垂直居中的。</p>
</div>
</body>
</html>

五、自定义列表的使用

自定义列表dl、列表项dt、描述dd

适用于图文混排；其中dt用于图片，dd用于文字。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图文混排</title> 
<style>
ul{
	list-style-type: none;
}
.world_content li{
    background-color: #f6f6f6;
    margin: 20px 10px;
}
.world_content img{
    width:100px;
    height: 100px;
    float: left;
    margin-right: 20px;
}
.world_content dl{
    width: 370px;
    height: 100px;
    position: relative;
}
.world_content dl dt{
    float: left;
    position: absolute;
    top:0px;
    left:0px;
}
.world_content dl dd{
    width: 200px;
    float: left;
    position: absolute;
    top:30px;
    left:120px;
    font-size: 15px;
    color:#676767;
}
</style>
</head>
<body>
<div class="world_content">
     <ul>
         <li>
             <dl>
                 <dt>
                     <img src="img/1.jpg"></dt>
                 <dd>文字描述1</dd>
             </dl>
        </li>
 		<li>
             <dl>
                 <dt>
                     <img src="img/2.jpg"></dt>
                 <dd>文字描述2</dd>
             </dl>
        </li> 
	</ul>
  </div>               
</body>
</html>