本文由编者通过观看尚硅谷关于盒模型的视频的笔记总结,希望能帮助到大家。
盒模型
又称为盒子模型、框模型(形状为矩形),是CSS的重要组成部分,我们可以通过对盒模型的摆放从而得到我们想要的排版。
盒模型的组成
1.内容区(content)
2.边框(border)
3.内边距(padding)
4.外边距(margin)
如下图:
盒子可见框的大小:
1.内容区
2.内边距
3.边框
盒子示例
.box1{
width:200px;
height:200px;
background-color:black;
border-width:200px;
border-height:200px;
border-style:solid;
border-color:red;
padding-top:200px;
padding-left:200px;
padding-bottom:200px;
padding-right:200px;
margin-top:200px;
margin-left:200px;
margin-bottom:200px;
margin-right:200px;
}
background-color:盒子背景颜色
内容区
width:盒子内容区的宽度;(默认值:auto)
height:盒子内容区的高度;
边框(border)
border-width:盒子边框的宽度(可以不写,其含有默认值)
border-height:盒子边框的高度
border-style:边框的样式
可选值:
solid实线
dotted点状虚线
dashed虚线
double双线
border-color:边框的颜色 默认值(黑色)
内边距(padding)
内容区与边框之间的距离是内边距
内容区的背景颜色会延伸到内边距之中
共有四个方向内边距:
padding-top:上
padding-left:左
padding-bottom:下
padding-right:右
外边距(margin)
会影响盒子的大小
margin-top:上;
margin-left:左;
margin-bottom:下;
margin-right:右; 默认情况下不会产生任何的影响(原因在的盒模型的水平布局)
设置一个正值 往设置的反方向走
设置一个负值 往设置的方向走
挤自己
margin-top
margin-left
挤别人
margin-bottom
margin-right
通用
{以下border padding margin的属性皆适用}
下面以以border-width 为例
可以同时设置四条边框的宽度 当输入
四个值 上右下左 顺时针
三个值 上 左右 下
两个值 上下 左右
一个值 全部
或者可以通过border-xxx-width来直接设置其中一条边框 上(top) 下(bottom)左(left) 右(right)
简写属性
border 可以同时设置边框所有的相关样式
border-xxx 设置其中一条边框的相关形式
盒模型的水平布局
元素在其父元素中水平方向的位置右以下几个属性共同决定:
margin-left border-left padding-left width padding-right border-right margin-right=其父元素内容区的宽度
该等式必须成立,若等式不成立,则称为过渡约束,那么浏览器会自动调整margin-right使其满足。
以上七个值中 width margin-left margin-right三个值可以设置为auto
如果某个值设置为auto,那么它会代替margin-right自动调整使等式成立(如果前六个大于盒子宽度,那么margin-right将被设置为负值使其满足)
不同的设置:
如果将一个宽度和一个外边距设置为auto,那么宽度会调整到最大,另一个auto将会为0
如果将三个值设置为auto,则外边距为0,宽度最大
如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的大小(常用居中办法)
.juzhong{
width:xxxpx;/*第一步设置盒子内容区宽度*/
margin:0 auto;/*第二步设置盒子的上下外边距 以及让左右外边距为auto*/
}
盒模型的垂直布局
默认情况下父元素被内容撑开
如果父元素设置了高度
-如果子元素的大小超过了父元素,则子元素会从父元素中溢出
可以通过使用overflow来设置父元素中溢出的内容
可选值:
visible 默认值,溢出,在父元素外部显示
hidden 一处内容将会被裁减,不显示
scroll 生成两个滚动条,通过滚动条来查看完整内容
auto 根据需要生成滚动条
overflow-x:水平方向设置 overflow-y:垂直方向设置
外边距的折叠(重叠)
-相邻的垂直方向外边距会发生重叠现象
兄弟元素:
兄弟元素之间的相邻垂直外边距会取两者之间的最大值(两个都是正值)
如果一正一负,则两者相加 如果两者都负,取两者之间绝对值大的
父子元素:
-父子元素间的相邻外边距,子元素会传递给父元素,会影响页面的布局(不利于页面布局)
行内元素(内联元素)的盒模型
-行内元素不支持设置宽高,被内容撑开
-行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
-行内元素可以设置border,垂直方向的border不会影响页面布局
如果要通过宽高设置其大小,可以通过display用来设置元素显示的类型
可选值:inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block将元素设置为行内块元素(可以设置宽高而且不会独占一行)
none 元素不在页面显示(用于隐藏元素 可以与hover一起使用)不占用页面位置
还可以通过visibility 用来设置元素的显示状态:
可选值:visible 默认值 元素在页面中正常显示
hidden 元素在页面中隐藏,不显示,但是依然占据页面的位置