盒子模型

Posted 2021-01-26 tangdiying

1、内容--宽度：width；单位px、百分比（继承）、em、rem；
高度：height；单位px、百分比（继承）、em、rem；
背景--背景色：background-color；颜色单词、十六进制表示法、rgb、rgba；
背景图片：background-image:url(路径)；
背景图片重复：background-repeat；no-repeat(不重复)、repeat-x（水平重复）、repeat-y（垂直重复）、repeat（水平垂直重复、默认）；
背景定位：background-position：left、center、right、top、center、bottom、具体的数值（单位px）
背景连写：background：背景颜色 背景图片 背景图片重复 背景定位；可以只单写某一个属性；

2、填充：上填充--padding-top
下填充--padding-bottom
左填充--padding-left
右填充--padding-right
填充连写--padding：1个值--》上、右、下、左全部是这个值；
2个值--》第一个值表示上下，第二个值表示左右；
3个值--》第一个值表示上，第二个值表示左右，第三个值表示下；
4个值--》依次为上、右、下、左；（顺时针方向）
注意：padding会改变盒子的大小，要想在添加padding的同时保持盒子的大小不变，应将padding的值从盒子的大小中减去；

3、边框：边框粗细--border-width
边框颜色--border-color
边框样式--border-style：solid（实线）、dashed（虚线）、dotted（点线）
边框连写--border：width style color;
可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right
注意：边框的对齐方式为向外对齐，所以边框会改变盒子大小；

4、外边距：上边距--margin-top
下边距--margin-bottom
左边距--margin-left
右边距--margin-right
外边距连写--margin：1个值 2个值 3个值 4个值（参照padding）；

默认文档流布局下，父子上边界共用问题？
解决：1、使用padding；
2、给父级使用border；
3、给父级添加属性--overflow：hidden；
4、浮动；
5、定位；

外边距塌陷：在垂直方向上上下边距会合并，取最大值；

盒子水平居中：margin：0 auto；

样式的继承：width、color、font-、text-、line-height都可以被继承；

<ins></ins>下划线标记

<del></del>删除线标记

文本修饰：text-decoration--underline；下划线
line-through；删除线
none；无/没有修饰；

文本对齐：text-align--left；左对齐
center；居中对齐
right；右对齐

文本缩进：text-indent；指的是文本的首行缩进；
单位px、em；

行高：line-height--用于设置一行文本的高度，常用于设置一行文本在容器当中垂直居中；
单位：1、px；
2、百分比；基于文字大小的百分比，“%”前必须是整十，如：150%、200%
3、em；相对单位，同样是基于文字大小；如：1.5em、2em；
4、没有单位；a--没有继承的情况下，相当于em；
b--在有继承的情况下：
i、父级的行高有单位em，则会先计算好行高，然后将行高的数值直接继承给子级，子级本身不会再计算行高；
ii、行高没有单位，则父级会直接将行高继承给子级，然后子级根据行高值自行计算行高；

font连写--font：样式/粗细 大小 格式；大小和格式必须都有，缺少任何一个都不行；

元素的显示方式：
1、块级--block；独占一行，支持宽高；
2、行内--inline；和其他行内元素在一行显示，不支持宽高；
3、行内块级--inline-block，既有行内元素特性，又有块级元素的特性；同样在一行中显示，并且支持宽高；
display:block/inline/inline-block；
以上为默认文档流（标准文档流）下的情况；

在有链接的情况下，a标记无法继承父级的color样式；