前端专题盒子模型和CSS样式基础

最新推荐文章于 2024-07-25 10:45:42 发布

极光雨雨

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量277

点赞数

分类专栏： # H5 CSS JS基础文章标签： css html

本文链接：https://blog.csdn.net/weixin_44131922/article/details/107870689

版权

H5 CSS JS基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

盒子模型

在网页中的所有元素一般都可以看作是用了一个盒子将其内容包在一起

在这里插入图片描述

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{ 
				border: 0px solid red;
				padding: 10px 5px;				/*内边距*/
				float: left;
				list-style: none;
				/*margin: 5px;*/				/*外边距*/
			}
			ul{
				overflow: auto;
				background: darkblue;
				color: white;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>AA</li>
			<li>BB</li>
			<li>CC</li>
		</ul>
	</body>
</html>

DIV+CSS

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。是一种布局，在做页面的时候，采用div+css方式布局

<div></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>This is test.</title>
		
		<link rel="stylesheet" type="text/css" href="css/Css1.css"/>
		<!--/*内部样式和外部连接的样式文件看放的先后顺序*/-->
		<style type="text/css">/*内部式*/
			p{color: indianred;text-align: center;font-family: "楷体";font-size: 42px;background-color: rgb(20,120,255);}
			div{background-color: black;}
		</style>
	</head>
	<body>				<!--行内式-->
		<div style="color: green; font-size: 30px;height: 23px;">ooxxooxxoooxxx</div>
		
		<p>This is a P.</p>
	</body>
</html>

叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

给标签穿一层漂亮的衣服，让整个页面看起来更好看，说白了将标签进行排版

样式规则，写法

样式放在标签style
语法规则：
选择器{属性1：属性值1;属性2：属性值2;…}

1.行内样式表
就是将样式写在标签里面

这是一段文字

2.内部样式表选择器{属性：属性值;...........} p{color: yellow;font-size: 30px;background: purple;text-align: center;/*水平居中*/ font-family: "黑体";}

3.外部样式表
引用外部的样式文件

优先级：离标签越近优先级越高
行内样式表>内部样式表>外部样式表

选择器

选择器主要用来对你想要修改的内容进行选择，选择的方式主要为三种

1.标签选择器
标签名{样式列表}
2.类选择器
. 类名{样式列表} 在标签在的class属性的值为类名
3.id选择器
#id{样式列表} ，一般不允许重复在标签内部的id属性的值为id的选择方法
4.作用范围
标签选择器>类选择器>id选择器

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title><!--ID选择器一般不重复-->
		<style type="text/css">
			/*h1{color: red;}*/
			p{font-weight: bold;}
			.t1{color: aquamarine;}     /*类名和id一样不能使用数字开头*/
			.t2{color: darkkhaki;}      /*类名可以重复  id可以重复但一般不重复使用*/
			#a2{color: purple;}         /*汉字也可以使用但一般不使用*/
			
			div,h1,p{border:1px solid red;}
			a,span{border: 12px red solid;}
			span{display: block;}            /*可以通过display属性将行内标签和块状标签相互转化
																	block块状，inline行内*/
		</style>  
	</head>
	<body>
		<!--标签选择器-->
		<h1>静夜思</h1>
		<p class="t2">床头明月光</p>
		<p class="t1">疑似地上霜</p>
		<p id="a2">举头望明月</p>
		<p >低头思故乡</p>
		
		<div id="test1">
			一个DIV块
		</div><h1>一行</h1><p>一段</p>			<!--行内标签不能设置宽高，不独占一行a,span,-->
												<!--块状标签能设置宽高，独占一行h,p,div-->
		
		<a href="#">A标签</a>
		<span>Span</span>
	</body>
</html>

CSS–float浮动

浮动：将所有的标签变成可以设置宽高的行内标签，跟inline-block相似

Float:
Left 左浮动
Right 右浮动
Clear 清楚浮动

浮动塌陷：
父标签里面所有的子标签全部浮动，会导致父标签高度塌陷成0
解决：overflow:auto/hidden 防止塌陷

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				border: 0px solid red;
				float: left;
				list-style: none;		/*去掉前面的小点*/
				width: 50px;
				height: 30px;
				line-height: 30px;		/*居于竖直高度的中间   行高*/
				text-align: center;
				color: white;
			}
			ul{
				border: 0px solid blue;	 /*float移动了父类的所有子类 造成了塌陷*/
				overflow: auto;			 /*清除塌陷   或者使用hidden*/
				background-color: darkblue;
			}
			li:hover{				/*悬停*/
				background-color: red;
				cursor: pointer;
			}
		</style>
	</head>
	<body>						<!--//float将所有标签变成可以设置宽高的行内标签-->
		<ul>
			<li>卡的</li>
			<li>删掉</li>
			<li>卡的</li>
			<li>地方</li>
			<li>与同样</li>
			<li>那么</li>
			<li>全为</li>
			<li>阿斯顿</li>
		</ul>
	</body>
</html>

极光雨雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端专题盒子模型和CSS样式基础

盒子模型在网页中的所有元素一般都可以看作是用了一个盒子将其内容包在一起案例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ border: 0px solid red; padding: 10px 5px; /*内边距*/
复制链接

扫一扫