摘要:在正常布局中位于该浮动元素之下的内容,此时会围绕着浮动元素,填满其右侧的空间。这样所有元素就会紧贴左边浮动,如果想要左右浮动,就可以把最右边的元素设置为这样就可以实现左右布局。谷歌搜索可以设置一个元素的渐变色,来使一个元素包含多种颜色。
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可以设置一个元素的渐变色,来使一个元素包含多种颜色。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113495.html
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:经典方法三栏布局的方法有很多种,其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性,而是采用为中栏内容创建的方式,通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式,顾名思义,就是将网页内容以三列的形式呈现。通常,三栏布局中的左栏和右栏是固定宽度的,中栏随着窗口宽度的变化而变化。本文探讨栏三...
摘要:经典方法三栏布局的方法有很多种,其中最经典的方法莫过于圣杯布局和双飞翼布局。而双飞翼布局方法无需相对位置属性,而是采用为中栏内容创建的方式,通过来实现布局。文章第二部分阐述了流行的圣杯布局方法和双飞翼布局方法的细节和异同。 三栏是CSS布局中常见的一种布局模式,顾名思义,就是将网页内容以三列的形式呈现。通常,三栏布局中的左栏和右栏是固定宽度的,中栏随着窗口宽度的变化而变化。本文探讨栏三...
摘要:浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效,也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解,但实际上理解了圣杯布局,双飞翼布局自然就理解了。 前言 总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那...
阅读 828·2019-08-30 15:55
阅读 1409·2019-08-30 13:55
阅读 1986·2019-08-29 17:13
阅读 2842·2019-08-29 15:42
阅读 1332·2019-08-26 14:04
阅读 1017·2019-08-26 13:31
阅读 3273·2019-08-26 11:34
阅读 830·2019-08-23 18:25