您的位置：首页 > Web前端

前端学习笔记(四) - 盒子模型及其相关

2019-03-31 15:55 441 查看

盒子模型(Box model)

简介
- 故css在处理网页布局的时候可以看做是在摆放一个又一个的盒子
- 一个盒子可以分为四个部分内容区(content),内边距(padding),边框(border),外边距(margin)

边框(border):三个样式缺一不可

属性	效果	可选值
boder-width	边框宽度	css长度单位
boder-xxx-width	边框宽度	boder-left/right/top/bottom-width ,同上
boder-color	边框颜色	css颜色单位
boder-xxx-color	边框颜色	boder-left/right/top/bottom-color ,同上
boder-style	边框样式	solid(实线)，dashed(虚线)，dotted(点状)，double(双线)详见boder-style 属性

boder-xxx

上述规则适用于同类所有属性

以上属性简写样式：
```
border:10px red solid ;
```
,以上属性没有顺序，但每次指定都是四个边的值，
```
boder-top
```
，
```
boder-bottom
```
，
```
boder-left
```
，
```
boder-right
```
可分别对四条边设置属性，同
```
boder
```

内边距(padding):指的是盒子的内容区和盒子边框之间的距离，内边距会影响可见框的大小，内容区的背景效果会延伸到内边距，属性值，
```
padding-top
```
，
```
padding-bottom
```
，
```
padding-left
```
，
```
padding-right
```
，表示上下左右边距，简写
```
padding: ;
```
，规则同
```
boder-width
```
外边距(margin):不会影响盒子可见框的大小，但是会影响盒子的位置，类似内边距，属性值有
```
margin-top
```
,
```
margin-bottom
```
,
```
margin-left
```
,
```
margin-right
```
,其中的值可以设置为正值也可以设置为负值，也可以设置值为
```
auto
```
，将
```
margin-left/right
```
其中一个设置为auto则取当前可能最大值，如果两者均取值为
```
auto
```
则在父元素中居中，同样类似与
```
padding
```
可以使用简写
浏览器对于每个元素即使没有样式,也会设置
```
margin
```
和
```
padding
```
的默认值，可以通过统配选择器
```
*{ margin: 0; padding: 0;}
```
清除，但是效率不高
块元素内边距，外边距和边框均可以设置。但是对于内联元素，不能设置
```
width
```
和
height
，不支持垂直外边距，水平外边距可以设置，两个元素之间的水平外边距求和布局，而非取最大值。可以设置水平内边距，亦可以设置垂直内边距，但是垂直内边距变化不会影响布局，边框同内边距。
```
display
```
属性:通过改变
```
display
```
属性的值可以改变内联元素为块元素，值有
```
inline
```
(内联元素)，
```
block
```
(块元素)，
```
inline-lock
```
(行内块元素)，
```
none
```
(隐藏元素，不可见)；
```
display: none;
```
与
```
visibility: hidden
```
相比，前者隐藏元素的时候直接在布局时不显示，但是后者仍然占有布局位置，只是元素不显示
```
overflow
```
属性:设置子元素溢出父元素时溢出的内容如何显示，可选值：
```
visible
```
(溢出内容显示到父元素外),
```
hidden
```
(溢出内容不显示)，
```
scroll
```
(不管是否溢出都加水平和垂直滚动条),
```
auto
```
(智能模式，若溢出则显示滚动条，那个方向溢出显示那个方向的滚动条)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航