css层叠样式表(四)

最新推荐文章于 2023-08-23 20:34:01 发布
最新推荐文章于 2023-08-23 20:34:01 发布
阅读量104 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxl2029/article/details/118112169
版权

浮动

  • 概述
    float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。css提供了3种传统布局方式：

    1. 普通流：网页元素按默认方式排列。
    2. 浮动
    3. 定位
    <head>	
	<style type="text/css">
		.nav1 {
			width: 100px;
			height: 100px;
			background-color: #b18aff;
			float: left;/* 左浮动 */
		}
		.nav2 {
			width: 100px;
			height: 100px;
			background-color: #ffbcfa;
			float: right;/* 右浮动 */
		}
	</style>
</head>
<body>
	<div class="nav1">123</div>
	<div class="nav2">456</div>
</body>

    在这里插入图片描述
    - 浮动的特性：

    1. 浮动的盒子浮起来了所以不保留原先的位置。
    2. 多个盒子浮动会相互紧贴在一行并且顶端对齐，父盒子放不下会另起一行对齐。
    3. 任何元素浮动后都具有行内块元素特性（如果行内元素浮动了，就不需要再转为行内块/块级元素就可以设置宽高了），块级盒子原本宽度和父级相同，但浮动后宽高根据内容决定（也可以设置宽高）。
    4. 一般父盒子中的子盒子是一浮全浮的。浮动的盒子不会影响前面的标准流，只影响后面的标准流。

  • 浮动约束
    为了约束浮动的位置，网页布局一般使用标准流的父盒子进行上下位置布置，内部子元素采用浮动进行约束布局。

    <head>
	<style>
		.box {
			height: 300px;
			width: 650px;
			background-color: #ffbcfa;
			margin: 50px auto;
		}
		.nav {
			height: 80px;
			width: 80px;
			background-color: #74beff;
			float: left;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="nav">1</div>
		<div class="nav">2</div>
	</div>
</body>

    在这里插入图片描述

清除浮动

  • 为什么需要清除浮动
    由于父盒子很多情况不方便给高度，浮动的盒子不保留原来的位置，父盒子的高度就为0。会影响下面的标准流盒子。如果父盒子有高度就不需要清除浮动。

    1. 父级没有高度
    2. 子盒子浮动了
    3. 影响了后面的标准流布局

  • 概述
    解决浮动后不保留原来位置带来的影响。清除浮动之后，父级会根据浮动的子盒子检测高度。父盒子有了高度就不影响下面的标准流了。

    清除浮动的方式有点缺点
    额外标签法(隔墙法)通俗易懂书、写方方便添加无意义的标签，结构较差
    父级overflow:hidden;书写简单溢出隐藏
    父级after伪元素结构语义正确IE7-7不支持:after，兼容性问题
    父级双为元素结构语义正确IE7-7不支持:after，兼容性问题

  • 清除浮动 - 额外标签法
    在浮动子盒子最后添加一个块级盒子给其添加一个 clear:both; 属性

    <head>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	
	.box {
		width: 900px;
		background-color: #b2afff;
		border: 1px solid #FF0000;
	}
	.nav1 {
		width: 300px;
		height: 120px;
		background-color: #395d93;
		float: left;
	}
	.nav2 {
		width: 300px;
		height: 120px;
		background-color: #395d93;
		float:right;
		}
		
	.clear {
		clear: both;/* 清除浮动 */
	}

	p {
		height: 100px;
		background-color: #4e7e68;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="nav1">1</div>
		<div class="nav2">2</div>
		<div class="clear"></div> /*添加一个堵门的盒子在最后*/
	</div>
	<p></p>

</body>

  • 清除浮动 - 父级添加overflow
    overflow: hidden/auto/scroll;三个值都可以

    <head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	
	.box {
		overflow: hidden; /*清除浮动*/
		width: 900px;
		background-color: #b2afff;
		border: 1px solid #FF0000;
	}
	.nav1 {
		width: 300px;
		height: 120px;
		background-color: #395d93;
		float: left;
	}
	.nav2 {
		width: 300px;
		height: 120px;
		background-color: #395d93;
		float:right;
	}
		

	p {
		height: 100px;
		background-color: #4e7e68;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="nav1">1</div>
		<div class="nav2">2</div>
	</div>
	<p></p>
</body>

  • 清除浮动 - .类名:after 伪元素法

    <head>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	
	.clearfix:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {
		*zoom: 1;
	}
	
	.box {
		width: 900px;
		background-color: #b2afff;
		border: 1px solid #FF0000;
	}
	.nav1 {
		width: 300px;
		height: 120px;
		background-color: #395d93;
		float: left;
	}
	.nav2 {
		width: 300px;
		height: 120px;
		background-color: #395d93;
		float:right;
	}
		
	p {
		height: 100px;
		background-color: #4e7e68;
	}
	</style>
</head>
<body>
	<div class="box clearfix">
		<div class="nav1">1</div>
		<div class="nav2">2</div>
	</div>
	<p></p>
</body>

css的书写顺序

  1. 布局定位属性：display / position / float / clear / visibility / voerflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font- / text- /
  4. 其他属性(css3)：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient…

定位

  • 概述
    定位将盒子定在某一个位置，由定位模式+边偏移组成。

  • 定位模式
    定位模式决定元素的定位方式，通过css的position属性来设置，总共有四个值：

    值语义
    static静态定位
    relative相对定位
    absolute绝对定位
    fixed固定定位

  • 边偏移
    边偏移用于定位盒子的具体位置，有top、bottom、left、right四个属性

    边偏移属性范例描述
    toptop: 50px;顶端偏移量，定义元素相对于其父元素上边线的距离
    bottombottom: 50px;底部偏移量，定义元素相对于其父元素下边线的距离
    leftleft: 50px;左侧偏移量，定义元素相对于其父元素左边线的距离
    rightright: 50px右侧偏移量，定义元素相对于其父元素右边线的距离

  • 静态定位 - position: static
    静态定位就是标准流，很少使用仅了解

  • 相对定位 - position: relative
    相对于该盒子原来的位置移动偏移，并且保留原来的位置。（常给绝对定位当父亲）

    <head>
	<style type="text/css">
		.nav1 {
			position: relative;
			top: 80px;
			left: 1000px;
			
			width: 150px;
			height: 150px;
			background-color: #9f92ff;
		}
		.nav2 {
			
			width: 200px;
			height: 200px;
			background-color: #ffb2b3;
		}
	</style>
</head>
<body>
	<div class="nav1"></div>
	<div class="nav2"></div>
</body>

    在这里插入图片描述

  • 绝对定位 - position: absolute
    绝对定位根据有定位的父/祖元素进行定位。如果父/祖元素没有定位则以浏览器为准定位，而且绝对定位不再占有原先的位置。

    /*父级无定位*/
<head>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	.nav1 {
		margin: 50px auto;
		
		width: 100px;
		height: 100px;
		background-color: #af81ff;
	}
	.nav2 {
		position: absolute;
		top: 0px;
		
		width: 50px;
		height: 50px;
		background-color: #fff9d4;
	}
	</style>
</head>
<body>
	<div class="nav1">
		<div class="nav2"></div>
	</div>
</body>

    在这里插入图片描述

    /*父级有定位*/
<head>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	.nav1 {
		margin: 50px auto;
		position: relative;/*给父级加定位*/
		
		width: 100px;
		height: 100px;
		background-color: #af81ff;
	}
	.nav2 {
		position: absolute;
		top: 0px;
		
		width: 50px;
		height: 50px;
		background-color: #fff9d4;
	}
	</style>
</head>
<body>
	<div class="nav1">
		<div class="nav2"></div>
	</div>
</body>

    在这里插入图片描述

  • 子绝父相

    1. 子级绝对定位，不占位置，可以放到父盒子任意位置，不影响其他兄弟盒子。
    2. 父盒子需要添加定位来约束绝对定位的子盒子。
    3. 父盒子布局需要占位置，因此父级只能是相对定位
      注意：因为父级需要占有位置，所以使用相对定位，子盒子不需要占有位置，所以使用绝对定位。（并非绝对）

  • 固定定位 - position: fixed

    1. 固定定位是元素固定于浏览器可视区域，滚动条滚动时元素位置也不会改变。
    2. 固定定位不占有原来的位置。
    3. 和父元素没有任何关系
    <head>
	<style type="text/css">
		div {
			position: fixed;/* 固定定位 */
			top: 50px;
			left: 50px;
			
			width: 200px;
			height: 200px;
			background-color: #77d7ff;
		}
	</style>
</head>
<body>
	<div></div>
	
	<p>585*/你1</p>
	<p>585*/你2</p>
	<p>585*/你3</p>
	......
</body>

    在这里插入图片描述

  • 粘性定位 - position: sticky
    粘性定位会固定于浏览器可视窗口，但元素保留标准流中位置。当标准流位置与粘性定位不冲突时会保持标准流位置，冲突则执行粘性定位。

    1. 元素原始位置会保留
    2. 以浏览器可视窗口为参照固定
    3. top、bottom、left、right设置至少一个才有效
    <head>
	<style type="text/css">
		.head {
			position: sticky;/* 设置粘性定位 */
			top: 0px;
			
			width: 800px;
			height: 40px;
			background-color: #87fff5;
			margin: 20px auto;
		}
		
	</style>
</head>
<body>
	<div class="head"></div>
	<p>你好1</p>
	<p>你好2</p>
	<p>你好3</p>
	......
</body>

    在这里插入图片描述

  • 定位叠放顺序
    定位的叠放顺序可以通过 z-index: 整数; 属性来设置。数值相同根据书写顺序后来者居上。

    <head>
	<style type="text/css">
		.nav1 {
			position: absolute;
			z-index: 1; /*设置叠放顺序，默认auto=0*/
			
			width: 100px;
			height: 100px;
			background-color: #72c2ff;
		}
		.nav2 {
			position: absolute;
			top: 20px;
			left: 20px;
			
			width: 100px;
			height: 100px;
			background-color: #99ff59;
		}
		
	</style>
</head>
<body>
	<div class="nav1">1</div>
	<div class="nav2">2</div>
</body>

    在这里插入图片描述
    注意：只有定位的盒子才有 z-index 属性。

定位拓展

  • 绝对定位的盒子水平垂直居中

    <head>
	<style type="text/css">
		.nav1 {
			position: absolute;
			left: 50%;
			margin-left: -50px;
			top: 50%;
			margin-top: -50px;
			
			
			width: 100px;
			height: 100px;
			background-color: #72c2ff;
		}
	</style>
</head>
<body>
	<div class="nav1">1</div>
</body>

  • 定位特殊特性
    元素绝对定位和固定定位后具有行内块特性：

    1. 行内元素添加绝对定位或者固定定位，可以直接设置宽高。
    2. 块级元素添加绝对定位或者固定定位，不给定宽高，默认是内容大小。

  • 浮动与定位
    1.脱标的盒子（浮动元素、绝对/固定定位）不会触发外边距合并问题。
    2.绝对/固定定位会完全压住盒子所有内容，但浮动只会压住下面标准流的盒子并不会压住盒子中的文字(图片)。

显示与隐藏

  • display属性设置元素如何显示

    • display: none; 隐藏对象
    • display: block; 设为快元素，显示元素
    • display隐藏元素后不占有原来的位置
    <head>
	<style type="text/css">
		div {
			display: none;/* 隐藏 */
			
			width: 100px;
			height: 100px;
			background-color: #69ffa5;
		}
	</style>
</head>
<body>
	<div></div>
</body>

  • visibility 可见性

    • visibility: hidden; 元素隐藏
    • visibility: visible; 元素可见
    • visibility隐藏后保留原来的位置，display隐藏后不保留原来位置
    <head>
	<style type="text/css">

		div {
			visibility: hidden;/* 隐藏 */
			visibility: visible;/* 可见 */
			
			width: 100px;
			height: 100px;
			background-color: #7d79ff;
		}
		p {
			background-color: #69FFA5;
		}
	</style>
</head>
<body>
	<div></div>
	<p>123</p>
</body>

  • overflow 溢出

    • overflow: visible; 溢出部分显示
    • overflow: hidden; 溢出部分隐藏
    • overflow: scroll; 溢出不溢出均有滚动条
    • overflow: auto; 滚动条视内容是否溢出而出现
    <head>
	<style type="text/css">
		p {
			
			/* overflow: visible; 显示溢出部分 */   
			/* overflow: hidden;  隐藏溢出部分*/
			/* overflow: scroll; 隐藏溢出部分并显示滚动条 */
			/* overflow: auto; 隐藏溢出部分，根据内容多少显示滚动条 */
			
			
			width: 50px;
			height: 50px;
			background-color: #b0c9ff;
		}
	</style>
</head>
<body>
	<p>你好程序员你好程序员你好程序员你好程序员你好程序员你好程序员
	你好程序员你好程序员你好程序员你好程序员你好程序员你好程序员你好程序员
	你好程序员你好程序员你好程序员你好程序员你好程序员你好程序员你好程序员</p>
</body>
zxl2029
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css层叠样式表——css基础介绍
Xiaohuang的博客
12-08 501
css笔记学习第一天
CSS层叠样式表
10-15
分享的是来自麦子学院网课，关于CSS层叠样式表的知识结构图，用的思维导图工具是xmind，一款免费的思维导图工具
CSS 层叠样式表
qq_64227183的博客
12-19 151
css层叠样式表
CSS--层叠样式表
weixin_45398401的博客
08-23 1029
注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）
CSS层叠样式表-选择器
QLqrr的博客
05-21 944
一、css层叠样式表的三种形式 1.行内样式表 2.内部样式表 3.外部样式表 二、CSS选择器 1.标签选择器 例： <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
CSS-层叠样式表
rihjyy的博客
02-08 1129
CSS-层叠样式表 1.作用： 可以让页面看起来更加美观，格式更加有条理。 2.简介 CSS是层叠样式表(Cascading Style Sheets) 的简称，有时我们也会称之为CSS样式表或级联样式表。 CSS也是一门标记语言。 CSS主要用于设置HTML页面中的文本内容(字体、大小、对其方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 CSS让我们的页面更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。 3.CSS语法规范
CSS层叠样式表--三大特性
QLqrr的博客
05-27 706
一、继承性 有些属性，如果父元素中已经设置过，其子元素无需重新设置。（可以节省代码） ★★★继承性失效的情况 1.继承的优先级没有浏览器的默认样式高。 二、层叠性 1.多个选择器可以同时作用于同一个标签，效果叠加。 例： <style> p{ color:red; } .fs14{ font-size:14px; } #para{ text-decoration:underline; } </style> <p id="para" class
4.CSS层叠样式表一
sss_white的博客
08-14 785
CSS层叠样式表 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS：美化网页，布局页面 1.HTML的局限性 HTML主要做结构，显示网页元素内容 2.CSS-网页的美化 层叠样式表（Cascading Style Sheets）简称CSS，有时称CSS样式表、级联样式表 CSS是一种标记语言 CSS用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高
CSS层叠样式表之选择器
L201122y的博客
03-20 604
CSS层叠样式表之选择器
CSS(层叠样式表）
weixin_48494427的博客
03-02 531
CSS(style样式和选择器)
CSS层叠样式表的层叠是什么意思(自我理解)
09-25
CSS层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。层叠的概念是CSS的核心特性之一，它涉及到样式表中的继承、权重和覆盖规则，帮助开发者有效地管理和...
5日精通CSS层叠样式表
07-22
资源名称：5日精通CSS层叠样式表内容简介：每天任务量详尽，按本教程，包你5天精通CSS5日精通CSS层叠样式表第1日·1.1 第1日 ·1.2 样式表能为我们做什么？·1.5 分类及其它技巧·1.6 串接·1.7 关于浏览器的坏消息 ...
CSS 层叠样式表命名参考表
09-25
CSS 层叠样式表命名参考，这样的命名更正规，搜索引擎与用户也习惯。
基于OpenCV的人脸模型训练
最新发布
06-23
开发环境PyCharm Community Edition
非道路移动机械信息采集汇总表.docx
06-23
非道路移动机械信息采集汇总表.docx
aardio的详解.zip
06-23
aardio
100款古风PPT (13)(1).pptx
06-23
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
基于稀疏表示求解的人脸识别
06-23
项目使用了matlab的2020b版本实现了该算法。具体的程序文件组织方式请参照src文件夹下的README.txt文件。程序的图片预处理部分用到了Image Processing Toolbox工具箱，稀疏求解部分用到了Optimization Toolbox工具箱。
html css层叠样表
04-17
以下是关于CSS层叠样式表的一些重要概念： 1. 选择器：CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器、类选择器、ID选择器等。 2. 样式规则：样式规则由选择器和一组属性-值对组成。属性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值