CSS居中

最新推荐文章于 2023-02-12 21:20:52 发布

weixin_34192732

最新推荐文章于 2023-02-12 21:20:52 发布

阅读量49

点赞数

原文链接：https://juejin.im/post/5b0a5ae7f265da0dbd7a632c

版权

引入css的四种方式:

内联style属性
style标签
外部文件 css link
@import url(./a.css);

实现并排效果

style="float: left;" 但是这样可能会出现BUG,在浮动元素的父标签写上class="clearfix"

css内写上

.clearfix::after{
    content: ``;
    display: block;
    clear: both;
}
复制代码

div高度

块级元素的高度由其内部文档流元素的高度总和决定

文档流：文档内元素的流动方向。内联元素从左往右流动，如果遇到阻碍(宽度不够)，则换行继续流动（如果一个英文单词很长那么它不会换行，使用word-break: break-all可使其换行）。块级元素每一个元素都占据一行，从上往下流动。如下图所示：

脱离文档流：

相对于当前页面定位position: fixed;但是会出现BUG，解决方法width: 100%然后出现另一个BUG，解决方法:增加一个div。
position: absolute然后在其祖先元素加position: relative;相对于ralative的元素定位。

最大宽度

max-width:当页面缩小时，会自动适应页面，比直接设置宽度好用。

居中

内联元素

在父元素写text-algin: center;即可可实现内联元素水平居中。
将内联元素行高设置line-height: ;与父元素高度相同即可实现内联元素垂直居中。

块级元素

设置块级元素margin: 0 auto;即可实现块级元素水平居中。
使用position可实现块级元素水平垂直居中。

html代码

<body>
    <div class="parent">parent
    <div class="child">child</div>
    </div>
</body>
复制代码

css代码

.parent{
    height: 200px;
    width: 200px;
    border: 1px solid red;
    position: relative;
}
div.child{
    height: 50px;
    width: 50px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
复制代码

3. flex居中

在父元素上写

  display: flex;
  justify-content: center;
  align-items: center;
复制代码

可实现子元素水平垂直居中

weixin_34192732

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫