布局-float-margin-padding

布局

布局从上到下,然后再从左右;先用div进行占位,即是设置框架,然后Css美化

PS:注意设置长和宽 再设置float ; id不能数字命名

 Float

不用浮动的话,div默认会上下排列(块状元素)

使用float,让该div浮起,没加float的div会在 浮起的div下面(因为浮上去了);如果不想被盖住,下面的div可以使用clean进行声明(老子不想被你遮住);总之,相当分为2层,并且互不干扰

1、 使用左浮动的div就会从最左边开始浮,依次从左到右排序直到最右,就会换行又从左到右;

2、左浮和右浮都是在同一个层次,所以左浮和右浮不会重叠。

问题:父容器中有两个子容器,如果定义了父容器的宽度,没有定义高度;两个子容器都浮动,父容器没有清除,那么父容器有多高?

答: 父容器高度为0,因为子容器都浮在上面,没有把父容器撑大。如果去除两个子容器的浮动则高度等于子容器

Margin Padding div

div也被叫做盒子;div是块元素,所以会自己占1行;使用spin是行内元素能设置样式(不能设置竖直方向的内外边距)

一般同级盒子与盒子之间的距离叫做外边距margin(如果写四个就从上逆时针;,)

内边距是内容与盒子边的距离padding

如果一组div具有相似的属性我们可以用class 表示一类(名可以一样)

盒子的border的三要素:宽、形状、颜色;

border :宽 样式 颜色 ;另外直接可以仅某条边进行设置(详情见CSS完全参考手册)

实战:利用css控制border 和div和做出三角。因太粗的边是三角形状的,类门框

内边距的问题 :一个div设置了border和长宽之后,再添加padding的大小,会让div形状变大,变大的部分就是padding的值;原来的div大小是不变的,能够添加内容的空间还是那么大(magin不会)

增加padding注意总长度,可以通过修改width的长度调节

实际的height = height + margin-top + margin-bottom + padding-top + padding-bottom + 2 border

margin重叠:相邻的div上下边距值非相加,而是取最大的边距值

时间: 2024-10-10 10:12:50

布局-float-margin-padding的相关文章

DIV+CSS布局重新学习之float/margin/padding

之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

css007 margin padding border

css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2.用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间: p

css 巧用 margin/padding 的百分比值实现高度自适应(多用于占位,避免闪烁)

一个基础却又容易混淆的 css 知识点 本文依赖于一个基础却又容易混淆的 css 知识点:当 margin/padding 取形式为百分比的值时,无论是 left/right,还是top/bottom,都是以父元素的width为参照物的! 高度自适应占位 假设有这么个场景: 如上图所示,有这么一种用来放图片的容器,图片都是正方形(为了方便举例用正方形,实际上只要固定长宽比例即可).在 PC 端好办,容器的宽高都写死是多少 px,这样即使图片加载不出来容器都不会变型.但是在移动端,由于各机型分辨率

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.

margin/padding百分比值的计算

1.百分比介绍 一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这个文档设置该样式,使其子元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小. margin-right/margin-left的百分比值是相对于父元素的宽度来计算的,这很好理解:而margin-top/margin-bottom为什么也是以父元素的width为参照物的呢? 2.为什么呢?

【CSS黑科技2】CSS百分比实现高度占位自适应(margin/padding)

| 导语 在很多场景下,我们都需要给容器设定宽高比,实现自适应占位,巧用margin/padding可以让我们实现我们的需求 基本知识点 本文依赖于一个基础却又容易混淆的css知识点:当padding/margin取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的! 哈,top/left以父元素的width为参照物还好理解,但top/bottom不是以height更符合我们的预期吗?有疑惑很简单,看官方解释: 举个栗子 我们有个页面,如

总结那些有默认margin,padding值的html标签

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

关于css布局中margin,padding在整个布局中使用的一些细节

最近在学习写网页,在用html标记语言和css布局时,发现css布局中的margin,padding会使整个布局变大,最后在研究了css盒模型时找到了答案. 主要原因是margin定义了模块的外边距,padding定义了模块的内边距,如果在布局时没有把两块边距像素考虑到整个布局中,并且在父布局里宽高都设置为固定,此时会发生的事情就是:在整个父布局中如果宽度容纳不下子布局,那么子布局会撑出整个父布局,例如: <div id="container"> <div id=&q

关于margin,padding,absolute,relative对布局的一些影响和建议

---恢复内容开始--- tip:下面的内容网上各种基本的使用情况很多,我基本不写了,主要是想到一些特别的使用的时候.时间宝贵,请直接跳后面. 一.简单探讨下各个东西的使用情况(全是以div测试) 1)margin(外边距) 1.margin也有想positon一样的top,left,bottom,right,那么它的参照物是什么 ①:不涉及postion时,设置了margin属性的元素是以离他最近的四周的元素位置为参照物.本身不脱离文档流,不以自身在文档流中的位置为参照. <!DOCTYPE

android布局中margin和padding的区别!

其实从使用的时候就可以区别开来. android:padding android:layout_margin padding是在本控件级别的,而margin是在layout级别的. 最好拿有背景的控件做测试: padding: margin: