06前端成长日记-常用CSS技巧

QT93
347 阅读7分钟

float浮动

元素如果要脱离正常文档流，可用float。但是浮动后父盒子是没有高度的这样会对后面的元素产生影响，所以要清除浮动

1、float: left 左浮动

html代码

<!--定义两个块元素box1，box2-->
<body class="clearfix">
  <div class="box1"></div>
  <div class="box2"></div>
</body>

CSS代码

/*清除浮动*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/*将box1，box2脱离文档流并向左浮动*/
.box1 {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  float: left;
}

结果

2、float: right 右浮动

html代码

<!--定义两个块元素box1，box2-->
<body class="clearfix">
  <div class="box1"></div>
  <div class="box2"></div>
</body>

CSS代码

/*清除浮动*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/*将box1，box2脱离文档流并分别左浮动和右浮动*/
.box1 {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  float: right;
}

结果

3、用float实现左中右布局

html代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box clearfix">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

CSS代码

/*清除浮动*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.box1 {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  float: left;
}

.box3 {
  width: 100px;
  height: 100px;
  background: green;
  float: left;
}

结果

定位

相对定位 position:relative

再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）

html 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>定位</title>
</head>
<body>
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

CSS 代码

.box1 {
  width: 100px;
  height: 100px;
  background: red;
}

/*给box2添加相对定位，上移动100px，右移100px*/
.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  left: 100px;
  top: -100px;
}

.box3 {
  width: 100px;
  height: 100px;
  background: green;
}

结果

绝对定位 position:absolute

绝对定位也会使元素脱离文档流。不为元素预留空间，基于父元素进行位移，会对影响其他元素的布局

注意：给元素添加相对定位，必须先给父元素添加相对定位

html 代码

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

CSS 代码

.box1 {
  width: 100px;
  height: 100px;
  background: red;
}

/*给box2添加绝对定位，右移动100px，顶对齐*/
.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 100px;
  top: 0;
}

.box3 {
  width: 100px;
  height: 100px;
  background: green;
}
box {
    position: relative;
}

结果

固定定位 position:fixed

固定定位也会使元素脱离文档流。不为元素预留空间，基于浏览器窗口进行位移，(ps:屏幕下面的那个透明的bar就是通过固定定位实现的)

注意：给元素添加相对定位，必须先给父元素添加相对定位

html 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box ">
    <div class="box1">我是固定定位</div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

CSS 代码

.box1 {
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  color: rgba(0,0,0,.3);
  bottom: 0;
  text-align: center;
  line-height: 50px;
}
.box2 {
  width: 100px;
  height: 100px;
  background: blue;
}
.box3 {
  width: 100px;
  height: 100px;
  background: green;
}

结果

我是固定定位

粘性定位 position:sticky

当页面滚到顶部时固定

div {
    position: sticky;
    top: 0;
}


### 用定位实现左中右布局
> html 代码

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box ">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>
</body>
</html>

CSS 代码

.box1 {
  width: 33.33%;
  height: 100px;
  background: red;
  position: absolute;
  top:0;
  left:0;
}
.box2 {
  width: 33.33%;
  height: 100px;
  background: blue;
  position: absolute;
  top:0;
  left:33.33%;
}
.box3 {
  width: 33.33%;
  height: 100px;
  background: green;
  position: absolute;
  top:0;
  right: 0;
}
.box {
  position: relative;
}

结果

垂直居中

字的上边和下边的间距是一样的

需求：背景高100px，让文字与背景垂直居中

使用 line-height 实现垂直居中

html 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="box">
    <p>我是一段文字</p>  
  </div>
</body>
</html>

CSS 代码

.box {
  width: 100%;
  height: 100px;
  background: red;
}
/*让文字和背景垂直居中*/
p {
  font-size: 20px;
  color: #fff;
  line-height: 100px;
}

结果

我是一段文案

使用内边距padding实现垂直居中

CSS 代码

p {
  font-size: 20px;
  color: #fff;
  background: #ccc;
  padding: 36px 0;
  display: block;
}

结果

我是一段文案

使用 margin: auto 0实现

*这种方式有缺点，需要定义高度和定位才能实现垂直居中

CSS 代码

.box {
  background: #ccc;
  height: 100px;
  position: relative;
}

p {
  font-size: 20px;
  color: #fff;
  /*margin:auto 只对块元素起作用，所以需要先将非块元素转换为块元素*/
  display: block;
  height: 34px;
  margin: auto 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

结果

我是一段文案

flex布局

CSS 代码

.box {
  background: #ccc;
  height: 100px;
  display: flex;
  align-items: center;
}

p {
  font-size: 20px;
  color: #fff;
}

结果

我是一段文案

水平居中

文字的左右两边的间距是一样的

需求：背景高100px，让文字与背景水平居中

text-align: center 实现水平居中

CSS 代码

.box {
  background: #ccc;
  height: 100px;
  text-align: center;
}

p {
  color: #fff;
  font-size: 20px;
  line-height: 100px;
}

结果

我是一段文案

margin: 0 auto 实现水平居中

*这种方式有一个缺点，如果宽不确定就无法实现水平居中

CSS 代码

.box {
  background: #ccc;
  height: 100px;
}
p {
  font-size: 20px;
  color: #fff;
  line-height: 100px;
  /*margin:auto 只对块元素起作用，所以需要先将非块元素转换为块元素*/
  display: block;
  /*默认的宽度是100%，所以必须自定义一个宽度*/
  width: 120px;
  margin: 0 auto;
}

结果

我是一段文案

flex 布局

CSS 代码

.box {
  background: #ccc;
  height: 100px;
  display: flex;
  align-items: center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}
p {
  font-size: 20px;
  color: #fff;
}

结果

我是一段文案

透明边框

默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，在css3中，我们可以通过设置background-clip:padding-box来改变背景的默认行为，达到我们想要的效果。

CSS 代码

.box {
    width: 100px;
    height: 100px;
    background: red;
    border: 30px solid #000;
    border-top: 30px solid rgba(0,0,0,0)
    background-clip: padding-box;
}

结果

多重边框

利用多个阴影可实现多重边框的效果

.box {
    width: 100px;
    height: 100px;
    background: red;
    box-shadow: 0 0 0 10px #333,
                0 0 0 20px #666,
                0 0 0 30px #999;
}

结果

outline-offset

内边框

.box {
    width: 100px;
    height: 100px;
    background: red;
    outline: 10px solid black;
    outline-offset: -30px;
    border: 10px solid black;
}

结果

加号效果

.box {
    width: 100px;
    height: 100px;
    background: red;
    outline: 10px solid black;
    outline-offset: -58px;
}

结果

avatar
文章
阅读
粉丝