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表格显示只是使用一种类似表格的布局来表现这个结构中的内容。

 

转载于:https://www.cnblogs.com/lixiaolei90/p/5630639.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值