展开

关键词

种方法实现CSS

本文会分别介绍CSS实现的方法,可在浏览器中打开查看效果1.方法一:自身浮动的方法实现方法:需要左向左浮动,右向右浮动,中间设左右margin来撑开距离 CSS实现1 body{ 右 中间 注意:该方法在html时,要把中间放在左、右后面,左和右的顺序不定实现的效果如下:1.png2.方法二:margin负值法实现方法:两边两宽度固定,中间宽度自适应,左、 右、中间向左浮动,左的margin-left设为-100%,中间的width设为100%,右的margin-left设为-右宽度 CSS实现2 body{ margin:0; padding 左 注意:该方法在html时,要把中间放在第一个此方法是实现圣杯和双飞翼的基础。 实现的效果如下:2.png3.方法:绝对定位法实现方法:左、右绝对定位,分别固定到页面左右两侧,中间不设宽度,用左右margin来撑开距离 CSS实现3 body{ margin:0;

2.4K641

CSS-响应式(左右固宽,中间自适应)的五种方法

个人logo 80x80 78 79 80 个人logo 80x80 81 82 83 个人logo 80x80 84 85 86 个人logo 80x80 87 88 89 90 91 92 93 第种方法 132 个人logo 80x80133 134 135 个人logo 80x80136 137 138 个人logo 80x80139 140 141 142 143 144 145 第4种方法--圣杯 【margin负边距】146 147 关键点148 149 结构上,中间盒模型在前面【重要】,左右两边的顺序随意,但最好是中,左,右的顺序来。 150 个模块外边都要加一个父元素-包裹用的div,这个父div的float:left;【个都有左浮动】151 中间盒模型margin-left、margin-right等于左右结构的宽度, 152 因为用了flex和用了table-cell感觉一样,高度会和父元素高度一致209 个盒子的父元素设置display:flex;210 中间盒子设置flex: 1;让他填充父元素剩下的地方.并根据需要设置边距和左右隔开

62430
  • 广告
    关闭

    50+款云产品免费体验

    提供包括云服务器,云数据库在内的50+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS() 模型

    模型在网页中,元素有模型:1、流动模型(Flow) 默认的2、浮动模型 (Float)3、层模型(Layer)1、流动模型(Flow) 流动(Flow)模型是默认的网页模式。 流动模型具有2个比较典型的特征:第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。 (内联元素可不像块状元素这么霸道独占一行)2、浮动模型 (Float)任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动div{float:left;}  div{float:right;} 可以为不同的div设置不同的浮动方式来。 绝对定位使元素脱离文档流,因此不占据空间 ,普通文档流中元素的就当绝对定位的元素不存在时一样,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

    48760

    实现

    实现在开发十分常见,即两边固定宽度,中间自适应宽度的。 Flex使用CSS3的flex实现,Flex也称弹性,可以为盒状模型提供最大的灵活性,是的首选方案,现已得到所有现代浏览器的支持,此处主要是利用flex容器成员默认按照主轴排列, 的calc可以动态计算中间部分的长度从而做到自适应,calc可以配合inline-block行内块级元素实现,注意使用行内块级元素的时候如果编写HTML时换行,这个空白的换行也会作为元素解析从而会产生空白间隙 渲染的一部分,是块盒子的过程发生的区域,也是浮动元素与其他元素交互的区域,是用于块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境,在这里利用BFC区域不会与浮动元素重叠的特性实现 ,实现

    8420

    . CSS layout(

    将页面中的所有元素都设置为了一个矩形的盒子,将元素设置为矩形的盒子后,对页面的就变成将不同的盒子摆放到不同的位置,每一个盒子都由一下几个部分组成: 内容区(content) 内容区(content) 0px; * margin: 100px; } .box2{ width: 220px; height: 220px; background-color: yellow } 2.4 盒子模型的水平方向 #bfa; margin-right: auto; margin-left: auto; * margin-left: 100px; margin-right: 400px * * 元素的水平方向的 border,垂直方向的border不会影响页面的行内元素可以设置margin,垂直方向的margin不会影响display 用来设置元素显示的类型 可选值: inline 将元素设置为行内元素 - 行内元素可以设置border,垂直方向的border不会影响页面的 - 行内元素可以设置margin,垂直方向的margin不会影响 * * width: 100px; height: 100px

    14440

    CSS常用实现04-

    简介应该是非常经典的一个,考虑下面这个问题,实现左中右列,其中左右两列宽度已知为200px,中间宽度自适应。该如何实现?2. 实现这里我直接上代码,代码里面有详细的注释。 有的同学会说,这里前面两个并不算标准的,因为列不等高。嗯,如果要求等高且高度已知的话,我们只要给列设置一个固定高度即可。 但如果高度未知又想实现等高,则只能用flex,grid和table。3. 拓展思考如果是上中下,该如何实现呢?还有,针对float的缺点,有没有什么改进呢?

    57920

    CSS BFC实现多自适应

    一、开篇之言要说web上实现两自适应的方法,一双手都数不过来。不知大家有没有细想过,为什么这些方法可以实现自适应呢? 本文就将深入探讨下流体特性和BFC特性下的两自适应,还是针对传统。一些现代,如弹性盒子模型(Flexbox Layout),格栅(Grid Layout)不在本文探讨之类。 于是,我们不仅可以实现两自适应效果,多自适应效果也不在话下。然而,利用块状元素流体特性实现的自适应有个不足,就是,我们需要知道浮动或绝对定位内容的尺寸。 此时,我们可以利用块状元素的BFC特定实现更强大更智能的多自适应(本文重点)。、元素的BFC特性与自适应1. 而纯流体,需要大小不确定的marginpadding等值撑开合适间距,无法CSS组件化。

    35240

    CSS 特征实例 - 导航、新闻列表、淘宝

    特征实例为了更好地迎战各种前端示例,下面针对下面的内容,手写各种html答案。1、特征:翻页(所需知识点:盒模型、内联元素)? 10px; } .menu li a:hover{ background-color: pink; color: #fff; } 上一页 1 2 3 4 …… 17 18 19 20 下一页 2、特征 :导航条01(所需知识点:盒模型、行内元素)? 这个导航实现的方式与上面的实现方式基本一致,居中采用还是使用内联块的子元素居中方式,其他里面的a则是可以使用margin扩展开来即可。实现效果:? : Microsoft YaHei; color: #333; padding: 0 20px; } 首页 | 网站建设 | 程序开发 | 网络营销 | 企业VI | 案例展示 | 联系我们 3、特征

    81761

    css - 工作中常见的两案例及分析

    结构 、类似九宫格的两列结构 四、图文两列     1、左图右文字非垂直居中,     2、左图,右固定行数的文字,右侧文字和左边图片垂直居中。      一、大结构上的导航和内容区域两首先我们从 大结构上 说起,因为我发现很多网站从整个首屏的大结构上都是这种两:旁边是侧边导航,中间是大块内容区域。 css代码:? 简陋效果:? 惊悚的是,我居然没有找到他的清除浮动。在哪~、类似九宫格的两列结构? github的实现方法是flex的两端对齐:? 完了欢迎去看我整理的九宫格的实现方法吧。虽然我整理的是一排列。但是两列也适用。四、图文两列1、左图右文字非垂直居中,以右侧内容撑开高度为自由高度。这种的我们省心,不用考虑垂直居中的问题。? (授人以渔 - 可以百度搜索“多行文本溢出显示省略号点点点...”)而至于两端见下边。五、左右两端下边画了处:? 这个嵌套结构你看出来了吗?

    73511

    五种方式实现

    在网页中,是一种常见的方式,尤其在 PC 端。如下图所示。? 从上到下由页头、内容和页脚组成,内容由左、中、右列组成,其中左右两列的宽度固定,中间一列自适应。 HTML 骨架如下: header left center right footer 浮动使用浮动需要把 HTML 骨架调整一下,将个 section 的顺序调整为: centerleftright right { width: 100px;}.center{ * 宽度是一个计算值,用父容器宽度,减去左右容器的宽度 * width: calc(100% - 200px);} 还有一种常见的使用浮动实现的 如果个容器的高度不一致,或者容器内的内容溢出,就会影响美观性。不推荐使用这种方式实现圣杯。弹性盒子使用弹性盒子很容易创建出圣杯。 解释一下上面的 css 代码。在 grid-template-columns 属性中设置了列的页面。行数是自适应的。列的左右两端都是 100px,中间是自适应,1fr 在这里会分配剩余的空间。

    16620

    CSS

    CSS种基本的定位机制:普通流,浮动和绝对定位。 绝对定位 相对定位可以看作特殊的普通流定位,元素位置是相对于他在普通流中位置发生变化,而绝对定位使元素的位置与文档流无关,也不占据文档流空间,普通流中的元素就像绝对定位元素不存在一样。 浮动首先介绍一些浮动模型的基本知识:浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。 > 可以看出浮动后虽然黄色div不受浮动影响,正常,但是文字部分却被挤到了紫色浮动div下边。 参考文档 CSS ——从display,position, float属性谈起.:

    16720

    CSS

    18030

    CSS

    #什么是 BFCBox:Box 是 CSS 的对象和基本单位,你可以理解一个页面就是由很多的 Box 组成的Formatting Context:即格式化上下文,它是存在页面中的一块独立的渲染区域。 这里的元素不会在上影响到外面的元素(比如浮动定位的元素等等)。 通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论怎样翻江倒海,都不会影响到外部。 不和浮动元素重叠在一个BFC中使用两个BFC可以做两列时使用#水平居中#空间居中Grid .container { display: grid; place-items: center;

    10620

    只要一行代码,实现五种 CSS 经典

    页面是样式开发的第一步,也是 CSS 最重要的功能之一。?常用的页面,其实就那么几个。下面我会介绍5个经典,只要掌握了它们,就能应对绝大多数常规页面。 一、空间居中空间居中指的是,不管容器的大小,项目总是占据中心点。?CSS 代码如下(CodePen 示例)。. 、两就是一个边,一个主。?下面的实现是,边始终存在,主根据设备宽度,变宽或者变窄。如果希望主自动换到下一行,可以参考上面的并列式。? 五、圣杯圣杯是最常用的,所以被比喻为圣杯。它将页面分成五个部分,除了页眉和页脚,内容区分成左边、主、右边。?这里的实现是,不管页面宽度,内容区始终分成。 如果宽度太窄,主和右边会看不到。如果想将这改成小屏幕自动堆叠,可以参考并列式。?HTML 代码如下。 CSS 代码如下(CodePen 示例)。.

    18220

    css - 两自适应的几种实现方法汇总

    、margin负边距 - 圣杯这种写法很特别,我甚至还没研究透他的原理。是从慕课网张大神的课程中学到的。他的特殊之处在于,这种适用于图片在右边的情况,如下图:? css:*不好意系,可以6到不用css*哈哈哈~table实现关键点解析 结构放到tbale中 两列分别放到两个td中,固宽的td设置一个宽度即可 二者间距使用任何一个td设置左或右边距即可。 六、table-cell - 伪表格有了table老人家的启发,让我想起来css中还有一个属性display,他的值是可以仿造table的。 垂直居中-两列都这么设置:  display: inline-block;  vertical-align: middle;*最后说明:这些都是自己照着设计稿现撸的不成熟的实现条件,具体工作中用的方法也就其中两个 总结于:2019-01-06 15:54:48下篇预告:常见的两案例及分析声明:  请尊重博客园原创精神,转载或使用图片请注明:  博主:xing.org1^  出处:http:www.cnblogs.compadding1015

    61120

    Flex 教程:实例篇

    上一篇文章介绍了Flex的语法,今天介绍常见的Flex写法。你会看到,不管是什么,Flex往往都可以几行命令搞定。?我只列出代码,详细的语法解释请查阅《Flex教程:语法篇》。 在容器里面平均分配空间,跟上面的骰子很像,但是需要设置项目的自动缩放。?HTML代码如下。 ... ... ... CSS代码如下。. 页面从上到下,分成个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成,从左到右为:导航、主、副。?HTML代码如下。 CSS代码如下。.InputAddOn { display: flex; } .InputAddOn-field { flex: 1; }五、悬挂式有时,主的左侧或右侧,需要添加一个图片。? 这时可以采用Flex,让底总是出现在页面的底部。?HTML代码如下。 ... ... ... CSS代码如下。.

    626130

    Flex 两篇教程之二

    在容器里面平均分配空间,跟上面的骰子很像,但是需要设置项目的自动缩放。?HTML代码如下。 ... ... ... CSS代码如下。. 圣杯圣杯(Holy Grail Layout)指的是一种最常见的网站。 页面从上到下,分成个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成,从左到右为:导航、主、副。?HTML代码如下。 CSS代码如下。.InputAddOn { display: flex;} .InputAddOn-field { flex: 1;}五、悬挂式有时,主的左侧或右侧,需要添加一个图片。? 这时可以采用Flex,让底总是出现在页面的底部。?HTML代码如下。 ... ... ... CSS代码如下。.

    15330

    利用Div + CSS快速页面

    在各类智能手机和平板出现前的很长一段时间里,Web网页都是通过表格进行的。 目前最为广泛采用的网页方式——Div + CSS所谓Div + CSS,是指通过HTML「层」标签——,辅以CSS中对该「层」宽度、排列等样式的定义,来实现网页的一种方式用Div就远为灵活。 另外,要修改某个Div的位置,也只需要相应的调整其CSS样式即可。但是Div所谓的灵活也并非随心所欲、胡乱排,它也是遵守一定的排规则的具体来说,Table的排方式一般如下。 而一般Div的排方式也与之类似,只不过并没有表格、行、单元格这许多层级,只是单一层级的而已。 那么问题来了,这些Div长得一毛一样啊,我怎么让浏览器知道它们是在什么位置的?这里就轮到CSS出场了。 将页面等分成12是使用Div+CSS网页的一种主要方式,主要通过把页面等分成12来实现一般你看到的网站都会分成几?一?有的。两?也有。?这个好像还比较常见。四

    47510

    实例详解:Flex(二)

    在之前的一篇文章:详解CSS的Flex中介绍了CSS的Flex的基本知识,包括flex-container的6个属性,以及flex-item的6个属性。 同时也提到过,通过使用Flex,可以很优雅地解决很多CSS问题。本文将通过个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex是如何解决CSS问题。 2.1 普通方式实现圣杯在我之前的文章圣杯与双飞翼中详细介绍过如何实现一个圣杯:(1)中间的,这里采用margin负值法:两边两宽度固定,中间宽度自适应,左、右、中间向左浮动 实现效果:.png实现代码: 圣杯 body { margin: 0; padding: 0; } header, footer { height: 100px; width: 100%; 通过对比其他的实现方式,可以看出使用Flex可以优雅地实现相同的CSS问题。如有问题,欢迎指正。

    1.6K431

    圣杯与双飞翼

    上一篇文章介绍了种方法实现CSS,本文则在此基础上,进一步介绍常用的圣杯与双飞翼。一.圣杯圣杯的要求:1. header和footer占屏幕全部高度,高度固定2. 中间的contaier部分是一个3. left和right宽度固定,middle自适应填满整个区域;高度为中最大的高度;实现的方法:1.header和footer设width为100%2.中间的 ,可参考种方法实现CSS,这里采用margin负值法来实现先直接实现下: 圣杯 body { margin: 0; padding: 0; } header, footer { height * .main{ margin-left:200px; margin-right:300px; } 头部 中间 右边 footer 实现的效果如下:双飞翼.png.小结本文主要介绍了如何一步步地实现圣杯和双飞翼 圣杯相较于双飞翼,样式设置稍有些复杂。双飞翼样式设置比较简单,但需要修改html结构。建议在阅读本文前,可以先阅读下种方法实现CSS,便于加深理解。如有问题,欢迎指正。

    2.5K230

    相关产品

    • 云直播

      云直播

      云直播(CSS)为您提供极速、稳定、专业的直播云端处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、慢直播、快直播三种服务,分别针对大规模实时观看、高并发推流录制、超低延时直播场景,配合移动直播 SDK,为您提供一站式的音视频直播解决方案。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券