html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

html/css  盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

html/css  盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)作者:王可利(Star·星星)

width     是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度。

Height    是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度

Padding  是“内边距”的意思

Border    是“边框”

Margin    是“外边距”

html/css  盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)

真实占有的宽度 = 左边的border +左边的 padding + width +右边的border +右边的padding;

认识->padding padding

内边距,padding背景颜色一定和内容区域一样,background-color将填充border以内所有的区域

padding-right:10px;

padding-left:20px;

padding-top:30px;

padding-bottom:40px;

认识->margin

margin-left:100px;

margin-top:100px;

margin-right;100px;

margin-bottom:100px;注意:使用的时候与float会有相互的影响,可以使用clear:both,清除浮动

margin:0 auto   这个盒子居中,不是居中文本,必须是有明确width padding本质上指父子关系,margin是兄弟关系

border 边框的三要素:粗细。线性、颜色 dashed、dotted、solid、double、groove、ridge、inset、outset

浮动FLOAL

注意清楚float的方法:

1. clear:both(表示当前自己内部的元素不受其他盒子的影响)

2. overflow:hidden(超出范围内就隐藏)

3. 浮动的元素,只能被有高度的盒子高度,就是说,如果盒子内部有浮动,那么浮动就会在一定的范围内互相影响(加高方法)

上一篇:openstack neutron


下一篇:前端读者 | 前端构建工具Gulp