一、定义
1、内容区 (content): 元素中所有的
2、边框(border) :元素设置边框
3、内边距(padding):指的是盒子的内容和边框之间的距离
4、外边距(margin):决定是当前盒子和其他盒子的距离 (盒子可见框大小)
二、布局
1、水平布局
2、垂直布局
三、样式
1、行内元素的盒子
2、默认样式的去除
3、轮廓与圆角
四、box-sizing拯救布局
一、定义
盒子模型 :盒模型、框模型(box model)
css将页面汇总所有的元素的都设置为一个个矩形的盒子。将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置,每一个盒子,都有以下几个部分。
内容区(content):元素中所有的
边框(border):元素设置边框
内边距(padding):指的是盒子的内容和边框之间的距离
外边距(margin):决定是盒子和盒子的距离 (盒子可见框大小)
1、内容区 (content): 元素中所有的
使用width设置盒子内容区的宽度
使用height设置内容的高度
width和height只是决定内容区的大小,而不是盒子的整个大小
2、边框(border) :元素设置边框
边框属于盒子的边缘,边框里面是内容,出了边框就是盒子的外部。
边框的大小会影响我们盒子的大小
设置边框必须指定三个样式:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框的样式
(1)border-width:设置边框的宽度(粗细程度)。
值 说明
thin 设置细的边框
medium 默认值,设置中等的边框,一般的浏览器将其解析为2px
thick 设置粗的边框
像素值 具体的数值,用于自定义边框的宽度
可以分别设置四个边框的宽度
如果设置四个值 上 右 下 左
设置三个值 上 左右 下
设置两个值 上下 左右
设置一个值 上下左右
border-xxxx-width 可以设置某一边框的宽度
(2) border-color:浏览器默认的是黑色。和边框宽度,样式一样,可分别设置。
border-xxxx-color 可以设置某一边框的颜色
(3)border-style:设置边框的样式 设置边框的必选项(必须设置)
可选值: none 默认值 没有边框
solid 实线
dashed 虚线
double 双线
dotted 点线
border-xxxx-style 可以设置某一边框的样式
注意:border 的简写方式 参数:width color style 顺序都可以
可以分别设置四边边框,border-left等。
3、内边距(padding):指的是盒子的内容和边框之间的距离
一共有四个方向:padding-top
padding-right
padding-left
padding-bottom
eg:
padding: 10px 20px 30px 40px;
上右下左
规则和boder-width一样
注意:内边距会影响盒子的可见框的大小,元素的背景色会延伸到内边距。
盒子的大小是由内容区,内边距和边框共同决定。
4、外边距(margin):决定是当前盒子和其他盒子的距离 (盒子可见框大小)
外边距不会影响盒子可见框的大小,而是影响的是盒子的位置
盒子有四个方向的外边距
margin-top 上边距,可设置正值,元素会向下移动; 也可以设置负值,元素向上移动
margin-right 默认情况下不会产生效果
margin-bottom 下外边距,设置一个正值,其下面的元素会向下移动,挤别人
margin-left 左外边距 设置正值,元素向右移动
处置外边距的重叠:在网页中相邻的垂直方向的外边距,会发生重叠。
兄弟之间的重叠,会取最大值,不会取和,谁大听谁的
特殊情况:如果一正一负,取两者之和
如果两负,则取绝对值最大的
兄弟的外边距重叠问题,一般不解决
父子之间的外边距重叠
如果父子元素的垂直外边距相邻了,则子元素的外边距会传递给父元素
暂时解决方案:不用外边距;
不相邻
总结:由于页面中的元素默认下是靠左靠上摆放,所以当我们设置上外边距和左外边距的时候,盒子自身位置会发生改变。如果设置右边距和下外边距,会改变其他盒子的位置(挤别人)。
二、布局
1、水平布局
元素的水平布局有几个属性共同决定。
margin-left border-left paddin-left width padding-right border-right margin-right
一个元素在其父元素中,水平方向的等式
margin-left + border-left + paddin-left + width + padding-right + border-right + margin-right = 父元素宽度
0 + 0 + 0 + 100+ 0 + 0 +0=400 ??
以上等式满足,如果不满足,则浏览器会自动调整,这个叫过度约束。
浏览器调整
1、如果七个值没有 auto ,那么浏览器会自动调整 margin-right 使我们等式满足
2、这七个值,width,margin-left,margin-right 可以设置 auto
如果有设置auto,浏览器会自动调整auto的值。
如果设置margin-left为auto,
例子: 300 +0+0+100+0+0+0=400
3、如果同时设置width margin 为auto,只调整width宽度。
4、如果设置宽度固定,设置margin为auto,
则两边的外边距会设置为相同的值,让元素在父元素中居中。
2、垂直布局
垂直方向 :1、不设置高度,默认被内容撑开
2、设置了,就听设置
元素如果溢出: overflow 处理溢出内容
可选值:
visible 溢出的内容会正常显示
hidden 溢出的内容会被裁减,不会显示
scroll 出现双侧滚动条
auto 根据溢出内容,出现滚动条
相关的属性:overflow-x、overflow-y
三、样式
1、行内元素的盒子
(1)不能设置宽高
(2)padding可以设置,但不会改变页面垂直的布局
(3)border可以设置,也不会改变页面垂直的布局
(4)可以设置水平方向的外边距,垂直方向的不生效
两个行内元素的水平外边距,不会重叠,而是求和。
display 属性: 用来设置元素的显示类型。
可选值:
block 将元素设置为块元素
inline 将元素设置为行内元素
inline-block 行内块元素(即可设置宽高,也不会独占一行)
none 将元素隐藏
table 将元素设置为一个表格
2、默认样式的去除
默认样式: 浏览器为了在页面中没有样式的时,也可以有一个比较好的呈现,所以给很多元素设置默认的padding,margin等等。正常这些样式我们都不用,因为不同浏览器显示的效果不一定。
(1)手动输入
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
(2)引入重制样式表
<link rel="stylesheet" href="./.css">
3、轮廓与圆角
(1)轮廓
box-shadow 设置元素的阴影效果,不会影响到页面的布局
参数:
1、水平偏移量 可正可负 必填 正->负
2、垂直偏移量 可正可负 必填
3、模糊半径 可填
4、颜色 一般用rgba
(2)圆角
border-radius: 设置圆角
可以写四个值 ,四个属性值顺序 : 左上 右上 右下 左下
3个 左上 右上左下 右下
2个 左上右下 右上左下
1个 共用
以10px为半径画圆,以40px为半径画圆
border-radius: 10px 40px;
设置圆形: border-radius: 50%;
给单独一角设置圆角:
border-top-left-radius: 50px;
border-top-right-radius: 50px;
四、box-sizing拯救布局
默认情况,盒子的大小是由内容区,边框,内边距共同决定。
盒子模型尺寸
内盒总尺寸=border(上下/左右)+padding(上下/左右)+ 内容宽度
外盒总尺寸=border(上下/左右)+padding(上下/左右)+ margin(上下/左右) + 内容宽度
可以通过box-sizing 用来设置盒子尺寸的计算方式 也就是width,height指的是谁。
box-sizing可选值:
content-box 内容区 默认值
border-box 宽高设置的就是整个可见框的大小 包含内容区,边框,内边距
Inherit:此值使元素继承父元素的盒子模型
作业展示