关闭

[前端]盒模型

标签: 前端
162人阅读 评论(0) 收藏 举报
分类:

盒模型四层:
Margin\Border\Padding\Content

width:
指定 content box 宽度
百分数相对于父容器(包含块)的 content box 宽度

height
指定 content box 高度
百分数相对于父容器(包含块)的 content box 高度
只有当包含块的高度不依赖该元素时,百分比高度才生效(必须要父元素也要有指定的高度才可以)//element的父级元素是viewport

padding
内边距
padding-top、padding-right、padding-bottom、padding-left
缩写:padding
padding: 10px 20px 30px 40px;//第一个是指上,接下来顺时针准一圈
padding: 10px 20px;//上下,左右
如果是三个值,会自动对称的。

margin
外边距
margin-top、margin-right、margin-bottom、margin-left
缩写:margin
//margin会折叠,两个盒子相邻会折叠。margin是指在**px内是不能够放东西的。
//margin可以为负数,是指可以重叠的部分

box-sizing//兼容性到ie8以上,可以让它继承,改变页面的计算方式
改变盒模型计算方式,改变width和height指定的是包含borderpadding还是content。
取值:border-box | content-box
初始值:content-box

border

边框的三个要素
border-width: <length> | thin | medium | thick
border-style: none | solid | dashed | dotted | double
border-color: <color>
四个方向
border-left
border-top
border-right
border-bottom

不同的写法
border-width: 1px 2px;
border-left-width: 3px;
border-left: 1px solid #ccc;
border: 1px solid #ccc;

min-width & max-width
设置最大最小宽度
用户输入无法控制的时候,可以使用这个进行控制显示

article {
    line-height: 1.7;
    max-width: 40em;
    min-width: 20em;
    font-family: serif;
  }
  article {
    line-height: 1.7;
    max-width: 40em;
    min-width: 20em;
    max-height: 10em;
    font-family: serif;
  }

overflow
//内容超出控制的时候怎么处理。默认visible,但是不占用空间
//可以写overflow-x或者overflow-y
溢出控制
取值:visible | hidden | scroll | auto//auto是滚动条随着内容变化而变化
初始值:visible

视觉格式化窗口

视口(Viewport)
浏览器的可视区域
用户通过视口查看网页内容(透过窗户看风景)

块级元素(Block-level Elements)
//占满整行的元素
会被格式化成块状的元素
例如 p、div、section 等
将 display 设置为 block、list-item、table 使元素变为块级

行级元素(Inline-level Elements)
不会为其内容生成块级框
让其内容分布在多行中
display 设置为 inline、inline-block、inline-table 使元素变为行级

盒子的生成
每个块级元素生成一个主块级盒(principal block-level box),用它来包含子级盒
每个行级元素生成一个行级盒,行级盒分布于多行

Box Model - revisited
margin:行级盒的 margin-top 和 margin-bottom 不会产生效果
padding:行级盒的 padding-top 和 padding-top 不影响行布局

块级盒子中的子盒子的生成
块级盒子中可以包含多个子块级盒子
也可以包含多个行级盒子
不在行级元素里面的文字,会生成匿名行级盒。比如

 <p>Some <em>Text</em></p>
块级盒子中不能同时包含块级和行级盒子。遇到这种情况时,会生成匿名块级盒来包含行级盒。比如 <div><h1>标题</h1><span>2016-12-12</span></div>

行级盒子内的子盒子的生成
行级盒子内可以包含行级盒子
行级盒子包含一个块级盒子时,会被块级盒子拆成两个个行级盒子,这两个盒子又分别被匿名块级盒包含

display属性
block 生成块级盒
inline 生成行级盒
inline-block 生成行级盒,为其内容生成块级盒
//inline-block外面是inline的格式,里面的内容是block形式,可以设置宽高
none 在排版时将元素忽略
//排版时完全看不见,用来控制显示,也不占用位置

visibility
//会占位置
控制元素展示
取值:visible | hidden | collapse
初始值为 visible

Generated Content
//在不认为其为内容的时候,只是装饰或者辅助作用的时候,可以使用,不占用标签内容
//用来产生盒子
控制元素
::before 和 ::after
content

<a href="http://example.com">访问链接</a>

<style>
  a::before {
    content: '\2693'
  }
  a::after {
    content: '(' attr(href) ')';
  }
</style>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9041次
    • 积分:491
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:1篇
    • 译文:0篇
    • 评论:1条
    文章分类
    最新评论