布局主题的文章列表，还有布局的技术要点_第4页

CSS3与页面布局学习总结（五）——Web Font与Sprite

webfont是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体：a）、安装好操作系统后，会默认安装一些字体，这些字体文件描述了每一个文字的形态，一般中文文件大，英文文件小，因为中文字符数多；在控制面板中可以找到文字文件夹，在C:WindowsFonts下也可以直接找到...

代码星球 ·2021-02-12

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

BFC（BlockFormattingContext）即“块级格式化上下文”，IFC（InlineFormattingContext）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内...

代码星球 ·2021-02-12

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是ie盒子模型和标准w3c盒子模型，加上了doctype声明，让所有浏览器都会...

代码星球 ·2021-02-12

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个：HTML、CSS与JavaScript，他们分别在不同方面发挥自己的作用，HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用，有点“SRP单一职责”的意思，如字体大小应该是CSS控...

代码星球 ·2021-02-12

手敲图片瀑布流布局

<html><head><scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>.box{margin:0;padding:0;overflow:hidden;...

代码星球 ·2021-02-11

flex弹性布局模式下文字超出显示省略号

/都知道flex弹性布局非常好用，会随分辨率不同，宽高自适，那怎么来设置在一定范围内的文字超出隐藏，显示省略号呢？其实也不难看如下就是使用flex布局的其实如上效果也同样离不开如下三句，只是用法不大一样罢了white-space:nowrap;overflow:hidden;text-overflow:ellipsis...

代码星球 ·2021-02-10

小程序的flex布局

flex-direction：row row-reverse column column-reverseflex-warp ...

代码星球 ·2021-02-09

Grid布局教程

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html...

代码星球 ·2021-02-08

GridLayout 可使容器中的各个组件呈网格状布局

GridLayout可使容器中的各个组件呈网格状布局，平局占据容器的空间，即使容器的大小发生变化，每个组件还是平均占据容器的空间。和FlowLayout一样，GridLayout也是按照从上到下，从左到右的规律进行排列的。 1packageTomAwt;234importjava.awt.*;5importj...

代码星球 ·2021-02-08

每个容器都有一个布局管理器

布局管理器（LayoutManager）：每个容器都有一个布局管理器，当容器需要对某个组件进行定位或判断其大小、尺寸时，就会调用其对应的布局管理器。使用布局管理器可以实现跨平台的特性，并且获得动态的布局效果。布局管理器负责管理组件的排列顺序、大小和位置。不同的布局管理器使用不同的布局策略，容器可以通过选择不同的布局管理...

代码星球 ·2021-02-08

rem布局及响应式布局

　　流式布局（100%布局）（可能：做的页面不是很美观）效果与弹性布局一样　　不设置宽高：表示宽auto　　最外层：保证100%　　等比例缩放的算法： 320/10 已知的一个比例 = 已知的宽/x x就是想得到的值；　　弹性/流式，布局比较容易，但是里面的...

代码星球 ·2021-02-08

移动端rem布局屏幕适配插件（放js中便可使用）

/*　　doc:不用管：document对象　　win:不用管：window对象　　design:注意：设计稿的尺寸/物理像素*/(function(doc,win,design){//alert(123)vardocEl=doc.documentElement,resizeEvt='orientationchange...

代码星球 ·2021-02-08

移动式布局

　　移动式布局　　　　1.移动设备：手机和iPad　　　　系统分：安卓系统和iOS系统　　　　安卓系统内置浏览器是谷歌，ios内置safari浏览器，他们的内核都是webkit，不需要考虑兼容性，但安卓和iOS系统还是有区别的；　　　　2.布局（写页面）所考虑的东西　　　　　　设备宽度：就是设备实际大小，设备分辨率，就...

代码星球 ·2021-02-08

CSS常见布局问题整理

实现div的水平居中和垂直居中多元素水平居中实现栅格化布局实现效果: 这大概是最经典的一个题目了,所以放在第一个.方法有好多,一一列来主要思路其实就是使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高))使用flex属性使用tranfro...

代码星球 ·2021-02-07

Flexbox弹性布局

　　Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。最新版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-。1.引入　　通过对伸缩容器定义两个属性，justify-content定义伸缩...

代码星球 ·2021-02-06