盒模型
盒模型
- 盒模型:是在网页设计中经常用到的CSS技术所使用的一种思维模型,内容(content)、内边距(padding)、边框(border)、外边距(margin),都是一个个盒子组成的。
- margin:区域总是透明的,可见
- 注:ie6/ie7除外,ie浏览器会将width解释为一个元素和的整个宽度,与其他浏览器解析不同
- em盒:控制元素字体大小,一个字一个盒子
- 内容区:每个元素有一个内容盒子,大小取决于元素的字体大小
- 内嵌盒:文本中每个字符和元素运行都会产生一个内嵌盒
- 行盒:代表一行所需要的总高度(light-height控制)
- 他们之间是层级关系
- 宽和高:
- 控制元素的大小
- 行内元素转换块级:display:inline-block/block
- 元素的宽高,在默认情况下取决于字体和图片的大小
- 外边距:
- margin:_ _ _ _表示外边距设置:上右下左顺序
- 外边距可以是负值,与页面的其他元素重叠
- 相邻的两个块级元素之间距离,以他们之间最大的外边距为准
- 边框:
- 非可替换内嵌元素的边框对于该元素所在行的高度没有影响(内容不变,span换strong)
- 可替换元素的边框将会影响高度(内容不变,sapn换h1)
- border:属性值有9个,常用none,dotte,dashed,solid,double,groove,right,inset,outset
- border-top/right/bottom/left-style: 可分别对边框进行设置
- boder:_ _ _ _ 顺序:上右下左
- 内边距:
- 内边距是padding是元素内容区与边框可选区域
- padding:_ _ _ _ 顺序:上右下左
- padding没有负值
- 正常文档流布局:
- 标准文档流:文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素
- 元素的浮动:脱离标准文档流,实现样式布局的改变
- 基础:
- flot的属性值:none(不浮动),left(左浮),right(右浮)
- 浮动的元素就像文档流中的岛屿,虽然这些浮动元素从正常文档中脱离出来,但是流还是围绕着这些岛屿
- 当folt不为none时,元素会被视为块级
- 浮动前,必须给浮动的元素width否则会折叠,但是浮动元素的margin是不会重合的,保留了下来
- 行为:
- 若第一个同级块级元素浮动,后面的会跟着浮动,形成一行并列
- 清除浮动:
- clear属性值有三个:none(默认),left(清除左浮),right(清除右浮),both(清除所有浮动)
- 基础:
- 定位:允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
- 类型
- static:默认,标准文档流
- relative:相对定位,位置改变,但原元素在文档的原始空间保留
- absolute:绝对定位,脱离文档流,原始空间不再保留,不影响其他元素,置于文档最上层,会遮盖其他元素
- fixed:固定定位,脱离文档流,相对于视口定位(浏览器窗口)
- 位置
- position属性值四个:top,left,bottom,right
- 处理溢出
- overflow:指定其内容不能填充
- 属性值四个:visible(默认值),hidden(表示裁剪内容,不显示超出内容),scroll(表示裁剪内容,同时添加滚动条),atuo(必要时裁剪内容,并添加滚动条)
- 添加overflow属性,该元素的position属性必须是absolute
-
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>boder边框</title> <style> .style1{ position: relative; height: 150px; width: 150px; border: 1px solid black; background-color: red; } .style2{ position: absolute; top: 10px; left: 10px; height: 50px; width: 50px; border: 1px solid aqua; background-color: #7ffb80; } .style3{ height: 50px; width: 50px; border: 1px solid black; background-color: #f1bdaa; } </style> </head> <body> <div class="style1"> <div class="style2">图一</div> <div class="style3">图二</div> </div> </body> </html>
- 类型