web前端技术笔记（三）CSS作用、选择器、盒子模型

最新推荐文章于 2022-07-24 15:41:46 发布
最新推荐文章于 2022-07-24 15:41:46 发布
阅读量311 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27251475/article/details/90702325
版权

 

CSS简介

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。

css基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

/*
    css注释 ctrl+shift+"/"
*/


div{ 
    width:100px; 
    height:100px; 
    color:red 
}

新建样式文件 

 

 

css页面引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
    <!-- 第三种页面嵌入样式的方式：外链式，推荐 -->
    <link rel="stylesheet" href="css/main.css">

    <!-- 第二种页面嵌入样式的方式：内嵌式，部分推荐 指定标签P-->
    <style>        
        p{width:200px;height:200px;background:gold;}    
    </style>
</head>
<body>
    <h1>这是一个标题</h1>

    <!-- 第一种页面嵌入样式的方式：行间样式 不推荐使用  颜色也可使用十六进制表示蓝色#0000FF-->
    <div style="width:100px;height:100px;background:red">这是一个div标签</div>

    <p>这是一个段落</p>

</body>
</html>

 

CSS文件内容 与第二种方法类似 

h1{
    width:200px;
    height:200px;
    background:greenyellow;
}

css文本设置

常用的应用文本的css样式：

  • color 设置文字的颜色，如： color:red;

  • font-size 设置文字的大小，如：font-size:12px;

  • font-family 设置文字的字体，如：font-family:'微软雅黑';

  • font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;

  • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉 可用于去掉网站链接下划线

  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px 

  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

css颜色表示法

css颜色值主要有三种表示方法：

1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用文本样式</title>
	<style type="text/css">
		div{
			
			color:green;

			/* font-size:20px;
			font-family:'Microsoft Yahei';	
			line-height:40px; */

			font:normal 20px/40px 'Microsoft Yahei';

			/* text-decoration:underline; */

			text-indent:40px;


		}
		em{
			font-style:normal;
			color:gold;
		}
		span{
			color:red;
			font-size:30px;
		}
		h1{
			font-weight:normal;
		}
		a{
			text-decoration:none;
            /* a标签需要转换类型 才能页面居中*/
			text-align:center;
		}

		p{
			text-align:center;
		}

	</style>
</head>
<body>
	<h1>样式演示</h1>
	<div>
		<span>HTML</span>是 <em>HyperText Mark-up Language</em> 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
	</div>

	<p>这是一个p标签</p>

	<a href="http://www.baidu.com">百度网的链接</a>


</body>
</html>

css选择器

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。id选择器权重高于类选择器，优先显示id选择器的样式。
举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。最高不要超过4层否则会影响性能问题。
举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

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

 

6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态（链接变色），伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.link{
			font-size:30px;
			text-decoration:none;
			color:green;
		}
		.link:hover{
			color:gold;
			font-weight:bold;
			font-style:italic;
		}
		.box01,.box02{
			font-size:20px;
		}
        /* 在元素前添加内容，且不可选中*/
		.box01:before{
			content:"· ";
			color:red;
		}
		.box02:after{
			content:" 。";
			color:red;
		}

	</style>
</head>
<body>
	<a href="http://www.baidu.com" class="link">百度搜索</a>
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
</body>
</html>

 

CSS盒子模型

盒子模型解释
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置宽高

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

设置边框
设置一边的边框，比如顶部边框，可以按如下设置：

border-top-color:red;    /* 设置顶部边框颜色为红色 */  
border-top-width:10px;   /* 设置顶部边框粗细为10px */   
border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)  
  dashed(虚线)  dotted(点线); */

上面三句可以简写成一句：

border-top:10px solid red;

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子模型</title>
	<style type="text/css">

		.box{
			width:200px;
			height:200px;
			background-color:gold;
			
			/* border-top-color:#000;
			border-top-width:10px; */

			/*  实线： solid  虚线：dashed  点线：dotted   */
			/* border-top-style:solid; */

			/* border-top:10px solid #000;
			
			border-left:10px dashed #000;
			
			border-right:10px dotted #000;
			
			border-bottom:10px solid #000; */

			border:10px solid #000;

			/* padding-top:20px;
			padding-left:40px;
			padding-right:80px;
			padding-bottom:100px; */
			/*  
			分别设置盒子的 上边  右边  下边  左边 的padding值
			 
			padding:20px 80px 100px 40px;
 			*/


	       /* 分别设置盒子的 上边  左右  下边的padding值 
 			padding:20px 80px 100px;
		*/
		
		/* 分别设置盒子的 上下  左右  的padding值 
		padding:20px 80px;*/


		/* 同时设置四个边的padding是20px*/
		padding:20px;

		/* margin-top:100px;
		margin-left:100px; */

		margin:100px 0 0 100px;


		}




	</style>
</head>
<body>
	<div class="box">元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样</div>
</body>
</html>

盒模型的实际尺寸

盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

  • 盒子宽度 = width + padding左右 + border左右
  • 盒子高度 = height + padding上下 + border上下

盒模型使用技巧及相关问题

margin相关技巧
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			/* margin:50px auto 100px auto; */
			/* 左右水平居中 相对于浏览器 */
			margin:50px auto 100px;
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	
		/*  去掉body默认的margin值	 */
		body{
			margin:0;
		}		
		.box{
			width:202px;
			height:156px;
			background-color:pink;
			margin:50px auto 0;
		}

		.box div{
			width:200px;
			height:30px;
			border:1px solid green;
			background-color:gold;
            /* 通过设置为负值 抵消各个Div边框 */
			margin-top:-1px;

			/* border-bottom:0px; */
		}


		/* .box .last{
			border-bottom:1px solid green;
		} */




	</style>
</head>
<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div class="last"></div>
	</div>
</body>
</html>

 

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top(推荐)
3、将元素浮动或者定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box01,.box02{
			width:200px;
			height:200px;
			background-color:gold;
		}
		
		.box01{
            /*两个margin相遇合并成一个，值为两种中的最大值*/
			margin-bottom:30px;
		}

		.box02{
			margin-top:20px;
		}


	</style>
</head>
<body>
	<div class="box01">1</div>
	<div class="box02">2</div>
</body>
</html>

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：（常用）

.clearfix:before{
    content: '';
    display:table;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		/* 第三种解决塌陷的方法   */
		.clearfix:before{
			content:"";
			display:table;
		}
		
		.con{
			width:300px;
			height:300px;
			background-color:gold;
			/* border:1px solid #000; 第一种解决塌陷的方法	 */
			/* overflow:hidden; 第二种解决塌陷的方法 */
			
		}

		.box{
			width:200px;
			height:100px;
			background-color:green;
			margin-top:100px;
			margin-left:50px;
		}



	</style>
</head>
<body>
	<div class="con clearfix">
		<div class="box"></div>
	</div>	
</body>
</html>

 

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

元素溢出示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素溢出</title>
	<style type="text/css">
		
		.box{
			width:300px;
			/* 不限制高度 内容会自动撑开，不会溢出*/
			height:200px;
			border:1px solid #000;
			margin:50px auto 0;
			background-color:gold;
			line-height:30px;
			/* 
				visible:缺省值，溢出的元素可见;

				hidden：将溢出的元素裁切隐藏

				scroll:显示滚动条，不管是否溢出;

				auto：溢出的时候产生滚动条，不溢出的时候不显示滚动条
				 */
			overflow:auto;
		}


	</style>
</head>
<body>
	<div class="box">当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。</div>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 表格整体样式 */
        .tablestyle01{
            width:400px;
            height:200px;
            border:1px solid #000;
            /* 设置边线合并 */
            border-collapse:collapse;
        }

        /* 表格表头单元格样式 */
        .tablestyle01 th{
            border:1px solid #000;
            background:blue;
            color:white;
        }
        
        /* 表格普通单元格样式 */
        .tablestyle01 td{
            border:1px solid #000;

            /* 设置文字水平对齐方式 */
            text-align:center;
        }
    
    </style>
</head>
<body>
    <table class="tablestyle01">
       <tr>
           <th>1</th>
           <th>2</th>
           <th>3</th>
           <th>4</th>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
           <td>4</td>
       </tr>
       <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
       </tr>
       <tr>
            <td>1</td>
           <td>2</td>
           <td>3</td>           
       </tr>
       <tr>
           <td colspan="4">1</td>
          
       </tr>
    </table>
</body>
</html>

 

M行者X
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 模拟百度网页首页2
m0_49824320的博客
12-26 1216
盒子模型 css假定每一个标签都是一个矩阵，围绕着这个矩阵从内到外，展开一系列的属性来描述它，这一系列属性，被称为【盒子模型】 组成：content 、padding、border、margin content：内容，它由height、width组成padding：内边距，内容到边框的举例 A、它有上下左右四个方向的内间距，padding-left/right/top/bottom B、系统在设置padding的时候，默认是先撑大content，再拿出对应的间距...
CSS基础、盒子模型、选择器
m0_67736469的博客
04-13 456
文章目录一、 HTML综合案例尝试制作表单之后的心得二、CSS简介三、 CSS语法规范四、CSS代码风格1.样式格式书写（1）紧凑格式（2）==展开格式==（更直观，推荐使用）2、样式小写3、空格规范（1）属性值前面，冒号后面空格（2）标签和大括号中间保留空格五、CSS基础选择器1、选择器作用2.选择器分类基础选择器标签选择器类选择器==多类名==id选择器通配符选择器六、CSS字体属性1、字体系列2、字体大小总结 一、 HTML综合案例尝试 制作了一个表单：（此表单是根据B站pink 老师学做的，内容基
CSS基础知识点详细总结（一）
阿俊的博客
06-25 2685
CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。目的是为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。 目录 1、基本语法及引用方法 1.1基本语法 1.2三种引用方法 2、...
web前端学习（CSS篇）
Xiaoxian____的博客
07-24 929
前端基础
前端web开发命名规范
qq_28501393的博客
02-10 367
一，命名规则说明 1）、所有的命名最好都小写 2）、属性的值一定要用双引号("")括起来，且一定要有值如class="he ader",id="header" 3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律 工整 4）、空元素要有结束的tag或于开始的tag后加上"/" 5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、 font、bgColor、b
html 中常用盒子的名称,盒子模型和编程中最常用的四种对其方案----2018年8月16日...
weixin_33750664的博客
06-09 487
html>Titlebody{padding:0;margin:0;border:#00CC66solid2px;}div{border:#0000FF10pxsolid;width:150px;height:150px;padding:50px;/*内边距*/margin:50px;/*外边距*/}编程实现盒模型的基本要素:内容.box1{...
CSS 基础（选择器、属性、盒子模型等）
stanwuc的博客
10-24 200
一、CSS选择器 1、标签选择器：所有标签选中 2、id 选择器：id 唯一；字母、下划线和数字组成，数字不开头；只会选中一个元素； 3、类选择器：class=“类名 类名”（多类） 4、后代选择器：tag tag｛｝； 上面的 tag 可以是标签、id 和 class 选择器；可以无限往下发展；后代包含子和孙； 5、子元素选择器：tag>tag｛｝ 不能有空格 关于 table>tr...
斑码教育大前端课堂笔记-css第一天
11-24
【CSS第一天】——斑码教育大前端课堂笔记详解 斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，...
我的HTML+Css学习笔记
02-25
“Css高级技巧”可能涉及选择器的使用，如类选择器（.class）、ID选择器(#id)、伪类（如`:hover`、`:active`、`:focus`）以及更复杂的组合选择器。此外，也可能涵盖CSS3的新特性，如媒体查询（Media Queries）用于...
前端笔记大全，非常全！
05-23
例如，JavaScript中的异步编程（回调函数、Promise、async/await）、CSS选择器性能、BFC（块格式化上下文）、跨域解决方案、前端安全问题（XSS、CSRF）、模块化（CommonJS、AMD、ES模块）等。熟悉这些知识点有助于在...
前端开发笔记.docx
最新发布
08-21
选择器如类选择器（`.class`）、ID选择器（`#id`）、元素选择器（`element`）和伪类（`:hover`, `:active`, `:focus`）等帮助定位要应用样式的元素。样式属性包括颜色、字体、边距、填充、背景等，而值可以是颜色、...
《CSS3》学习笔记大全
04-12
CSS3 主要就是在 CSS2 的基础上增加了一些选择器和属性，并且完全向后兼容。CSS3 的主要优势是能够使得网页变得更加炫酷，之前需要用 JavaScript 才能实现的效果现在用 CSS3 就可以轻松实现。 新增服务器字体 CSS3...
css学习（四）：margin负值原理和垂直外边距重叠合并
prdslf001001的博客
08-22 1565
一、margin和padding的简单说明 1、margin是用来隔开元素与元素的间距；padding是用来隔开元素和内容的间隔； 2、margin用于布局分开元素，使元素与元素互不相干；padding用于元素和内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”； 二、margin负值原理： 1、当margin四个值都为正数值的话，那么margin按照正常逻辑同周围元素产生...
css之margin使用技巧：元素水平居中，边框合并，top塌陷
weixin_49855251的博客
01-28 893
盒模型使用技巧及相关问题 margin相关技巧 1、设置元素水平居中： margin:x auto; 2、margin负值让元素位移及边框合并 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width:200px;
margin相关技巧以及margin-top塌陷问题
qq_45516629的博客
03-13 389
使用相关技巧 1、设置元素水平居中： margin: 0 auto; 2、负边距+定位：水平垂直居中 一个绝对定位的盒子， 利用 父级盒子的 50%， 然后 往左(上) 走 自己宽度的一半 ，可以实现盒子水平垂直居中。 3、margin负值让元素位移及边框合并 外边距合并 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度...
『jQuery』.html(),.text()和.val()的使用
weixin_30443731的博客
04-21 1636
本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法。jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如说，你可以给已存在的元素的内部，周围，前面或者后面增加新元素；或者用一个元素替代另一个元素；你也可以读取或者修改一个元素的内容或...
Web前端，理解 CSS的作用，了解 CSS语法规则和引入方式及其区别
星辰迷上大海的博客
04-23 235
前言 持续总结输出中，今天讲的是Web前端，理解 CSS的作用，了解 CSS语法规则和引入方式及其区别。 CSS初识 CSS的介绍 CSS:层叠样式表(Cascading style sheets) CSS作用是什么? • 给页面中的HTML标签设置样式 CSS 语法规则 写在哪里? • css写在style标签中，style标签一般写在head标签里面，title标签下面 怎么写? CSS 初体验 常见属性: css常见属性 作用 color 文字颜色 font-size 字体大
jQuery中.html() 方法?
热门推荐
墓亦龍的博客
03-30 1万+
.html() 方法?1、定义及用法：html()方法返回被选元素的内容，即括号内未设置参数。                          若设置参数，返回设置参数的内容。                          并且该参数内容覆盖所有想匹配的元素的内容                          参数可为函数，即function(index,dcontent)       ...
web前端技术笔记（二）html 表单 和页面嵌套
行者
05-30 1951
1.相对路径和绝对路径 2.有序和无序列表 3.表格 4.注册表单 5.勾选框 6.下拉框 7.多行文本 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </hea...
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值