CSS的一些浅见

左右布局

块级元素的文档流是从上往下的,一个元素会直接占据一行。
我们一般会使用float属性来实现左右布局。

左中右布局

使用position属性,代码如下,对子元素使用绝对定位,父元素相对定位,来达到我们的目的。

<body>
    <div class="big">
        <div class="small"></div>
        <div class="small" style="left: 150px;"></div>
        <div class="small" style="left: 300px;"></div>
    </div>
</body>
 <style>
   .big{
       position: relative;
        }
   .small{
       height: 100px;
       width: 100px;
       border: 1px solid red;
       position: absolute;
        }
</style>
效果图

水平居中

1、块级元素在页面中水平居中一般使用margin属性,左右外边距设置为auto;
2、或者也可以使用text-align: center;属性
3、内联元素水平居中可以帮其父元素设置相同的左右内边距;

垂直居中

常用的话还是帮父元素设置相同的上下内边距,或者使用vertical-align: center;属性。

先写到这

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,346评论 2 66
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,512评论 0 5
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,634评论 0 6
  • 说起我的家乡,你们可能并不知道它的名字。它就是一个海滨小县城——惠安。 提起惠安,你首先想到的应该是闻名全国的惠安...
    雨后的海边阅读 252评论 1 1