Head First HTML与CSS — 布局与定位
1.流(flow)是浏览器在页面上摆放HTML元素所用的方法。
对于块元素,浏览器从上到下沿着元素流逐个显示所遇到的各个元素,会在每个块元素之间加一个换行;
对于内联元素,在水平方向会相互挨着,总体上会从左上方留向右下方。
2.流与盒模型
盒模型:从CSS角度来看,每个元素都是一个盒子。由内容区(content area),内边距(padding),边框(border)和外边距(margin)组成。
并排放置两个内联元素时:它们的外边距会叠加。
上下放置两个块元素时:它们的外边距会折叠,共同的外边距为两个外边距中的较大的那个(包括嵌套的情况)。
3.浮动元素 float
对于浮动元素有一个要求,必须有一个宽度。
元素浮动后,会脱离文档流,其它块元素会填上它的位置,但是对于其他块元素中的内联元素,它们会围绕着这个浮动元素。
清楚float:当元素流入页面时,在这个元素的两边不允许有浮动内容时,可以用 clear属性来清除浮动。
4.凝胶(jello)布局
与用float流体布局(liquid layouts)相比,凝胶布局会锁定页面中内容区的宽度,不过会将它在浏览器中居中。
通过设置属性 margin:0 auto;
5.使用CSS创建表格显示
在CSS中通过属性 display ,设置其值为 table,table-row,table-cell。
与HTML表格不同,CSS表格显示只是使用一种类似表格的布局来表现这个结构中的内容。
Head First HTML与CSS — 布局与定位的更多相关文章
- CSS布局与定位——height百分比设置无效/背景色不显示
CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...
- 测开之路三十八:css布局之定位
常用的布局方式: static:静态定位(默认),什么都不用管,元素会按照默认顺序排列,排不下是会默认换行relative:相对定位(同一层),相对于某一个元素进行定位fixed:绝对定位,指定位置a ...
- css 布局之定位 相对/绝对/成比例缩放
给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- 前端学习笔记--CSS布局--层定位
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- (5)《Head First HTML与CSS》学习笔记---布局与定位
层叠与CSS的权重判断 1.要理解层叠,除了前面的内容外还差最后一个知识点.你已经知道如何使用多个样式表来更好地组织你的样式,或者支持不同类型的设备.不过实际上用户访问你的页面时还有另外一些样式表. ...
随机推荐
- mysql时间int日期转换
select from_unixtime(1350437720);select unix_timestamp(now());插入用 unix_timestamp(date)查询用from_unixti ...
- Linux为用户设定环境变量
今天在做从将MySQL中的数据同步到ES的时候,当启动脚本程序报错: Exception in thread "main" java.lang.UnsupportedClassVe ...
- 简单运用 activity 的 button 点击事件
今天我们要讲的主要是四大组件之一Activity Activity 在英文中是活动的意思.活动就是我们与用户进行交互的一个场所. activity 整个的活动流程是什么呢?我们用一个图来看下 当然今天 ...
- 编译TWRP-recovery教程及源码地址
TWRP这个是一个老外的开源项目,全称Team-Win-Recovery-Project Source:https://github.com/TeamWin/Team-Win-Recovery-Pro ...
- c++中构造函数 、析构函数的作用域详解
我们知道,在c++中,析构函数是在函数作用域尾部执行析构函数,从而释放对象,但是有一种情况下,析构函数作用域发生变化,请看下面的例子,定义了一个Stock类,Stock类存放在stock.h中,主调用 ...
- favicon支持的图片格式
为网站设置favicon有两种方式: 1.网站根目录下放置名为favicon.ico的图片,浏览器就会自动获取: 2.在页面中通过<link rel="shortcut icon&qu ...
- 转:【创龙TMS320C6748开发板试用】相关软件的安装与基本设置+CCS安装失败分析
http://bbs.elecfans.com/jishu_542000_1_1.html
- 编程的宗派(OOP与FP孰优孰劣)--王垠
编程的宗派 总是有人喜欢争论这类问题,到底是"函数式编程"(FP)好,还是"面向对象编程"(OOP)好.既然出了两个帮派,就有人积极地做它们的帮众,互相唾骂和鄙 ...
- android EditText内嵌图片
如下所示: 主要用到的属性:android:drawableLeft <EditText android:layout_width="match_parent" androi ...
- 子句判断、启动强度和去模糊化--AForge.NET框架的使用(三)
原文:子句判断.启动强度和去模糊化--AForge.NET框架的使用(三) 使用AForge.NET进行模糊运算 上一篇说来一些模糊运算的数学问题,用AForge.NET做相关运算就很简单了. 1.联 ...