CSS3常用方法

*星空梦想*

已于 2022-04-23 22:00:38 修改

阅读量271

点赞数

文章标签： css3

于 2022-04-23 10:47:12 首次发布

本文链接：https://blog.csdn.net/m0_55584065/article/details/124358929

版权

元素居中

1、text-align: center;

在没有浮动的情况下，将需要居中的元素设为行内元素(display: inline)或行内块元素(display: inline-block)，然后在父元素上加上属性text-align: center;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在父元素上加上属性text-align: center即可

2、margin: 0 auto;

居中的元素是块级元素，内联元素需加上属性display: block;且元素不浮动

3、偏移

.fu{
  width: 200px;
  height: 200px;
  position: relative;
  background-color: red;
}
.fu span{
  position: absolute;
  /* 以元素右上点为基准，将该点居中 */
  left: 50%;
  top: 50%;
  /* 以元素自身宽高为基准，左移并上移宽高的一半 */
  transform: translate(-50%, -50%);
}

居中效果
该方法在使用非常方便，但是兼容性一般，很多浏览器并不兼容该属性

4、弹性布局display: flex;

.fl{
  width: 200px;
  height: 200px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

设为flex布局以后，子元素的float、clear和vertical-align属性将失效
使用flex居中不需要知道元素本身宽高以及元素的属性

四种定位

1、相对定位：position:relative

保留原来位置，不脱离文档流，相对于原位置定位，经常与z-index属性进行层次分级

2、绝对定位：position:absolute

脱离文档流，是整个元素的左上角（含margin）相对于最近的、非static定位的父元素的padding外边界或者说border内边界定位的;如果没有非static定位的父元素，则相对于“浏览器可视窗口”定位（不是body也不是html元素，而是屏幕的可视区的左上角（不含工具条）），经常与z-index属性进行层次分级

3、固定定位：position:fixed

脱离文档流，是相对于“浏览器的可视窗口”来定位的而不是html也不是body也不是屏幕！经常与z-index属性进行层次分级

4、粘性定位：position:sticky

是css定位新增属性；可以说是（静态定位）static 和（固定定位）fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

5、默认值

(静态定位)position:static ，元素框正常生成的，top left bottom right这几个偏移属性还有z-index不会影响其静态定位的正常显示（默认情况下的定位，仅作了解，不会使用）
对于元素本身特性的影响：position:fixed和absolute(relative除外)，将使元素变为block元素，并脱离文档流

布局方法

1、table 表格布局
2、flex 布局 (弹性布局)
flex布局教程
3、float 浮动布局
float布局教程

left ：左浮动
right：右浮动

none：默认值，元素不浮动，并会显示在其文本中出现的位置

清除浮动的方法：
消除浮动元素对其他元素的影响
clear属性
    （1）left：在左侧不允许浮动
    （2）right：在右侧不允许浮动
    （3）both：在左、右两侧都不允许浮动元素
    （4）none：默认值，允许浮动元素出现在两侧

4、绝对定位布局 position: absolute
5、响应式布局
6、grid 网格布局：

值	描述
none	默认值。不定义行或列的尺寸。
grid-template-rows / grid-template-columns	规定列和行的尺寸。
grid-template-areas	规定使用命名项目的网格布局。
grid-template-rows / grid-auto-columns	规定行的尺寸（高度），以及列的自动尺寸。
grid-auto-rows / grid-template-columns	规定行的自动尺寸，并设置 grid-template-columns 属性。
grid-template-rows / grid-auto-flow grid-auto-columns	规定行的尺寸（高度），以及如何放置自动就位的项目，和列的自动尺寸。
grid-auto-flow grid-auto-rows / grid-template-columns	规定如何放置自动就位的项目，和行的自动尺寸，以及设置 grid-template-columns 属性。