css学习之盒子模型

css学习之盒子模型

网页定位的三大特性分别为:

盒子模型 浮动 和定位

网页布局的过程

1.先准备好相关的网页元素,网页元素基本都是盒子

2.利用css设置好盒子样式 ,然后摆放到相应位置.

3.往盒子里装内容.

盒子模型的组成

border 边框 content 内容 padding 内边距 margin 外边距

css盒子模型本质上是一个盒子 封装周围的html元素 包括 边框 外边距 内边距 和实际内容

边框(border)

border可以设置元素边框 边框组成:边框宽度(粗细) 边框样式 边框颜色

语法:

boeder : borde-width

border -style 边框样式 常用:soild 实现边框 double 双线边框 dottred 电线 dshed 虚线

border-color:pink 颜色

边框简写:

border:1px solid red; 边框的简写没有顺序

border-top :1px solid red ; (只设置上边框的样式)

border -collapse:collapse 细线边框 合并相邻的单表格

内边距

padding :即边框与内容之间的距离

padding-left/right/top/bottom/

给了padding属性后,会发生两件事;

1.内容和边框有距离.

2.盒子大小改变

3.为了保证盒子跟效果图一样,wight/hight减去相应的值.

外边距

margin 属性用于设置外边距 即控制盒子和盒子之间的距离.

属性:

margin-left/top/right/bottom

margin auto 水平居中对齐

为神魔会出现垂直合并塌陷的问题
在父子关系的盒子中,子级的盒子无论如何改变marign或padding值都不会改变盒子的位置
这是因为无法定位父子级盒子的边界.

解决办法 ;
1.为父级盒子设置边框
2.为父级盒子设置内边距
3.在父级盒子样式中添加overflow:hidden