盒模型

时间：2018-06-18 17:16:18 阅读：153 评论：0 收藏：0 [点我收藏+]

标签：static code ima 大小 border 解析 round 情况下宽高

盒模型

盒模型：是在网页设计中经常用到的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>

技术分享图片

盒模型

标签：static code ima 大小 border 解析 round 情况下宽高

原文地址：https://www.cnblogs.com/asassa/p/9195374.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行