盒子模型
所有的元素都是盒子,设置盒子矩形元素的大小和位置完成布局
content,padding,border决定盒子大小,margin决定盒子位置
边框/border
至少设置三个属性
border-width:宽度
border-color:颜色
border-style:样式/solid(实线)/
边框大小影响盒子大小
内边距/padding
padding-top/left/bottom/right
内边距影响盒子大小,元素的背景颜色会撑满盒子,包括内边距,可以通过设置子元素100%撑满父元素再设置颜色解决
外边距/margin
margin-top/left/bottom/right
margin-top:上外边距,设置正值元素向下移动
margin-left:左外边距,设置正值元素想右移动
margin-bottom/right:移动下边或者右边的元素
margin可以设置负值,元素向相反的方向移动
外边距不会影响盒子大小,影响盒子位置,影响盒子实际占据网页大小
盒子水平布局
元素水平方向布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定
margin-left+border-left+padding-left+width+padding-left+border-right+margin-right
一个元素在其父元素中水平布局必须满足以下等式
margin-left+border-left+padding-left+width+padding-left+border-right+margin-right=父元素内容区宽度(必须满足)
auto
在不满足时,若没有属性设置auto,浏览器会自动调整margin-right属性使其结果满足等式
若有设置auto值得属性,将调整带有auto的属性来满足等式
width的值默认为auto
将width设置一个固定的值,左右外边距设置为auto,实现元素水平居中
盒子垂直方向布局
子元素是在父元素的内容区中排列的,如果子元素的额大小超过了父元素,则子元素会从父元素溢出,使用overflow属性设置父元素处理溢出的子元素
overflow
可选值:visible:默认值,子元素仍会溢出
hidden 溢出内容会被隐藏,不会显示
scroll 生成两个滚动条,通过滚动条查看内容
auto 根据需要生成滚动条,那个方向需要就在那个方向生成
垂直外边距折叠
两个要素:相邻的垂直方向外边距会发生重叠现象(相邻和重叠)
兄弟元素
兄弟元素之间的相邻垂直外边距会取两者之间的较大值(两者都为正值),如果有一方负值,取相加的值,两者都为负值,取绝对值较大的,兄弟元素外边距重叠对于开发有利,不需要处理
父子元素
父子元素之间的相邻外边距,子元素的会传递给父元素(上外边距),会影响布局,需要进行处理,可以让其外边距不相邻,或者不适用外边距
1.使用父元素padding属性将子元素挤下去
2.将父元素设置边框,让父子元素外边框不重叠
注意:两种方式都会使父元素的大小被改变,需要计算减去
块级元素/ 行内元素
行内元素
行内元素不支持设置宽高,内容区的大小是由内容本身撑起来的
行内元素可以设置padding,margin,border,垂直方向不会影响页面布局
display:none 空,不显示
inline 行内元素
block 块元素
inline-block 行内块
visibility:visible 正常显示
hidden 隐藏元素,但是在页面中正常占据位置
默认样式
清楚默认样式
*{margin:0,padding:0}
引入默认样式清除CSS样式文件
盒子大小的设置
box-sizing:用来设置计算盒子尺寸的计算方式,可选值:
content-box:默认值,宽度和高度用来设置内容区的大小
border-box:宽度和高度用来设置整个盒子可见框的大小