CSS居中

引入css的四种方式:

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

实现并排效果

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

css内写上

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

div高度

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

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

脱离文档流:

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

最大宽度

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

居中

  1. 内联元素
  • 在父元素写text-algin: center;即可可实现内联元素水平居中。
  • 将内联元素行高设置line-height: ;与父元素高度相同即可实现内联元素垂直居中。
  1. 块级元素
  • 设置块级元素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;
    复制代码

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

发布了155 篇原创文章 · 获赞 65 · 访问量 28万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览