文档章节

网页布局基础(1)-自动居中一列布局

iBazinga
 iBazinga
发布于 2016/12/04 16:49
字数 236
阅读 10
收藏 0

基础知识

W3C标准:结构化标准语言(HTML / XML)

                 表现标准语言(CSS)

                 行为标准语言(DOM / ECMAScript)

倡导:结构、样式、行为分离。

一、CSS定位机制

1. 标准文档流(Normal flow)

        从上到下、从左到右,输出文档内容;由块级元素和行级元素组成。

2. 浮动(Float)

        能够实现多列布局;通过设置float属性设置。​

3. 绝对定位(Absolute positioning)

二、块级元素 / 行级元素

1. 块级元素:

          从左到右撑满页面,独占一行;

          触碰到页面边缘时自动换行。

          Eg:div、ul、li、dl、dt、p...​

2.行级元素

          能在同一行内显示;

          不会改变HTML文档结构。

          Eg:span、stong、input、img...(大部分表单标签)​

三、盒子模型



盒子模型尺寸=边框+外边距+内边距+盒子中内容尺寸​​​​



© 著作权归作者所有

共有 人打赏支持
iBazinga
粉丝 11
博文 128
码字总数 42533
作品 0
深圳
程序员
css布局和定位总结

1,布局——盒子模型 (1)盒子模型的组成部分: 盒子模型—网页布局的基石,由4部分组成,边框(border),外边(margin) 内边距(padding),盒子中的内容(content)四个值:上右下左,三...

761218914
2016/07/20
33
0
CSS布局说——可能是最全的

前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。 其实,我们可能经常在聊组件化...

zimo
2017/09/26
0
0
Android学习笔记(二) 布局方式的介绍

Android应用的开发的一项内容就是用户界面开发了。Android提供了大量功能丰富的UI组件。Android的界面是由布局和组件协同完成的。 Android所有UI组件都继承了View类,View类有一个重要的子类...

半夏alvin
2014/03/05
0
0
典型的三行二列居中高度自适应布局

典型的三行二列居中高度自适应布局 如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝色理想论...

恐空控
2013/06/13
0
0
JAVAFX-3 开发应用

理解布局 布局容器(Layoutcontainer)或面板(Pane)允许对JavaFX应用程序场景图中的UI控件进行灵活、动态的排布。JavaFX Layout API包括下列容器类: ● BorderPane类将其内容节点放到上、下、...

---dgw博客
2017/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
183
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
0
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部