CSS第二部分——网页布局三大核心

最新推荐文章于 2023-02-04 21:03:28 发布
最新推荐文章于 2023-02-04 21:03:28 发布
阅读量1.2k 收藏 4
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c283933/article/details/124329336
版权

一、盒子模型

css盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边框、内边框和实际内容。

1.边框（border）

语法：border：border-width（定义边框粗细，单位是px） border-style（边框的样式） border-color（边框样式）；
（复合写法也是这样的，没有顺序区别，一般是这个顺序，注意英文的标点符号）
例：border:1px solid red;

border-style：none（无边框） || solid（实线边框） || double（双线边框）
（以上仅三种常用边框，具体可去css查阅）
边框的四个边框可以分开设置属性：border-top，border-bottom，border-left，border-right
（然后可以得到一个华丽呼哨的边框）
相邻单元格的边框不会重合，只会并在一起（边框会影响盒子大小，边框会额外增加盒子大小），所以需要合并单元格的边框：border-collaspse:colapse;

<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			background-color: blue;
			border-top: 2px none black;
			border-bottom: 5px solid black;
			border-left: 10px double pink;
			border-right: 20px solid pink;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
		}
	</style>
</head>
<body>
	<div class="red"></div>
	<div class="green"></div>
</body>
</html>

效果图：
在这里插入图片描述

2.内边距（padding）

内边距：盒子内容与边框的距离。

语法：padding：像素；

（如果给盒子设置了宽高，内边距会额外增加盒子大小；如果没有给盒子设置宽高，内边距对盒子没有影响）
可以分为上下左右四个内边距：padding-top，padding-bottom，padding-left，padding-right。
padding后面的像素可以放1-4个像素值。
如：

padding: 5px;（上下左右内边距都是5px）
padding: 5px 10px;（上下内边距5px，左右内边距10px）
padding: 5px 10px 20px;（上内边距5px，左右内边距10px，下内边距20px）
padding: 5px 10px 20px 30px;（上5px，右10px，下20px，上30px，顺时针）

<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			color: beige;
			background-color: blue;
			padding: 5px 10px 20px 30px;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
		}
	</style>
</head>
<body>
	<div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：
在这里插入图片描述

3.外边距（margin）

外边距：用于设置盒子和盒子之间的距离。

语法：margin：像素；

可以分为上下左右四个外边距：margin-top，margin-bottom，margin-left，margin-right。
margin后面的像素也可以放1-4个像素值。
语法和padding一样。

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  • 盒子必须指定了宽度
  • 盒子左右的外边距都设置为auto，一般是margin: 0 auto;

（注意：以上是让块元素水平居中，如果要让行内元素和行内块元素水平居中，给其父元素添加text-align:center;即可）

<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			color: beige;
			background-color: blue;
			margin: 5px 10px 20px 30px;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
		}
		.blue {
			width: 250px;
			height: 250px;
			background-color: cadetblue;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="blue">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：
在这里插入图片描述
示意图：
在这里插入图片描述

·外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，两个外边距不会取两值的和，会取两个值中的最大值。
解决方案：尽量只给其中一个盒子加margin值。

2）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距时，父元素会塌陷较大的外边距值，而子元素表现相对父元素不变。
解决方案：

  • 可以为父元素定义上边框
  • 可以为父元素定义上内边距
  • 可以为父元素添加overflow:hidden

·清除内外边距

*{
	margin: 0;
	padding: 0;
}

一般这个作为css的第一句话，因为清楚了更方便设置样式
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（设置了也没有上下外边距）。但是转换为块级和行内元素就可以了。

4.圆角边框

语法：border-radius：length（圆角圆的半径）；

radius半径原理：圆与边框的交集形成的圆角效果。

  • 如果想得到一个圆形的盒子可以使属性值=一半的正方形边长或者border-radius:50%。
  • 如果想得到一个圆角矩形的盒子可以使属性值=一半的长方形的宽。

盒子的四个角可以分别设置，如：

  • 将四个角合并写border-radius: 10px 20px 30px 40px;（顺时针，分别是左上，右上，右下，左下）
  • 将四个角分开写border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-right-radius
<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			color: yellow;
			background-color: blue;
			border-radius: 125px;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
			border-radius: 10px 20px 40px 80px;
		}
		.blue {
			width: 250px;
			height: 250px;
			background-color: cadetblue;
		}
	</style>
</head>
<body>
	<div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="blue">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：
在这里插入图片描述

5.盒子阴影

语法：box-shadow：h-shadow（水平阴影的位置，允许负数） v-shadow（垂直阴影的位置，允许负数） blur（模糊距离，数越大越模糊） spread（阴影的尺寸） color（阴影的颜色） inset（将外部阴影（outset）改为内部阴影，默认外部阴影，在写的时候不能写outset，只在需要转换为内部阴影的时候写）

h-shadow和v-shadow是必须要写的两个值，其他都是可以不写的值。
盒子阴影不占用空间，不会影响盒子的排列。

/!--如果盒子没有阴影，经过的时候有阴影--/
div:hover {
	box-shadow:10px 10px;
}

<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			color: yellow;
			background-color: blue;
			margin-bottom: 100px;
			box-shadow: 25px 40px 20px grey;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
		}
	</style>
</head>
<body>
	<div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：
在这里插入图片描述

6.文字阴影

语法：text-shadow：h-shadow（水平阴影的位置，允许负数） v-shadow（垂直阴影的位置，允许负数） blur（模糊距离，数越大越模糊） color（阴影的颜色）

h-shadow和v-shadow是必须要写的两个值，其他都是可以不写的值。

二、浮动

CSS提供了三种传统布局：标准流，浮动和定位

1.标准流

标准流：又叫普通流或文档流，指的是标签按照规定好的默认方式排列，是最基本的网页布局方式

1.块级元素会独占一行，从上向下顺序排列

  • 常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

  • 常用元素：span、a、i、em等

2.浮动

浮动语法和特点

浮动可以改变元素默认的排列方式
浮动最典型的应用可以让多个块级元素一行内排列显示，且中间的间隙可以改变（如果只是将块级元素改为行内块元素，中间的间隙是无法更改的）
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：float：none（元素不浮动）|| left（元素向左浮动）|| right（元素向右浮动）；

  • 浮动元素会脱离标准流（俗称脱标）
  • 浮动元素会一行内显示并且元素顶部对齐
  • 浮动元素会具有行内块元素的特性

设置了浮动（float）的元素最重要特性：

  • 脱离标准流的控制移动到指定位置（脱标）
  • 浮动的盒子不再保留原先的位置

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			color: yellow;
			background-color: blue;
			float: left;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
			float: right;
		}
	</style>
</head>
<body>
	<div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：
在这里插入图片描述

浮动元素经常和标准流父级搭配使用

  • 为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。（浮动和标准流的父盒子搭配）
  • 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟盒子也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
  • 一般不给浮动盒子底下的标准流盒子设置高度，子盒子会将父盒子扩大。

清除浮动

  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：clear：left（不允许左侧有浮动元素，清除左侧浮动的影响）|| right（不允许右侧有浮动元素，清除右侧浮动的影响）|| both（同时清除左右两侧浮动的影响，常用）

清除浮动的策略是：闭合浮动
清除浮动的方法有四种：

1.额外标签法

额外标签法也成为隔墙法。
在浮动元素末尾添加一个空的标签，例如< div style=“clear:both” >< /div >，或者其他标签（如< br/ >等）

  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素，比如< span >就不能用

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分
3.父级添加after伪属性

给父元素添加类，父元素< div class=“clearfix” >< /div >

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
/*IE6、7专有*/
	*zoom: 1;
}
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器
4.父级添加双伪元素

给父元素添加类，父元素< div class=“clearfix” >< /div >

.clearfix:before,
clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
/*IE6、7专有*/
	*zoom: 1;
}
  • 优点：代码更简洁；
  • 缺点：照顾低版本浏览器；
清除浮动总结

清除浮动的原因：

  • 父级没有高度
  • 子盒子浮动了
  • 影响下面布局了，我们就应该清除浮动了
浮动清除的方式优点缺点
额外标签法通俗易懂，书写方便添加许多无意义的标签，结构化较差
父级overflow:hidden书写简单溢出隐藏
父级after伪元素结构语义化正确由于IE6、7不支持:after，兼容性问题
父级双伪元素结构语义化正确由于IE6、7不支持:after，兼容性问题

三、定位（position）

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

语法：position：static（静态定位）|| relative（相对定位）|| absolute（绝对定位）|| fixed（固定定位）|| sticky（粘性定位）；

1.静态定位（static）

语法：position：static；

静态定位是元素的默认定位方式，无定位的意思。

  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

2.相对定位（relative）*

语法：position：relative；

相对定位是元素在移动位置的时候，是相对于它原来的位置说的。

  • 它是相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置）。
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			color: yellow;
			background-color: blue;
			position: relative;
			left: 50px;
			top: 50px;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
		}
	</style>
</head>
<body>
	<div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
	<div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：
在这里插入图片描述

3.绝对定位（absolute）*

语法：position：absolute；

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动的元素
  • 绝对定位不再占有原先的位置

子绝父相的由来

子级用绝对定位的时候，父级要用相对定位

  • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
  • 父盒子需要加定位限制子盒子在父盒子内显示。
  • 父盒子布局时，需要占有位置，因此父元素只能时相对定位

相对定位经常用来作为绝对定位的父级

<html>
<head>
	<style>
		.red {
			width: 500px;
			height: 500px;
			color: yellow;
			background-color: blue;
			margin: 0 auto;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
			position: absolute;
			left: 50px;
			top: 50px;
		}
		.blue {
			width: 750px;
			height: 750px;
			background-color: cadetblue;
			position: relative;
		}
	</style>
</head>
<div>
	<div class="blue">
		<div class="red">
			<div class="green">
			</div>
		</div>
	</div>
</body>
</html>

效果图：
在这里插入图片描述

4.固定定位（fixed）*

语法：position：fixed；

固定定位时元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

  • 以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。
  • 固定定位不再占有原先的位置，固定定位也是脱标的，可以看作是一种绝对的特殊定位。

固定定位小技巧：固定在版心右侧位置

1.让固定定位的盒子left:50%。
2.然后让固定定位的盒子margin-left:版心宽度的一半距离。

<html>
<head>
	<style>
		.red {
			width: 250px;
			height: 250px;
			background-color: blue;
			position: fixed;
			right: 50%;
			margin-right: -125px;
		}
		.green {
			width: 250px;
			height: 250px;
			background-color: cyan;
			position: fixed;
			left: 0;
			top: 200px;
		}
	</style>
</head>
<body>
		<div class="red">
		</div>
		<div class="green">
		</div>
</body>
</html>

效果图：无论浏览器框放大或缩小，盒子所在位置相对于浏览器都不变
在这里插入图片描述
在这里插入图片描述

5.粘性定位（sticky）

语法：position：sticky；top：10px；

粘性定位可以被认为是相对定位和固定定位的混合

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  • 粘性定位占有原先的位置（相对定位的特点）
  • 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持

6.定位总结

定位模式是否脱标移动位置是否常用
static静态定位否不能使用边偏移很少
relative相对定位否（占有位置）相对于自身位置移动常用
absolute绝对定位是（不占有位置）带有定位的父级常用
fixed固定定位是（不占有位置）浏览器可视区常用
sticky粘性定位否（占有位置）浏览器可视区当前阶段很少

7.定位叠放次序（z-index）

语法：z-index：1；

在使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后顺序（z轴）

  • 数据可以时正整数、负整数或0，默认时auto，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有z-index属性

8.定位的拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下方式实现居中
1.left:50%; 让盒子的左侧移动到父级元素的水平中心位置；
2.margin-left:-盒子宽度的一半;让盒子向左移动自身宽度的一半；

如果一个盒子既有left属性和right属性，则会默认执行left属性，同理，top和bottom属性中，默认执行top属性。

2.定位特殊特性

绝对定位和固定定位也和浮动类似‘

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
  • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小时内容的大小。

3.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

4.绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流的所有内容

网页布局三种方式总结

1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点时有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

紫蝶恋可
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于padding和margin
qq_42500175的博客
03-31 776
1.padding（内边距）   padding即内容与边框的距离   padding会影响实际上盒子的大小，下面的实例会体现出这一点         padding简写属性： padding：5px； 上下左右内边距都是5px 这有一个高度是100px，宽度为100px的盒子。上下左右内边距都是5px，此时盒子的宽度应该是110px，高度为110px； 2. padding：5px 10px；上下内边距是5px，左右内边距是10px 3
CSS网页布局入门教程9：用CSS设计网站导航——横向导航
10-30
CSS网页布局入门教程9：用CSS设计网站导航——横向导航 本教程为CSS网页布局入门教程的第九篇，主要讲解如何使用CSS设计网站导航，特别是横向导航。网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便...
CSS核心内容
李黎敏 ——为优秀j2ee架构师而努力
02-21 989
CSS核心内容：标准流、盒子模型、浮动、定位。 在学习CSS核心内容之前，需要先明白两个基本的概念，HTML标签分为两种形式：块级元素、行内元素。 行内元素：   块级元素：  两者都是表示容器，并没有具体的表现样式。 区别：一个块级元素占满一行，行内元素在一行中填充。 可以通过CSS将行内元素转换为块级元素。方法是通过display关键字实现。 在HTML中添加一个行级元素：（
CSS-综合样式属性，边框样式属性的用法详解
weixin_44486539的博客
10-02 3104
border 样式属性用于设置元素的边框，属于综合属性，可以单独设置边框的某一类样式也可以进行综合设置 边框的样式组成： border-width 设置边框粗细；常用的属性值为像素（px） border-style 设置边框线型 属性值 描述 solid 实线 dashed 虚线 dotted 点状线 border-color 设置边框颜色；属性值可以是 颜...
CSS的四个核心概念
Cherie
01-31 2038
CSS（Cascading Style Sheet）层叠样式表，又称级联样式表，是一组格式设置规则，用来进行网页风格设计。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练
【前端三剑客二】 CSS
澄白易的博客
05-05 2287
1. 什么是 CSS 层叠样式表 (Cascading Style Sheets)。 CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果。 能够做到页面的样式和结构分离。 两张图说明CSS的作用： CSS就好比化妆，能让人（页面）好看的连麻麻都认不出来！ 2. 基本语法规范 <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> 选择器：要修饰的对象（东西） 属性名：修饰对象的哪一个属
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
DIV+CSS教程——第三天二列和三列布局借鉴.pdf
12-10
【标题】和【描述】提及的是一个关于使用`DIV+CSS`进行网页布局的教程，主要涵盖二列和三列布局的学习。以下是相关知识点的详细解释： 1. **二列自适应宽度**： - 在这种布局中，通常左侧列（如`side`）的宽度是...
CSS网页布局入门教程3：一列固定宽度居中
10-30
CSS网页布局入门教程3：一列固定宽度居中 在本教程中，我们将学习如何使用CSS实现一列固定宽度的网页布局，并将其居中显示。在传统的表格布局中，我们通常使用表格的align="center"属性来实现居中，但是这种方法...
html+css基础学习入门教程标记语言——网页应用CSS样式
01-08
第二种方法是外部样式表（方法B），通过`<link>`标签引用一个独立的CSS文件： ```html <!DOCTYPE ...
padding属性的书写格式
ASP和PHP工作经验
10-19 1894
padding属性的书写格式总共有以下4种： padding:10px; 意思是上下左右值全是10px padding:5px 10px; 意思是上下为5px，左右为10px padding:1px 2px 3px 4px; 这个写法意思是：上为1px，右为2px，下为3px，左为4px padding:5px 10px 7px; 这种写法意思是：上为5px，左右为10px，下为7px
CSS入门基础----盒子模型
bjsyc123456的博客
10-05 723
什么是盒子模型？ 所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子， 也就是一个盛装内容的容器。 盒子模型的特点： 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。 盒子里面的文字和图片等元素是 内容区域 盒子的厚度 我们成为 盒子的边框 盒子内容与边框的距离是内边距（类似单元格的 cellpadding) 盒子与盒子之间的距离是外边距（类似单元格的 cellspacing） 图解： 边框 border 边框.
学习笔记记录之CSS（三）
最新发布
Mini_ymy的博客
02-04 153
漫漫前端自学路-自学笔记记录
前端学习笔记：盒子模型内边距padding复合属性
weixin_43339892的博客
08-20 427
值的个数 表达意思 padding：5px; 1个值，代表上下左右都有5像素内边距 padding：5px 10px; 2个值，代表上下内边距是5像素，左右内边距是10像素 padding：5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 padding：5px 10px 20px 30px; 4个值，代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距是30像素 顺时针 ...
CSS 最核心的几个概念
一起的荣耀
05-27 556
本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。 元素类型 HTML 的元素可以分为两种： 块级元素（block level element） 内联元素（inline element 有的人也叫它行内元素） 两者的区别在于
CSS基础
qq_51220629的博客
04-27 374
CSS装饰效果—垂直对齐方式、光标类型、边框圆角、 overflow溢出部分显示效果、元素本身隐藏等
html div 边框只显示右侧,CSS border边框一半或者部分可见的实现代码
weixin_30100299的博客
05-30 5389
1.使用伪类，让Border边框显示一半使用伪类，在元素前或后插入内容div {position: relative;width: 300px;height: 50px;background-color: #bbb;padding: 4px}div:before {content: "";position: absolute;left: 0;top: -2px;width: 50%;height:...
border-radius:50%及超过50%的表现形式
CSU_Zipple的博客
09-24 2836
border-radius:50%和100%的区别 50%与100%表现一样是因为当临角两个弧半径之和超过临接边的长度时，浏览器会按照两个半径的比例缩小至刚好等于临接边的长度。 比如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt...
CSS制作各种形状(矩形、圆形、三角形、多边形、五角星星、太极阴阳图......)
mossbaoo的博客
11-08 3611
  CSS能够制作各种形状。正方形和矩形很容易，因为它们是自然形状。添加宽度和高度，就可以获得所需的确切尺寸矩形。添加border-radius，就可以将这些矩形变成圆形和椭圆形。 我们还可以利用CSS中的::before和::after元素，添加到原始元素的形状，再通过巧妙地定位或者其它操作，就可以在CSS中使用单个HTML元素制作许多形状。   正方形 #square { ...
《Head First HTML与CSS》第二版——网页开发入门经典
在《Head First HTML and CSS》第二版中，作者Eric Freeman和Elisabeth Robson深入浅出地介绍了网页制作的核心概念。这本书不仅关注技术，还强调了网页设计的优雅与实用性，这对于在日益复杂的互联网环境中创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值