CSS(display+盒子模型+绝对定位+相对定位)

最新推荐文章于 2024-03-04 09:25:34 发布

原创最新推荐文章于 2024-03-04 09:25:34 发布 · 547 阅读

0 ·

CC 4.0 BY-SA版权

东软专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS中的display属性，包括inline、block、inline-block及none的用法与特点，并探讨了如何利用这些属性进行精确布局。此外，还深入解析了CSS定位机制，包括普通流、浮动和绝对定位的概念及其应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS复习

`display`

1.inline  默认。将此元素显示为行内元素，元素会在一行内显示，超出屏幕宽度自动换行
		  不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。
		  同时text-align属性设置也无效，但是设置了line-height会让inline元素居中
		  
示例元素：span,b,i,a,u,sub,sup,strong,em

2.block  设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行。
		 即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。
		 
示例元素：div,h1-h6,ul,ol,dl,p

注：在设计的过程中有时需要设计一个div宽高都是整个屏幕，整个时候宽度很好设置，可是高度一般很难设置，因为页面一般都是可以滚动的，所以高度一般可变，所以这个时候可以使用一个小技巧，如下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="main"> 
  </div>
</body>
</html>

html{
  height: 100%;
}
body{
  height: 100%;
  padding: 0;
  margin:0;
}
.main{
  background: red;
  width: 100%;
  height: 100%;
}

基本原理：div继承的是父元素body的高度，body是继承html的高度，html是继承的浏览器屏幕的高度。

 3、inline-block 既具有block的宽高特性又具有inline的同行元素特性。 
 			     通过inline-block结合text-align: justify 还可以实现固定宽高的列表两端对齐布局
     
示例元素：input,button,img

4.none 此元素不会被显示

`盒子模型`

在这里插入图片描述

Margin(外边距)   - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

Margin、Border、Padding都是集合定义，宽度定义顺序是：上右下左

border边框扩展

`边框样式 border-style`

在这里插入图片描述

`边框宽度 border-width`

指定边框的宽度

`边框颜色 border-color`

指定边框颜色

`border集合声明顺序`

border-width
border-style (required)
border-color

`定位`

CSS 定位机制:

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。
但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
不过，设置行高可以增加这个框的高度。

设置定位的属性：position (父相子绝)

static（默认）
	元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
	
relative（相对定位）
	元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute（绝对定位）
	元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。
	元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed（对于视窗绝对定位）
	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

`几个和定位相关的属性`

top	             上偏移
right	         右偏移
bottom	         下偏移
left	         左偏移
vertical-align	 设置元素的垂直对齐方式
z-index	         设置元素的堆叠顺序。这个值越大，就越放在顶层