css总结(0)

最新推荐文章于 2022-04-29 10:45:43 发布

richard1230

最新推荐文章于 2022-04-29 10:45:43 发布

阅读量110

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/richard1230/article/details/84430635

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

如何做横向布局(左右布局)

1.如何做横向布局（float + clearfix）:
1).给所有子元素添加 style=“float: left;” （让字体横向）
2).所有子元素的爸爸都要添加clearfix类;
3)给.css上添加

.clearfix::after{
    content: '';
    dispaly: block;
    clear: both;
}

实例:
原来的式样:
在这里插入图片描述

一.给所有子元素添加style="float: left;"

在这里插入图片描述

发现上面果然变了:
在这里插入图片描述
如何把里面的小圆点干掉呢;
注:ul：全称:unordered list;
二.设置上面所有子元素的父元素为如下：

<ul  style="list-style: none;"  class="clearfix">

在这里插入图片描述
果然变了:

三.写一个类:（去除头像的bug）

在这里插入图片描述

clearfix是类名,after是伪类;(这里最好记忆一下！)
而后把类的名字写到所有浮动元素的爸爸身上;
所有子元素浮动他们的爸爸都要添加clearfix;（这里上面一步已经做了:）
前后对比：
在这里插入图片描述

事实上头像在下面：

在这里插入图片描述

左中右布局

float+margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #content{
            height:300px;
        }
        .left{
            width: 200px;
            height:100%;
            float: left;
            background-color: #00a0dc;
        }
        .middle{
            height:100%;
            margin-left:200px;
            margin-right: 300px;
            background-color: red;
        }
        .right{
            height:100%;
            width: 300px;
            float: right;
            background-color: #00a0dc;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>
</body>
</html>

注意：中间的middle元素是content的最后一个元素
效果：

在这里插入图片描述

2. float+absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #content{
            position: relative;
            width:100%;
            height:300px;
        }
        .left{
            float: left;
            width: 200px;
            height:100%;
            background-color: #00a0dc;
        }
        .middle{
            position: absolute;
            top:0;
            bottom:0;
            left:200px;
            right: 300px;
            background-color: red;
        }
        .right{
            float: right;
            height:100%;
            width: 300px;
            background-color: #00a0dc;
        }
    </style>
</head>
<body>
<div id="content">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>
</body>
</html>

在这里插入图片描述

更多详见张鑫旭老师博客

水平居中

1.margin: 0 auto

适用于块级元素(看第三个下面的示例)

2.text-align: center

适用于内联元素,inline-block元素，文字，使用方法是为目标的父元素添加该样式。（可使用包裹器技巧）

3.调整padding,margin

如不方便直接调整，可以使用包裹器包住元素，然后让包裹器代为调整
示例：

margin-left:auto;
margin-right:auto;

在这里插入图片描述

效果：
在这里插入图片描述

垂直居中

1.line-height=height

大多数情况下管用

示例:
在这里插入图片描述

2.调整padding,margin

如果不方便直接调整，可以使用包裹器包住元素，然后让包裹器代为调整

其他技巧

1.如何让内联元素产生位移：

内联元素margin与padding左右有效，上下无效，解决办法就是inline-block
在这里插入图片描述
实例：
上下标签对内联元素没有用：

添加了display:inline-block:
在这里插入图片描述

在这里插入图片描述

richard1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css总结(0)

文章目录如何做横向布局(左右布局)左中右布局水平居中垂直居中其他技巧如何做横向布局(左右布局)1.如何做横向布局（float + clearfix）:1).给所有子元素添加 style=“float: left;” （让字体横向）2).所有子元素的爸爸都要添加clearfix类;3)给.css上添加.clearfix::after{ content: ''; dispa...
复制链接

扫一扫