鹊yr

导航

< 2024年12月 >
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4
5 6 7 8 9 10 11

统计

理解盒模型

盒子的分类
不同元素产生不同的盒子类型可能不同,一个元素产生什么样的盒子取决于css的display属性
- 属性:display
- 是否能继承:否
- 默认值:inline

盒子的组成
- margin:外边距(与其他的盒子的距离)
- border:边距
- padding:内边距(边框与内容之间的距离)
- cotent:内容(内容的宽度与高度)
margin
表示边框和相邻盒子的距离分为上(top)右(right)下(bottom)左(left)四个方向
>
> div{
>            margin-top :  10px ;
>      }
margin-top   上外边距 /  不可继承  /  默认值:0px


- margin有1个数值:上下左右
- margin有2个数值:上下 / 左右
- margin有3个数值:上 / 左右 / 下
- margin有4个数值:上 / 右 / 左 / 下

border 边框
分割内部和外部的界限,上(top)右(right)下(bottom)左(left)。
- 上边框的样式
> border-top-style
> 不可继承 ;默认none 
> solid  实线 / dashed   虚线  /  dotted  点阵 / double 双实线

- 上边框的厚度
> border-top-width
> 默认值 medium  /  一般用px ;em

- 上边框的颜色
> border-top-color
缩写 :border-top  (厚度 样式 颜色)
padding

表示边框和内容盒子的距离分为上(top)右(right)下(bottom)左(left)四个方向
>
> div{
>           padding-top :  10px ;
>      }
padding-top   上外边距 /  不可继承  /  默认值:0px


- padding有1个数值:上下左右
- padding有2个数值:上下 / 左右
- padding有3个数值:上 / 左右 / 下
- padding有4个数值:上 / 右 / 左 / 下
content
width
height
子盒子
边框盒 border-box 由border,padding,content 组成
1. 浏览器调试时,页面中显示的页面尺寸
2. 元素的背景,默认覆盖边框盒(元素的背景色,从边框盒开始渲染)
3. background-clip 设置背景色的渲染区域

填充盒子 由padding ,content 组成
1. 溢出overflow 指填充盒的溢出

内容盒子 由content组成
outline 不占像素,但无样式。

posted on   鹊yr  阅读(84)  评论(0编辑  收藏  举报

点击右上角即可分享
微信分享提示