A 盒子模型的一些处理
如果你想要调整标签与标签之间的距离 你就可以调整margin,你想填充内部大小可以使用padding.
浏览器会自带8px的margin,一般情况下我们在写页面的时候,上来就会先将body的margin去除,所以一般会有万精油去边距的写法:
*{
margin: 0;
padding: 0;
}
A-1 border边框
border:1px solid #fff; (border/margin/padding 都有四边属性,默认顺序是上右下左)
A-2 overflow盒子内容溢出处理
溢出,一般是指内容大小,如宽度超出盒子本身的大小产生溢出
overflow:hidden; //超出隐藏;
overflow:auto; //超出部分通过下拉滚动条显示,不超出则无滚动条;
overflow:scroll; //无论是否超出,滚动条会一直显示
// 同时还有overflow-x/y 可以分别对水平垂直分别做处理
B Position位置
用于指定当前元素和父元素之间的位置关系,有top/right/bottom/left四个属性,这四个属性也是padding/margin属性四个方向的属性.
例如,我们可以通过top属性表示它距离父元素边界的距离,其他三个属性同理;
但是,但是我们只设置top属性是不会直接生效的,我们需要和position配合使用.即元素的位置属性除了受四个方向的影响外,还受position影响,默认是static,在static下top/right/bottom/left等下都不会生效(这个上面吧不生效的原因)
position:static;(默认),此时top/right/bottom/left不生效
position:relative;相对位置,相对自己原来的位置top/bottom/right/left后位置的变化情况;但是通过relative挪出的空间不会别其他元素填充(占着茅坑不拉屎)
position:absolute;绝对位置.相对于第一个除static外的父元素的上下左右的位置偏移情况(注意一定是一层层往外找到第一个非static的父元素后,相对它的位置偏移)
position:fix;固定位置,一般在网站看到不同的元素,如常见的一键到顶部的按钮;
Tips:所以一般为了防止设置有误,我们会给当前子元素的父元素设置position:relative;然后再给子元素设置absolute,这样他就可以直接相对于它的父级节点的位置操作了.
C 内容居中
平常工作使用的非常多,已div为例:
C1 div内部的文字居中: text-align:center;
C2 div本身水平居中: (必须同时指定当前容器的宽度!!!!!)
margin:0 auto; (其实就是margin-right:auto和margin-left:auto;左右边距自动,还要同时制定下当前容器的宽度,如width:200px)
C3 div本身水平居中:指定当前容器的高度,然后line-height等于高度
height:20px;
line-height:20px;
D 浮动 float
左浮动: float:left; width:60px;
Tips:对于块级元素,如果不指定width则html会尝试自动占满整行这样可能右边就放不下内容了,所以块级元素一般都要记得设置宽度,有浮动同理;
右浮动: float:right;width:60px;
Tips:上述两个实现了左右浮动,如果下面我们下面行没有浮动了,即只浮动当前行,那效果非常好,但是如果后面依次跟了几个浮动,这个时候可能会出现下方的浮动叠加到上面的内容上,造成错版,解决方法就是,让下一个元素重头开始浮动,即需要设置清除浮动的属性;
清除浮动: clear:both; (both,左右都清除)
清除浮动万精油
.clearfix:after {
content: ''; /* 内容为空 */
display: block; /* 将伪元素变成块级元素 */
clear:both; /* 阻止该块级伪元素左右两边存在浮动框 */
}
E display 规定元素应该生成的框的类型
display 属性规定元素应该生成的框的类型。
display:inline;行级元素
display:block; 块级元素
display:inline-block;本身依旧是块级元素,但是已行级元素显示
display:table;随内容伸缩扩张
display:none;隐藏;
F z-index元素的堆叠顺序
我们在使用浮动,定位等属性,时,经常可能出现元素堆叠重复的情况,解决方法就是z-index;
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute/relative/fix;)
G flex弹性布局
传统的布局方式都是基于盒模型的 ,利用display、position、float来布局实现了一定效果也具有一定局限性;
响应式布局的流行,CSS3引入了更加灵活的弹性布局模型flex布局.
使用弹性布局可以有效的分配一个容器的空间,即使我们的容器元素尺寸改变,它内部的元素也可以调整它的尺寸来适应空间 .
G1 让一个元素变成弹性盒,利益display:flex即可
display: flex;块级元素
display: inline-flex;行级元素
Tips:设置了flex布局后,子元素的float、clear和vertical-align属性就会失效
设置了flex布局的元素,称为“flex容器”,简称“容器”
它的子元素,称为“flex项目”,简称“项目”
参考文献: