盒子模型
2016-10-26 20:27
363 查看
一个盒子主要属性就5个:width,height,Padding,margin,border。
width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。
height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距
真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding
认识padding
padding内边距,padding背景颜色一定和内容区域一样的,background-color将填充border以内所有的区域
认识margin
margin-top,margin-right,margin-bottom,margin-left,(这四个属性使用的时候与float会相互影响,可以使用clear:both,清除浮动)
margin:0 auto(这个盒子居中,不是居中文本,必须是有明确width)
小结:padding本质上指父子关系,margin是兄弟的关系
认识border
边框的三要素:粗细、线性、颜色
dashed、dotted、solid、double、groove、ridge、inset、outset
延伸:
HTML将标签分为容器级和文本级
容器级有:div,h,li,dt,dd......
文本级:a,p,em,b,u,i,span......
CSS将标签分为块级元素和行内元素
块级元素:
1.霸占一行,不能与其他任何元素并列
2.能接受宽、高
3.如果不设置宽度,那么宽度将默认变为父亲的100%。
行内元素:
1.与其他行内元素并排
2.不能设置宽、高。默认的宽度,就是文字的宽度。
Display:”显示模式”,用来修改元素的行内、块级的性质
Inline就是“行内”
一旦给当前一个便签设置 display:inline 这个标签立刻改变为行内元素与span类似没有区别
一旦给当前一个便签设置 display:block 这个标签立刻改变为块级元素与div类似没有区别
width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。
height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度
padding是“内边距”的意思
border是“边框”
margin是“外边距
真实占有的宽度 = 左边的border +左边的padding + width +右边的border +右边的padding
认识padding
padding内边距,padding背景颜色一定和内容区域一样的,background-color将填充border以内所有的区域
认识margin
margin-top,margin-right,margin-bottom,margin-left,(这四个属性使用的时候与float会相互影响,可以使用clear:both,清除浮动)
margin:0 auto(这个盒子居中,不是居中文本,必须是有明确width)
小结:padding本质上指父子关系,margin是兄弟的关系
认识border
边框的三要素:粗细、线性、颜色
dashed、dotted、solid、double、groove、ridge、inset、outset
延伸:
HTML将标签分为容器级和文本级
容器级有:div,h,li,dt,dd......
文本级:a,p,em,b,u,i,span......
CSS将标签分为块级元素和行内元素
块级元素:
1.霸占一行,不能与其他任何元素并列
2.能接受宽、高
3.如果不设置宽度,那么宽度将默认变为父亲的100%。
行内元素:
1.与其他行内元素并排
2.不能设置宽、高。默认的宽度,就是文字的宽度。
Display:”显示模式”,用来修改元素的行内、块级的性质
Inline就是“行内”
一旦给当前一个便签设置 display:inline 这个标签立刻改变为行内元素与span类似没有区别
一旦给当前一个便签设置 display:block 这个标签立刻改变为块级元素与div类似没有区别
相关文章推荐
- 盒子模型补充
- CSS样式----盒子模型(图文详解)
- 《css设计彻底研究》读书笔记之 盒子模型
- 盒子模型,块级元素和行内元素特性与区别
- CSS框模型(盒子模型)padding与border属性
- [CSS]标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
- CSS之盒子模型
- 标准W3C盒子模型和IE盒子模型
- 解决加padding后盒子模型变大的问题
- 盒子模型及DOCTYPE文档类型
- ie 盒子模型和标准 w3c 盒子模型
- 盒子模型
- CSS 盒子模型,绝对定位和相对定位
- 从零开始学 Web 之 CSS(三)链接伪类、背景、行高、盒子模型、浮动
- 深入理解盒子模型,计算各个元素之间的距离
- 样式表三种使用方式和盒子模型
- (3)CSS样式——盒子模型
- 训练营第四天作业 - 用盒子模型制作卡片
- css复习整理(三):盒子模型