最近学习了CSS的一些知识，下面总结一下我学到的CSS布局技巧
1.左右布局
(1). 浮动
左右布局也叫横向布局，常用的方法是：
在所有子元素上添加浮动float:left;或float:right;
在父元素上添加上类名 clearfix
例如做一个导航栏时，
HTML如下
<div class="wrap clearfix">
<div class="left"><a href="#">关于</a></div>
<div class="middle"><a href="#">技能</a></div>
<div class="right"><a href="#">作品</a></div>
</div>
css样式如下：
div.wrap {
margin: 0;
padding: 0;
margin-top: 3px;
}
div.wrap>div {
float: left;
margin: 0 17px;
}
clearfix类的css样式如下：
.clearfix::after {
content:'';
clear:both;
display:both;
}
最终效果：
image.png
(2) 绝对定位position : absolute;
在所有子元素上添加绝对定位position : absolute;
在父元素上添加上相对定位或绝对定位position : relative;或position : absolute;
同样是上面的例子
css样式如下：
div.wrap {
position: relative;
}
div.wrap>div {
position: absolute;
}
div.wrap>.left {
left:0;
top:0;
}
div.wrap>.right{
right:0;
top:0;
}
2.左中右布局
左中右布局可以根据情况使用左右布局中浮动和绝对定位两种方法，另外一种是BFC三栏布局：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
3.水平居中
(1). 对于行内元素, 可以给行内元素的父元素设置 text-align:center,即可实现行内元素水平居中
span.parent {
text-align:center;
}
(2). 对于定宽块级元素, 对该块级元素设置 margin:0 auto，前提是居中的块级元素宽度必须固定（定宽）
div{
width:100px;
margin:0 auto;
}
(3). 对于不定宽块级元素, 将该块级元素设置 行内块级元素（display: inline-block;），在对该元素的父级元素设置text-align:center；
div{
display: inline-block;
text-align:center;
}
(4). 对于浮动元素, 可以设置父元素宽度设置为fit-content（CSS3）,并且配合margin:0 auto;
.parent{
width:fit-content;
margin:0 auto;
}
(5). 使用绝对定位，以及transform属性（CSS3）, 子元素设置如下:
.parent {
position: relative;
}
.son{
position:absolute;
left:50%;
transform:translate(-50%,0);
}
4.垂直居中
(1). 对于单行文本, 则可设置 line-height 等于父元素高度
(2). 使用绝对定位，以及transform属性（CSS3）, 设置父元素相对定位(position:relative), 子元素如下css样式:
.parent {
position: relative;
}
.son{
position:absolute;
top:50%;
transform: translate(-50%,-50%);
}
(3). 对于不定宽块级元素, 将该块级元素设置 行内块级元素（display: inline-block;），利用伪元素和vertical-align: middle，样式如下：
.parent::after,
.son{
display:inline-block;
vertical-align:middle;
}
.parent::after{
content:'';
height:100%;
}
5.其他小技巧
(1). 元素脱离文档流的方法：
- position: fixed; 脱离文档流相对于窗口定位
这种方法会使宽度往内缩，宽度需要重新设置 - 绝对定位：position:absolute;
脱离文档流相对于祖先中第一个relative元素定位
(2). :nth-child() 伪类选择器
nth-child(odd)父元素下的奇数子元素
nth-child(even)父元素下的偶数子元素
(3). 一些小工具
- iconfont.cn 这个网站里有各种小图标可以用，搜索后选择合适的图标加入项目，可以自动生成代码
- generator 对于一些写起来较为复杂的CSS样式，例如linear-gradient或者box-shadow,可以直接搜索 linear-gradient generator 这个工具会提供图形化界面，操作非常方便，直接生成代码，复制过来就行了
- CSS Tricks 这个网站里面有很多大神的CSS作品例子，提供了源代码，可以直接在里面搜索相应的关键词，模仿学习
网友评论