css布局方法

LMou 发布于2019-08-29 15:42 / 2726人阅读

摘要：在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。这样所有元素就会紧贴左边浮动，如果想要左右浮动，就可以把最右边的元素设置为这样就可以实现左右布局。谷歌搜索可以设置一个元素的渐变色，来使一个元素包含多种颜色。

1、左右布局

这就要说到一个属性float，使用float: left;就可以让浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。但是，子类使用float来使元素并排，那么父类就需要使用clearfix来防止子元素下方的标签浮动上来贴和。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

这样所有元素就会紧贴左边浮动，如果想要左右浮动，就可以把最右边的元素设置为float: right;这样就可以实现左右布局。

2、左中右布局

左中右布局，父元素有三个子元素，首先先把三个子元素浮动并排起来如左右布局一样，然后给后两个元素都设置一个margin左边距，父元素设置水平居中;就可以实现左中右布局


    所有
    框架
    原生 JS&CSS

li{
    float: left;
    margin-left: 40px;
}

ol {
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
}

3、水平居中

对于行内元素(inline)：text-align: center;

对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto

对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局

4、垂直居中

对于行内元素(inline)设置上下 pandding 相等；或者设置 line-height 和 height 相等

对于块级元素(block)，父元素需使用相对定位：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

5、其他小技巧

box-shadow可以给块设置阴影，看起来更立体，谷歌搜索css shadow generator可以自己调整样式。

transition: all 0.3s;动画属性，可以给所有变化加入过渡动画和过渡时间。

cursor: pointer;鼠标悬停时I型可以变成手指点击形状

border: 1px solid red; border边框可以用来调试标签的所占位置。

当设置display: inline-block; 需要加上vertical-align: top; 来去除底层多出的空间。

background-image: url(../img/girl.jpg); 设置背景图片background-position: center center;可以使背景图片垂直水平居中， background-size: cover;使背景图片可以按比例缩放。

谷歌搜索css linear-gradient generator可以设置一个元素的渐变色，来使一个元素包含多种颜色。

专线服务 idc机房托管 css布局 css布局教程学习css布局 div布局布局html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113495.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

neuSnail 2019-08-30 15:56 评论0 收藏0
CSS三栏布局的经典实现方法

摘要：经典方法三栏布局的方法有很多种，其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性，而是采用为中栏内容创建的方式，通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。三栏是CSS布局中常见的一种布局模式，顾名思义，就是将网页内容以三列的形式呈现。通常，三栏布局中的左栏和右栏是固定宽度的，中栏随着窗口宽度的变化而变化。本文探讨栏三...

Forelax 2019-08-02 14:31 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
CSS三栏布局的四种方法

摘要：浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效，也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解，但实际上理解了圣杯布局，双飞翼布局自然就理解了。前言总括：不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那...

RobinQu 2019-08-30 13:14 评论0 收藏0