刚开始写博客,排版不是很好被吐槽,看来我需要好好整理学习一下排版了
今天主要学习盒子模型(一种思维方式,万物皆盒子)
盒子模型
由四部分组成,内容content,边框,borter,内边距,padding,外边距,margin
下面我们就依次来介绍一下
一.内容:content
内容自然就是我们的文本,理解性记忆就好
二.边框:borter
1.属性
边框的宽度border-width:数字+px;
边框的样式borter-style:取值;solid实线,bashed虚线,dotted点线(其中solid最常用)
边框的颜色borter-color:颜色;可以为关键字,也可以为#加16进制的颜色
2.连写形式(最常用,一定要记得)
border:10px solid red;代表为,边框宽度为10的颜色为红色的实线
注意点:书写顺序不要变,也不要省略
层叠问题,把单独的样式写出来
3.给单方向设置border
border-方位名词:数字+px;
上:top;右:right;下:bottom;左:left;
4.细线表格(合并边框)
border-collapse:collapse;
border会撑大盒子
三.内边距,padding
盒子边框与内容之间的距离
padding:数字+px;
1.取值(记忆方法,先从上开始赋值,然后顺时针赋值,如果没有赋值就看对面的)
一个值:上右下左
两个值:上下和左右
三个值:上,左右和下
四个是:上右下左
2.给单方向设置padding
padding-方位名词:数字+px;
上,top;右,right;下,bottom;左,left
盒子大小的计算公式
组成部分:border+padding+内容
自动内减(记住哦)
box-sizing:border-box;
四.外边距margin
盒子与盒子之间的距离
1.取值(记忆方法,先从上开始赋值,然后顺时针赋值,如果没有赋值就看对面的)
一个值:上右下左
两个值:上下和左右
三个值:上,左右和下
四个是:上右下左
2.给单方向设置margin
margin-方位名词:数字+px;
上,top;右,right;下,bottom;左,left
3.margin单方向的应用
上下应用
margin-top;让盒子下移
margin-bottom;让下面的盒子下移
左右应用
margin-left;让盒子右移
margin-right;让盒子左移