精华内容
下载资源
问答
  • 区域显示(6)-版面布局 设计要点:页面设计、多窗体、图形、链接 秀秀:图片链接挺好看的,俺非常受启示。 阿金:嗯,俺非常得意! 秀秀:要是把几个数据区都变为图片链接,把它们按自己的意思排列好。然后...

    多区域显示(6)-版面布局

    设计要点:页面设计、多窗体、图形、链接

    秀秀:图片链接是挺好看的,俺非常受启示。

    阿金:嗯,俺非常得意!

    秀秀:要是把几个数据区都变为图片链接,把它们按自己的意思排列好。然后在四周加上花边,

    阿金:干嘛?

    秀秀:那就像小时候的“手抄报”的版面布局啦!

    阿金:嗯?为什么要加花边?

    秀秀:由于俺要让数据也有“文艺范”!

    阿金:……

    转载于:https://www.cnblogs.com/cxchanpin/p/6792725.html

    展开全文
  • 移动端常见布局

    2021-01-17 13:39:10
    字面意思,它用户正在看到的网站的区域。注意:网站的区域。 3.理想视口: ----为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口,对设备来讲,最理想的视口尺寸,简单理解就是设备有多宽,我们...

    移动端常见布局及其相关概念

    一、视口

    什么是视口呢?

    ----视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

    1.布局视口:
    一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
    在这里插入图片描述
    2.视觉视口:
    字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
    在这里插入图片描述
    3.理想视口:
    ----为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口,对设备来讲,是最理想的视口尺寸,简单理解就是设备有多宽,我们布局的视口就多宽

    常见布局

    1、流式布局、flex弹性布局、vw、less+rem+媒体查询布局、混合布局----(单独制作移动端页面)主流
    2、媒体查询、bootstrap----(响应式式页面兼容移动端)其次

    一、流式布局

    流式布局也称百分比布局

    1.流式布局,就是百分比布局,也称非固定像素布局。
    2.通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
    3.流式布局方式是移动web开发使用的比较常见的布局方式。
    在这里插入图片描述

    二、flex布局(重要)

    1.flex的优缺点

    1.操作方便,布局极为简单,移动端应用很广泛
    2.PC 端浏览器支持情况较差
    3.IE 11或更低版本,不支持或仅部分支持

    2.布局原理

    ----flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。

    flex布局又称为:

    伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

    3.常见父项属性

    • flex-direction:设置主轴的方向–row(左到右)–column(上到下)
    • justify-content:设置主轴上的子元素排列方式(设置主轴)
    • flex-wrap:设置子元素是否换行 --wrap
    • align-content:设置侧轴上的子元素的排列方式(多行)
    • align-items:设置侧轴上的子元素排列方式(单行)
    • flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

    设置主轴上的对齐方式:justify-content
    justify-content:space-between(先两边贴边 再平分剩余空间)
    在这里插入图片描述
    justify-content:space-around(每一个剩余子项,均分剩余空间)
    在这里插入图片描述
    justify-content: space-evenly(子项的之间的宽度缝隙一致)
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210117125120271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ND

    这里是引用

    I3ODE1NQ==,size_16,color_FFFFFF,t_70)
    4.flex布局子项常见属性

    flex 子项目占的份数
    align-self 控制子项自己在侧轴的排列方式
    order属性定义子项的排列顺序(前后顺序)

    扩展:

    父项也是可以作为子项 flex嵌套
    普通的文字 也可以看成是子项

    三、移动端屏幕适配 解决方案

    屏幕适配的公式:
    手机屏幕的宽 / 设计稿的宽度 = 手机中div的宽 / 设计稿中 div宽度
    手机div的宽(?未知)

    1.vw:是一个相对长度单位,100vw等于屏幕的宽
    2.rem:是一个相对单位,基准是相对于html元素的字体大小
    3.媒体查询:是CSS3新语法

    1.使用 @media 查询,可以针对不同的媒体类型定义不同的样式
    2.@media 可以针对不同的屏幕尺寸设置不同的样式
    3.当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
    4.目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

    语法规范:
    在这里插入图片描述

    用 @media 开头 注意@符号
    mediatype 媒体类型
    关键字 and not only media feature
    媒体特性 必须有小括号包含

    4.less、sass、stylus:是css的预处理器,能够提高前端网页css的开发效率----学会一种就好,其他的语法都差不多

    4.1 less基础
    在这里插入图片描述
    4.2 less变量
    语法:@变量名: 值; @color:red;

    必须有@为前缀
    结尾必须带分号
    不能包含特殊字符
    不能以数字开头
    大小写敏感

    4.3 less嵌套
    在这里插入图片描述
    4.4 less运算
    ----任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

    /Less 里面写/
    @width: 10px + 5;
    div {
    border: @width solid red;
    }
    /生成的css/ div {
    border: 15px solid red;
    }
    /*Less 甚至还可以这样 */ width: (@width + 5) * 2;

    4.5 less 混合 mixin 函数

    对一段代码进行封装,然后进行调用

    4.5 less导入(比较少用)

    1.导入的语法 @import “less文件”;
    2.导入语句的结尾必须带分号;
    3.less的后缀名可以省略
    4.导入的文件类型必须为less文件,如果没有less文件可以手动将css文件的后缀改为less @import后面一定要加空格!!!
    5.vscode会检测导入的路径,如果不正确则会红色波浪线警告,并且无法编译less文件为css

    5、rem适配方案

    在这里插入图片描述
    6、响应式布局(bootstrap)

    6.1 优点:

    标准化的html+css编码规范
    提供了一套简洁、直观、强悍的组件
    有自己的生态圈,不断的更新迭代
    让开发更简单,提高了开发的效率

    6.2 布局容器:
    在这里插入图片描述
    6.3 bootstrap栅格系统

    Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

    • 按照不同屏幕划分为1~12 等份
    • 行(row) 可以去除父容器作用15px的边距
    • xs-extra small:超小; sm-small:小; md-medium:中等; lg-large:大;
    • 列(column)大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列
    • 每一列默认有左右15像素的 padding
    • 可以同时为一列指定多个设备的类名,以便划分不同份数 例如 class=“col-md-4 col-sm-6”

    栅格嵌套

    栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。
    在这里插入图片描述
    列偏移

    使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)
    在这里插入图片描述
    列排序

    通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
    在这里插入图片描述
    响应式工具

    为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
    在这里插入图片描述

    展开全文
  • CSS基础之BFC布局

    2020-07-27 15:35:22
    没看懂什么意思。应该是这样: BFC的布局是一个独立的布局,和BFC之外的布局是互不印象的; BFC布局是可以通过一些条件触发的,从而实现布局上的需求或解决一些问题; BFC其实就是一个工具,理解功能和特性就OK。...

    CSS布局中BFC是面试中常被问到的问题,那么我们就来总结一下的相关知识点。

    BFC的全名叫block formatting context, 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。没看懂什么意思。应该是这样:

    • BFC的布局是一个独立的布局,和BFC之外的布局是互不印象的;
    • BFC布局是可以通过一些条件触发的,从而实现布局上的需求或解决一些问题;
    • BFC其实就是一个工具,理解功能和特性就OK。

    BFC触发的条件?

    • 根元素(<html>)
    • float值非none
    • overflow值非visible
    • display值为inline-block、table-cell、table-caption、flex、inline-flex
    • position值为absolute、fixed

    BFC的特点是什么?

    1、属于同一个BFC的两个相邻容器的上下margin会重叠

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <style type="text/css">
                .top{
                    width: 200px;
                    height: 200px;
                    background: red;
                    margin-bottom: 40px;
                }
                .bottom{
                    width: 200px;
                    height: 200px;
                    background: blue;
                    margin-top: 60px;
                }
            </style>
    	</head>
    	<body>
            <div class="top"></div>
            <div class="bottom"></div>
    	</body>
    </html>

    功能:可解释为何相邻两容器上下外边距会发生重叠

    上面色块给下外边距40px

    当给红色块下外边距margin-bottom,给蓝色块上外边距margin-top时,上下外边距会发生重叠,两个色块的间距解析为两者中的较大值(60px)。 

    原因:
    此时红色块和蓝色块属于同一个BFC,即根元素(<html>)。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”,故两者上下边距发生重叠。

    解决方法:给蓝色块添加父元素.box并添加声明overflow: hidden;可以解决红色块和蓝色块的上下margin重叠问题。在这里插入图片描述

    原因:
    通过给蓝色块添加父元素.box并添加声明overflow: hidden;,使得父元素.box触发了BFC(见BFC触发条件3),此时红色块和蓝色块属于不同的BFC,红色块的BFC仍然是根元素(<html>),蓝色块的BFC是父元素.box。即不满足BFC特性1中的规定“属于同一个BFC······”,从而解决了两者的上下margin重叠问题。

    注:overflow: hidden;只是触发BFC众多条件中的一个,使用其他条件也能解决此问题,注意触发条件可能造成的其他影响即可,如浮动会造成的脱离文档流等。

    2、计算BFC高度时浮动元素也参于计算

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <style type="text/css">
                .outside{
                    border: 10px solid blue;
                }
                .inside{
                    width: 200px;
                    height: 200px;
                    background: yellowgreen;
                    float: left;
                }
            </style>
    	</head>
    	<body>
            <div class="outside">
                <div class="inside"></div>
            </div>
    	</body>
    </html>

    功能:可解释为何overflow: hidden;能解决父元素高度塌陷在这里插入图片描述

    当父元素.outside没有设置高度且子元素.inside都浮动时,父元素.outside会出现高度塌陷。

    原因:
    子元素.inside设置浮动后脱离文档流,而父元素.outside又没有设置高度,故父元素.outside会出现高度塌陷。

    解决方法:给父元素.outside添加声明overflow: hidden;,父元素高度塌陷消失。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <style type="text/css">
                .outside{
                    border: 10px solid blue;
                    overflow: hidden;
                }
                .inside{
                    width: 200px;
                    height: 200px;
                    background: yellowgreen;
                    float: left;
                }
            </style>
    	</head>
    	<body>
            <div class="outside">
                <div class="inside"></div>
            </div>
    	</body>
    </html>

    在这里插入图片描述

    原因:
    给父元素.outside添加声明overflow: hidden;,使得父元素.outside触发了BFC(见BFC触发条件3),而BFC特性规定“计算BFC高度时浮动元素也参于计算”,此时子元素.inside虽然设置了浮动,但其高度仍计算至父元素内,从而解决了高度塌陷问题。

    3、BFC的区域不会与浮动容器发生重叠

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <style type="text/css">
                .left{
                    width: 100px;
                    height: 200px;
                    background: yellowgreen;
                    float: left;
                }
                .right{
                    height: 300px;
                    background: blue;
                }
            </style>
    	</head>
    	<body>
            <div class="left"></div>
            <div class="right"></div>
            
    	</body>
    </html>

    功能:在布局上实现自适应两栏(三栏)

    在这里插入图片描述

    正常情况下,左侧元素.left浮动时,会与右侧元素.right发生重叠,不能实现自适应两栏效果。

    原因:
    左侧元素浮动,脱离文档流。

    解决方法:给右侧元素.right添加声明overflow: hidden;,左右侧元素重叠消失,实现自适应两栏效果。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
            <style type="text/css">
                .left{
                    width: 100px;
                    height: 200px;
                    background: yellowgreen;
                    float: left;
                }
                .right{
                    height: 300px;
                    background: blue;
                    overflow: hidden;
                }
            </style>
    	</head>
    	<body>
            <div class="left"></div>
            <div class="right"></div>
            
    	</body>
    </html>

    在这里插入图片描述

    原因:
    给右侧元素.right添加声明overflow: hidden;,使得右侧元素触发了BFC(见BFC触发条件3),而BFC特性规定“BFC的区域不会与浮动容器发生重叠”,从而解决了重叠问题,实现自适应两栏效果。

    4、BFC内的容器在垂直方向依次排列

    类似正常情况下块元素在垂直方向上依次排列,较易理解。在这里插入图片描述

    5、元素的margin-left与其包含块的border-left相接触

    在这里插入图片描述

    6、BFC是独立容器,容器内部元素不会影响容器外部元素

    BFC大致就这么多内容,面试前必读。

    展开全文
  • 什么是bfc

    2020-03-01 22:58:18
    很多同学学到BFC的时候会比较难以理解,首先我们要知道BFC是什么东西, BFC block formatting context ,中文意思就是;块格式化上下文,他是一个很抽象的东西,是css2.1规范定义的一个关于渲染定位的概念, 是Web...

    BFC的含义

    很多同学学到BFC的时候会比较难以理解,首先我们要知道BFC是什么东西,
    BFC block formatting context ,中文意思就是;块格式化上下文,他是一个很抽象的东西,是css2.1规范定义的一个关于渲染定位的概念, 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。我们先来认识另一个东西,视觉格式化模型

    视觉格式化模型

    什么是视觉格式化模型呢
    CSS 视觉格式化模型(visual formatting model)是用来处理和在视觉媒体上显示文档时使用的计算规则。也就是将文档进行处理并显示在视觉媒体上,该模型是 CSS 的基础概念之一。

    视觉格式化模型定义了盒子的生成,根据CSS盒模型将文档中的元素生产0.1或者多个盒子,这个机制规定了页面中盒子的排列,尺寸以及位置。生成盒子的类型由css属性dispaly决定.

    在默认情况下,盒子是按照元素在HTML中的先后位置从左至右从上至下一个接着一个排列放置。但此时也分为两种情况,有的盒子呈水平排列,有的盒子却占满整个一行。这是因为不同的盒子,使用的是不同的格式化上下文来布局。

    格式化上下文常见的有两种:

    • 块格式化上下文(BFC)
    • 行内格式化上下文(IFC)

    当元素的display值为block、list-item、table、flex时,它是块级元素,每个块级元素至少生成一个块级盒,块级盒参与BFC,被渲染成完整的一个新行。

    到这里,已经对CSS的定位有一定的了解了,从上面的信息中也可以得知,块格式上下文是页面CSS 视觉渲染的一部分,用于决定块盒子的布局及浮动相互影响范围的一个区域。

    也就是说页面中的块盒所使用的的渲染模型就是BFC,当元素满足一定条件时,我们称之为触发了BFC,使其满足这个渲染模型的规范。

    W3C对于BFC的定义是:
    在这里插入图片描述
    总结一下BFC的特性:

    • 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
    • 每个元素的margin box的左边,与包含块border box的左边相接触,即使存在浮动也是如此。
    • BFC的区域不会与float box叠加
    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
    • 计算BFC的高度时,浮动元素也参与计算。

    by逆战班黄海杰

    展开全文
  • BFC到底是什么

    2021-03-13 09:51:22
    BFC到底是什么? 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。通过意思理解我可以看到BFC其实在CSS中是...
  • 在用CSS布置页面时,您是否知道元素在Internet Explorer中“具有布局是什么意思? 如果没有,您可能会错过一个有用的工具来克服该浏览器中CSS错误。 再说一遍,您可能会错过关于正在处理的错误的解释。 在...
  • 老朱一大早口中念念有词:“折冲樽俎之间,决胜千里之外”,小白摸不清头脑问道:“这是什么意思?” “没事!我正在想今天怎么跟你说网页布局的事,因为网页布局也分横布局和纵布局,因此我就想到了古人这句话,...
  • 老朱一大早口中念念有词:“折冲樽俎之间,决胜千里之外”,小白摸不清头脑问道:“这是什么意思?”“没事!我正在想今天怎么跟你说网页布局的事,因为网页布局也分横布局和纵布局,因此我就想到了古人这句话,今天...
  • 首先,Android中大绝大部分UI组件都放在android.widget包,或者android.view包中,Android中的所有UI组件都继承了View类,那么View是什么,直面意思可以翻译为视图,类似于Swing编程中的Jpanel,代表一个空白的区域.View中...
  • 首先,展示一下ViewPager是什么样子的,用过新浪微博客户端的应该对下面的画面很熟悉,(画面不是很美观,主要就是那么个意思,将就着看吧....)下面那个允许你来回滑动显示不同页面的区域就是一个ViewPager,在这里就不解释...
  • 理解margin-left:-100%

    千次阅读 2019-09-20 18:41:36
    是什么意思呢?意思就是向左移动整个屏幕的距离 但是在三栏式写法(其中一种)里面的盒子却是可以移动到上图的黑色区域的,这个原因是: 黑色区域和蓝色区域都加了浮动,当再次使用margin-left的负百分比的时候...
  • wed开发基础--练习题

    2018-11-05 11:59:00
    本小节重点: 熟练使用div+span布局,知道div和span的语义化的意思 熟悉对div、ul、li、... 熟练网站布局结构 比如 header区域,侧边栏区域,内容区域,脚部区域 1、XHTML和HTML有什么区别 HTML一种基本的W...
  • Html 的BFC 理解

    2021-06-09 14:41:01
    bfc 从字面意思来讲就是block formatting context (块级格式化上下文),bfc 其实页面中一个单独渲染区域,并且有自己的渲染规则,bfc 区域里的元素无论如何布局 都不会影响外层的元素排列 2.ru h ...
  • 一个块级的独立的渲染区域,并且这个区域与该区域的外部毫不相干,即:在这一块级封闭区域中的元素,无论怎么摆放,都不会影响到区域外其他元素的布局。 二、形成BFC的条件 float属性不为none position为...
  • BFC:中文的意思是块级格式上下文 ,他一个独立的渲染区域,他规定了内部的元素如何布局,而且这个区域与外部的元素毫不相干。 普通文档流布局规则 1.浮动的元素不会被父级计算高度的(列入高度自适应布局中高度...
  • CSS中的BFC详解

    2019-02-17 15:31:49
    最近在前端群上面看到有人提出了一个概念:BFC,没听懂是什么意思,于是找了一些资料来看看。 Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的...
  • 1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了...
  • 这个60HZ是什么意思?就是指屏幕每秒钟刷新60次。所以我们可以通过屏幕作为参考,如果我们的网页也可以每秒钟往屏幕传输60个画面,用户就会觉得这个网页是流畅的,有一个单位叫做FPS,...
  • 在光标闪烁处输入代码:LblShow.Caption = "跟我来学 VB 神童教程"(这句程序是什么意思?以后我们讲述)。如图十七: 图十七 输入完毕,点击右上角的 “X” 回到对象窗口,然后点击工具栏上的“启动”按钮...
  • 测试培训教材

    2014-04-01 12:10:48
    度量的标准和依据是什么呢?软件测试的度量是测试管理必须仔细思考的问题。缺乏尺度会让测试失去平衡,缺乏标准会让测试工作难以衡量。 2、如何搭建测试管理平台? 首要问题是流程的规范化。 (1) 测试进入和退出...
  • 80%的前端会答错的问题:是什么元素? 5种作为Web开发人员应避免的CSS做法 响应式网页中的高度设计,你认真的吗? CSS垂直居中的七个方法 使用网络构建复杂布局超实用的技巧,赶紧收藏吧! 超越媒体查询:...

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

区域布局是什么意思