文档章节

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

iBazinga
 iBazinga
发布于 2016/12/04 16:49
字数 236
阅读 10
收藏 0
点赞 0
评论 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
博文 127
码字总数 42315
作品 0
深圳
程序员
css布局和定位总结

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

761218914 ⋅ 2016/07/20 ⋅ 0

前端技术-布局解决方案

原文 http://www.cnblogs.com/jingwhale/p/4753686.html 一、居中布局 1.水平居中 行内元素 如果被设置元素为 文本、图片 等行内元素时,水平居中是通过给父元素设置 text-align:center 来实...

DanielYue ⋅ 2016/07/19 ⋅ 0

Android学习笔记(二) 布局方式的介绍

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

半夏alvin ⋅ 2014/03/05 ⋅ 0

CSS布局说——可能是最全的

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

zimo ⋅ 2017/09/26 ⋅ 0

JAVAFX-3 开发应用

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

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

典型的三行二列居中高度自适应布局

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

恐空控 ⋅ 2013/06/13 ⋅ 0

谷歌约束控件(ConstraintLayout)扁平化布局入门

序 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库。 简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的...

Qiujuer ⋅ 2016/05/20 ⋅ 11

标签之美五——网页表格的设计

标签之美——网页表格的使用 通过表格,可以使网页排版更加清晰,形式更加简洁漂亮。 一、表格布局中三个重要的标签 1、<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内...

珲少 ⋅ 2015/05/13 ⋅ 0

垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯 ⋅ 2016/12/05 ⋅ 0

编写第一个响应式页面

本文为大家讲解如何使用一种科学的方法实现网页设计,从原理上搞清楚什么是响应式设计,并实现一个简易的响应式设计框架,以此为基础,编写出第一个响应式页面。 不知道现在大家还读村上春树...

凡尘里的一根葱 ⋅ 2015/11/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部