文档章节

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

维他ViTa
 维他ViTa
发布于 2016/12/04 16:49
字数 236
阅读 12
收藏 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...(大部分表单标签)​

三、盒子模型



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



© 著作权归作者所有

共有 人打赏支持
维他ViTa
粉丝 12
博文 135
码字总数 44057
作品 0
深圳
程序员
私信 提问
css布局和定位总结

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

761218914
2016/07/20
33
0
「前端那些事儿」③ CSS 布局方案

我们在日常开发中经常遇到布局问题,下面罗列几种常用的css布局方案 话不多说,上代码! 居中布局 以下居中布局均以不定宽为前提,定宽情况包含其中 1、水平居中 a) inline-block + text-ali...

zwwill木羽
10/30
0
0
前端面试知识点大全——html篇

指定字符集 向搜索引擎说明你的网页的关键词 告诉搜索引擎你的站点的主要内容 告诉搜索引擎你的站点的制作的作者 响应式页面 定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对...

大灰狼的小绵羊哥哥
10/27
0
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

没有更多内容

加载失败,请刷新页面

加载更多

iOS补位动画、沙漏效果、移动UITableViewCell、模拟贪吃蛇、拖拽进度等源码

iOS精选源码 JHAlertView - 一款黑白配色的HUD之沙漏效果 继承UIButton的自定义按钮SPButton 用递归算法实现iOS补位动画 iOS 长按移动UITableViewCell JHLikeButton - 有趣的点赞动画 兼容X...

Android爱开源
21分钟前
0
0
08.Beetl自定义方法以及直接访问java类方法---《Beetl视频课程》

本期视频实现了发布评论时间自定义显示; 内容简介:使用了自定义方法以及直接访问java方法实现了发布时间自定义显示 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catal...

Gavin-King
22分钟前
0
0
上币至iamToken

https://github.com/consenlabs/token-profile 点击Fork按钮,插入到自己的github项目中 cd /Users/shijun/Desktop/blockChain/iamToken git clone https://github.com/yellmi1983/token-pro......

八戒八戒八戒
24分钟前
0
0
spark——sparkCore源码解析之RangePartitioner

HashPartitioner分区可能导致每个分区中数据量的不均匀。而RangePartitioner分区则尽量保证每个分区中数据量的均匀,将一定范围内的数映射到某一个分区内。分区与分区之间数据是有序的,但分...

freeli
24分钟前
1
0
常用的ES6语法

什么是ES6?   ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。   ECMAScript和JavaScr...

peakedness丶
28分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部