学无先后，达者为师

网站首页 编程语言 正文

CSS样式中选择器+盒子模型+定位+浮动

作者：雨霖先森 更新时间： 2022-11-14 编程语言

CSS样式中选择器+盒子模型+定位+浮动

一、选择器

选择器，选择你所需要修饰的HTML元素

1.通配符选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
						/*
			 * 通配符选择器：选择html文档中所有的标签
			 */
			
			*{
				color: red;
			}
		</style>
	</head>
	<body>
				
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用真心待她人</p>
		<p>做美丽的自己</p>
	</body>
</html>

2.标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 标签选择器
			 */
			p{
				color: red;
			}
			
			/*
			 * class选择器
			 * 注意：以.开头
			 */
			.myclass{
				color: green;
			}
			
			/*
			 * id选择器
			 * 注意：
			 * 		1.以#开头
			 * 		2.潜规则：id是唯一的
			 */
			#myid{
				color: blue;
			}
		</style>
	</head>
	<body>
		
		<h1 class="myclass">一级标签</h1>
		<h2>二级标签</h2>
		<h3 class="myclass">三级标签</h3>
		<h4>四级标签</h4>
		<h5 class="myclass">五级标签</h5>
		<h6 id="myid">六级标签</h6>
		
		<p>用真心待她人</p>
		<p>做美丽的自己</p>
	</body>
</html>

3.基本选择器的优先级别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 基本选择器的优先级别：ID选择器>CLASS选择器>标签选择器
			 */
			
			p{
				color: red;
			}
			
			.myclass{
				color: green;
			}
			
			#myid{
				color: blue;
			}
		</style>
	</head>
	<body>

		<p id="myid" class="myclass">用良心做教育</p>
		
	</body>
</html>

4.群组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 群组选择器
			 */
			
			h1,h3,h5,p{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
		
		<p>用真心待她人</p>
		<p>做美丽的自己</p>
	</body>
</html>

5.派生选择器/上下文关系选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 派生选择器/上下文关系选择器
			 * 
			 * 	后台选择器
			 * 		ul a{
						color: red;
					}
					
				子代选择器
					li>a{
						color: red;
					}
					
				相邻兄弟选择器
					注意：效果作用于后者
					a+a{
						color: red;
					}
			 */

		</style>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
			<li>
				<a href="#">超链接7</a>
			</li>
		</ul>
		
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		<a href="#">超链接10</a>
		<a href="#">超链接11</a>
		<a href="#">超链接12</a>
	</body>
</html>

6.属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 * 	属性选择器 --- 单个属性
			 * 		input[placeholder]{
						color: red;
					}
				
				属性选择器 --- 单个属性+值	
					input[type=password]{
						color: red;
					}
					
				属性选择器 --- 多个属性
					input[type][placeholder]{
						color: red;
					}
					
				属性选择器 --- 多个属性+值
					input[type=password][name=repassword]{
						color: red;
					}
			 */
			
			
			
		</style>
	</head>
	<body>
		
		<form action="服务器地址" method="post">
			
			账号：<input name="username" type="text" placeholder="请输入账号"/><br />
			密码：<input name="password" type="password" placeholder="请输入密码"/><br />
			确认密码：<input name="repassword" type="password" placeholder="请输入确认密码"/><br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbys" value="football"/>足球
				<input type="checkbox" name="hobbys" value="basketball"/>篮球
				<input type="checkbox" name="hobbys" value="shop"/>购物
				<br />
			籍贯：
				<select name="province">
					<option value="sc">四川</option>
					<option value="hn" selected="selected">湖南</option>
					<option value="hb">湖北</option>
				</select>省
				<select name="city">
					<option value="cs">长沙</option>
					<option value="yy">岳阳</option>
					<option value="xy" selected="selected">襄阳</option>
					<option value="ld">娄底</option>
					<option value="yz">永州</option>
				</select>市
				<br />
			
			<input type="submit" value="注册" />
			
		</form>
		
	</body>
</html>

7.样式的优先级别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--
			样式的优先级别：行内样式 > 内部样式和外部样式
			注意：内部样式和外部样式看加载顺序
        -->
		
		<!--内部样式-->
		<style type="text/css">
			p{color: red;}
		</style>
		
		<!--外部样式-->
		<link rel="stylesheet" href="../css/new_file.css" />
	</head>
	<body>
		
		<!--行内样式-->
		<p style="color: blue;">用良心做教育</p>
		
	</body>
</html>

8.锚伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			a:link {color: #66CCFF}	/* 未访问的链接 */
			a:visited {color: #CC0000}	/* 已访问的链接 */
			a:hover {color: #33FFFF}	/* 鼠标移动到链接上 */
			a:active {color: #9900FF}	/* 选定的链接 */
		</style>
	</head>
	<body>
		
		<a href="http://www.sina.com.cn">新浪微博</a>
		
	</body>
</html>

9.常用属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			p{
				font-family: "微软雅黑";/*字体*/
				font-size: 30px;/*大小*/
				/*
				 *    ---- normal标准样式
                      ---- italic斜体
                      ---- oblique倾斜
                      ---- inherit从父类继承的字体样式
                 */     
				font-style: oblique;/*风格*/
				 /*
				      ----normal标准样式
                      ----bold粗体
                      ----bolder更粗
                      ----lighter更细
                  */       
				font-weight: bolder;/*字体加粗*/ 
				
				letter-spacing: 20px;/*字符间隔*/
				text-decoration: underline;/*添加划线*/
				text-align: center;/*字体居中*/
				
				background-color: red;/*背景*/ 
				color: white;
				
				/*
				 * 边框
			                               属性名称
			                   border-bottom
				                 solid(实线)
				                 dashed(虚线)
				                 double(双实线)
				*/                 
				border:orange 10px solid;/*边框：颜色、粗细、实线*/
				
			}
			
			
		</style>
	</head>
	<body>
		
		<p>用良心做教育</p>
		
		
	</body>
</html>

二、盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				width: 200px;
				height: 200px;
				border: red 1px solid;
				
				/*padding: 50px;设置上下左右内边距*/
				/*padding-top: 20px;设置顶部内边距*/
				/*padding-bottom: 20px;设置底部内边距*/
				/*padding-left: 20px;设置左边内边距*/
				/*padding-right: 20px;设置右边内边距*/
				
				/*margin: 50px;设置上下左右外边距*/
				margin-top: 20px;/*设置顶部外边距*/
				margin-bottom: 20px;/*设置底部外边距*/
				margin-left: 20px;/*设置左边外边距*/
				margin-right: 20px;/*设置右边外边距*/
                
                /*margin: 0 auto;水平居中*/
			}
			
		</style>
	</head>
	<body>
		
		<div>
			<span>元素</span>
		</div>
		
	</body>
</html>

三、定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

1.相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				margin-top: 50px;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: relative;/*相对定位：保留原来的位置，相对于原来的位置进行位移*/
				left: 30px;
				top: 30px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
			
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
		
	</body>
</html>

2.绝对定位

绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。

并且绝对定位不会保留原有的位置空间。

z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				margin-top: 50px;
				
				position: relative;
			}
			
			#box01{
				width: 100px;
				height: 100px;
				border: red 1px solid;
			}
			
			#box02{
				width: 100px;
				height: 100px;
				border: green 1px solid;
				
				position: absolute;/*绝对定位：不保留原来的位置，向上去找寻父级标签，查看父级标签是否有position属性，如果有就按照父级标签位置进行位移，如果没有就继续向上找寻，直到body位置*/
				left: 30px;
				top: 30px;
			}
			
			#box03{
				width: 100px;
				height: 100px;
				border: blue 1px solid;
			}
			
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div id="box02"></div>
			<div id="box03"></div>
		</div>
		
	</body>
</html>

3.固定定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#top{
				position: fixed;/*固定定位*/
				top:70%;
				left: 90%;
			}
		</style>
	</head>
	<body>
		
		<a id="top" href="#new01">☝</a>
		
		<a href="#new01">法制</a>
		<a href="#new02">国际</a>
		<a href="#new03">教育</a>
		<a href="#new04">娱乐</a>
		
		
        <a name="new01"></a><!--锚点-->
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<h1>法制新闻</h1>
		<a name="new02"></a><!--锚点-->
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<h1>国际新闻</h1>
		<a name="new03"></a><!--锚点-->
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<h1>教育新闻</h1>
		<a name="new04"></a><!--锚点-->
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		<h1>娱乐新闻</h1>
		
	</body>
</html>

四、浮动

浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

解决办法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div

.clear{clear:both;}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#manager{
				border: orange 1px solid;
				
				width: 80%;
				margin: 0 auto;
				padding: 5px;
			}
			
			#box01{
				border: orange 1px solid;
				
				width: 100%;
				height: 150px;
			}
			
			#box02{
				border: orange 1px solid;
				
				width: 25%;
				height: 200px;
				
				float: left;
			}
			#box03{
				border: orange 1px solid;
				
				width: 45%;
				height: 200px;
				
				float: left;
			}
			#box04{
				border: orange 1px solid;
				
				width: 25%;
				height: 200px;
				
				float: left;
				
			}
			
			.myclear{
				clear: both;
			}
			
			
		</style>
	</head>
	<body>
		
		<div id="manager">
			<div id="box01"></div>
			<div>
				<div id="box02"></div>
				<div id="box03"></div>
				<div id="box04"></div>
				<div class="myclear"></div>
			</div>
		</div>
		
	</body>
</html>

五、扩展

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			body{
				background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;
			}
			
			input{
				width: 100px;
				height: 50px;
				color: white;
				font-weight: bolder;
				background-color: orange;
				border-radius: 15px;/*圆角属性*/
				box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
				text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/
			}
			
		</style>
	</head>
	<body>
		
		<input type="button" value="普通按钮" />
	</body>
</html>

六、新增语义化标签

标签 描述
头部标签
导航标签
内容标签
块级标签
侧边栏标签
尾部标签 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<style type="text/css">
            header,nav,article,aside,footer,section{
                background-color: #87A442;
                text-align: center;
                border: black 1px solid;
                border-radius:20px;
                margin: 10px;
                padding: 10px;
            }

            header{
                height: 120px;
            }

            nav{
                height: 50px;
            }

            article{
                width: 46%;
                height: 120px;
                float: left;
            }

            aside{
                width: 46%;
                height: 120px;
                float: right;yu
            }

            footer{
                clear: both;
                height: 120px;
            }

            section{
                height: 70px;
            }
		
	</style>
	<header>头部标签 - header</header>
	<nav>导航标签 - nav</nav>
	<div>
		<article>内容标签 - article
			<section>块级标签 - section</section>
		</article>
		<aside>侧边栏标签 - aside</aside>
	</div>
	<footer>尾部标签 - footer</footer>
	</body>
</html>

原文链接：https://blog.csdn.net/GL280599ZL/article/details/127837958

相关推荐

栏目分类
最近更新
Copyright © 2025   AB教程网    免责声明
本站部分资源收集于互联网、用户投稿，其版权归原作者所有，内容以共享、参考、学习为主，不存在任何商业目的。如有侵权请与本站联系，情况属实将予以删除!
本站由    提供CDN加速