各种布局问题

发表于 | 分类于 | 阅读次数
undefined

今天，感谢曲哥给我开小灶，恶补了一波css的基础知识。

行内元素和块级元素

块级元素： 霸道地独占一行
行内元素： 和别人同处一室
行内块级元素： 有块级元素的身子，但是却不霸道，和别人一起和谐相处。

水平句中布局

margin: 0 auto;

行内元素水平居中布局

给它的父级设置text-align:center;

给定宽高的垂直布局

1
2
3
4
5
6
7
8
9
10
11
div{
  position:absolute;
  left:50%;
  top:50%;
  // 兼容性问题
  transform:translateX(-50%);
  // 使用flex也有兼容性问题
  //使用下面方法没有兼容性
  margin-top:-50%;
  margin-left:-50%;
}

行内元素垂直居中布局

在行内元素不能设置宽度高度的情况下使用

1
2
3
span{
  padding: 5% 0; // 利用padding撑开，同时造成视觉居中的效果
}

田字布局

1
2
3
4
5
6
7
8
9
ul{
  width: 200px;
  height: 200px;
}
li{
  float: left;
  width: 50%;
  height: 50%;
}

当ul标签崩塌时

设置overflow:hidden。没有宽高的ul标签，浏览器会自动补足，撑起ul。

有间隔的标准田字布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ul{
  width:100px;
  height:100px;
  box-sizing:border-box;//关键元素
  overflow:hidden;//防止ul崩塌
  border: 1px solid #000;
  //也可以设置padding ，上下元素左右元素的距离
  padding: 1% 1%;
}
li{
  background: #fff;
  box-sizing: border-box;
  width:50%;
  height:50%;
  float:left;
  border:1px solid #000;//boder不影响布局
  //也可以利用padding，计算出每个元素需要的间隔距离
}

我自己想的，利用outline属性

1
2
3
4
5
6
7
8
9
10
11
12
ul{
  width:200px;
  height:200px;
  overflow:hidden;
  outline:6px solid #000;
}
li{
  width:50%;
  height:50%;
  float: left;
  outline: 6px solid #000;
}

不知道有没内容漏了。。。因为开小灶的时候也没带着纸笔。都是一个一个问题解决走过来的。。。可能漏了某些关键知识点，希望漏掉的那些以后遇到能想起来吧