盒子模型的概念
在网页中"一切皆盒子"。css处理网页时,它认为每个元素都包含在一个不可见的盒子里!
一个盒子有:内容区(content),内边距(paading),边框(border),外边距(margin)
1,内容区(content)
- 通过width和height两个属性可以设置内容区的大小
2,内边距(padding)
- padding:上 右 下 左;
- 在css中还有paading-top,padding-right,padding-left,padding-bottom分别用来指定四个方向的内边距
3,边框(border)
- boeder:大小 颜色 边框样式;
- 也可使用border-top/left/right/bottom来分别指定四个方向的边框
4,外边距(margin)
- 用法和badding类似!
- 当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,margin:0 auto;可以是元素居中。
display:修改元素的性质
可选值:
- block:设置元素为块元素
- inline:设为行内元素
- inline-block: 设置为行内块元素
- none:隐藏元素(元素将在页面中完全消失)
visibility:是否隐藏元素
可选值:
- visible:可见的
- hidden:隐藏的
overflow:控制内容溢出的情况
可选值:
- visible: 默认值
- scroll:添加滚动条
- auto:根据需要添加滚动条
- hidden:隐藏超出盒子的内容
文档流的概念:
文档流指的是文档中可现实的对象在排列时所占用的位置。
浮动:float 指的是元素脱离文本流,在父元素中浮动起来
可选值:
- none:不浮动
- left:向左浮动
- right 向右浮动
当一个元素浮动以后将会自动变为一个块级元素,并且不能在改变!
浮动元素不会改变父元素的高度!
网友评论