一、盒子模型
组成部分(从内向外)
内容区
content:放内容的
内边距
padding:设置内容与边框的距离
padding:上 右 下 左;
值:top:上内边距
right:右内边距
botton:下内边距
left:左内边距
可通过top,right,bottom,left单独设置内边框距离
边框
border:区分盒子内外
border-style:上 右 下 左;
值:solid:实线
dashed:虚线
double:双线
dotted:点线
可通过top,right,bottom,left单独设置边框样式
外边距
margin:设置元素与元素之前的距离,设置元素位置
用法与padding基本一致
box-sizing
设置盒子尺寸,设置width,height作用的对象
默认值:content-box:内容盒
border-box:边框盒 设置的宽高=border+padding+content
6.分类
盒子模型的分类有两种:
①标准盒子/W3C盒子:元素默认设置的宽高指内容区域
②IE盒子/怪异盒子:元素默认设置的宽高指内容区域+内边距+边框
二、显示与隐藏
两种方法:
①display:
值:none(隐藏)
block(显示)
②visibility:
值:hidden(元素不可见)
visible(元素可见)
两者的区别是display设置隐藏时不占用原来的位置,visibility设置隐藏时占用原来位置