一、盒子模型
盒模型: 是CSS的基石，指定标签如何显示。它规定了网页元素如何显示以及元素间相互关系。 页面上的每个元素都被当成一个矩形盒子、占据一定的页面控件，这个盒子由内容(content)、内边距(补白/填充/padding)、边框(border)和外边距(margin)组成；
【padding一般用于调整内容位置，margin一般用于调整盒子位置】
二、填充padding
填充:
padding，在设定页面中一个元素内容到元素的边缘(边框)之间的距离，也称之为补白；
用法:
> 用来调整内容在容器中的位置关系;
> 用来调整子元素在父元素中的位置关系;
注: padding属性需要添加在父元素上;
> padding值是额外加载元素原有大小之上的，如果想要保证元素大小不变(盒子大小)，即元素宽高上减去添加的padding属性值;
说明：
可单独设置方向填充，如：
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
属性值的4种方式：
四个值：上 右 下 左 { padding: 10px 20px 30px 40px; } 注: 起点在12,顺时针方向
三个值：上 左右 下 { padding: 10px 20px 30px;}
二个值：上下 左右 { padding: 10px 20px;}
一个值：四个方向 { padding: 2px; }定义元素四周填充为2px
三、边框border
简写方式:
border: 3px solid red; // 粗细(数值+单位) (solid/dashed/dotted/double) 颜色
说明:
右边框：border-right:线型（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
左边框: border-left:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
上边框: border-top:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
下边框: border-bottom:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
备注:
border-width 边框的粗细
border-style 边框的线型
border-color 边框的颜色
solid:实线，dashed:虚线，dotted:点状线，double:双线
四、外边距margin
边界:
margin，在元素外边的空白区域，被称之为边距;
说明:
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
属性值的4种方式：
四个值：上 右 下 左 {margin: 10px 10px 10px 10px;}
三个值：上 左右 下 {margin: 10px 20px 10px;}
二个值：上下 左右 【margin: 0 auto; 即表示上下边距为0，左右边距为自动】
一个值：四个方向 margin:2px; 定义元素四边边界为2px
五、浮动属性
语法:
float:none/left/right;
说明:
float:定义网页中其它文本如何环绕该元素
left:元素活动浮动在文本左面
right:元素浮动在右面
none:默认值，不浮动。
备注:
浮动框可以向左或右边移动，直到它的边缘碰到包含边框或另外一个浮动框的边框为止；
浮动框是脱离了普通的文档流；
例如:
#box{width:300px; height:300px; background: red}
#minBox1,#minBox2,#minBox3{width:100px; height:100px;}
#minBox1{background:blue; float:right;}
#minBox2{background:purple; }
#minBox3{background:gray; float:}
六、position 定位
语法：
position：static /absolute/relative/fixed
-
static: 默认值，无特殊定位，对象遵循HTML原则;
-
absolute: 绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其最接近的一个并有定位(absolute/relative)设置的父元素进行绝对定位;若没有父元素，则以html、body，浏览器的位置为相对位置，而其层叠通过z-index属性定义;(相对于谁？)
-
relative: 相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置(相对于谁呢？相对于它自己本身，即是在原来位置上偏移，而且注意原有位置就是在保留的);
-
fixed: (固定定位)，对象定位遵从绝对定位方式;
例如: 教室中的学生位置，绝对定位就像是大学的教室位置，人不在了，其他人就可以占用这个位置；
而相对位置就像小学生，请假了，虽然人不在，但是其他同学也不能占他的位置；
虽然学生都不在位置上，但是两种效果是不同的；
七、绝对定位和相对定位的区别
- 参照物不同，绝对定位的参照物是包含块（父级），相对定位的参照物是元素本身位置；
- 绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间;
八、包含块的概念及作用
- 包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；【包含块是参照物】
- 默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
(定义元素为包含块：给绝对定位元素的父元素添加声明position：relative;)
九、定位元素层叠属性
语法:
z-index : auto | number // 检索或设置对象的层叠顺序
说明:
auto：默认值，遵从其父对象；
number:无单位的整数值，可为负数；
备注:
> 较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠;
> 此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象;
> 除了可以调整层级以外，其实可以通过层级将某元素给隐藏；
十、溢出属性overflow
语法:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
说明:
visible:默认值，内容不会被修剪，会成现在元素框之外;
hidden:内容会被修剪，并且其余内容是不可见的;
scroll:内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto:如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit: 规定应该从父元素继承overflow属性的值(父级元素是什么属性值，它就是什么属性值)；
问题1: 如果大盒子中嵌套小盒子，为了防止小盒子在设置margin时，大盒子受到的影响(小盒子顶部没有任何的效果)，解决方式是在大盒子中添加overflow:hidden;属性;
问题2: 同级盒子中，如果出现都添加margin值，在重合位置中(上下)，会有问题，只有最大值有效(而不是两个值之和margin-bottom + margin-top);
十一、文本溢出属性text-overflow
语法:
text-overflow: clip / ellipsis
说明:
clip:不显示省略号(...)，而是简单的裁切;(不显示省略号)
ellipsis:当对象内文本溢出时，显示省略标记;(显示省略号)
text-overflow属性,当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度: width:value;(px、%，都可以);
2、强制文本在一行内显示: white-space:nowrap; // nowrap属性:文本不会换行，文本会在同一行上继续，直到遇到
标签为止(pre和nowrap样式一样);
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis;
作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
网友评论