层叠样式与盒子模型

Posted 辛庚益

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了层叠样式与盒子模型相关的知识,希望对你有一定的参考价值。

层叠样式:(display)

块:占一行,可以设置高和宽度  属性值:block

行内块:不占一行,可以设置高和宽度  属性值:inline block

行内:不占一行,不可以设置高和宽度  高和宽度根据内容来 属性值:inline

注:一、块的隐藏方法

1.display:none(不占位)

2.visibility:hiddden(占位,不常用)

二、z-index设置层

浮动样式:position

fixed:绝对值,相对于body(屏幕),移动时自身位置消失

relative:相对值,相对自身,移动时自身位置不消失

absolute:绝对值,相对于父标签中的relative,移动时自身位置消失

盒子模型:

常用代码

padding:内边距

boder:边框

magin:外边距

border:宽度 样式 颜色

box-sizing:border-box 格式尺寸

浮动:

float:left right

阴影:box-shadow: 10px 5px 10px #ccc inset;
圆角:border-radius: 10px;
居中:magin:0 auto;

 

以上是关于层叠样式与盒子模型的主要内容,如果未能解决你的问题,请参考以下文章

盒子模型相关知识总结

前端基础-css盒子模型

前端学习 CSS基础

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)

改变盒子模型外边距的是

【8】CSS盒子模型、样式继承和默认样式