CSS盒子模型

CSS盒子模型的结构

 
content 表示该元素的内容
padding 该元素到边框的距离
border 表示该元素的边框
margin 该边框与外部的距离
 
注意盒子是从内向外呈现的辐射状,既不是从上到下,也不是从左到右,它是从中心到四周的。
 
边框的三个属性:
用border-color来表示边框的颜色
用border-width来表示边框的宽度
用border-style来表示边框的线条风格
 
border-style属性可以设置为none(无格式),solid(实线),dotted(点状线),dashed(小短线),double(双层线)等等。
 
clear:left;是指“该元素的左边不能有左浮动的元素”
 
 
通过display属性来控制一个元素的显示格式。
inline 设置为内联格式(当我们使用display:inline;设置为内联格式的时候,它在添加元素的时候不会换行)
none 设置为消失(当我们设置为none的时候该元素就像消失了一样)
block 设置为块级元素(当我们使用display:block;设置为块级元素的时候,它在添加元素的时候会自动换行)
visibility属性设置为hidden的时候,它会隐藏这个元素,显示为一个空白,后面的元素不会占据它的空间。
display属性设置为none的时候,它会彻底让这个位置消失,后面的元素会占据它的空间。
 
定位
定位共有四种方式
static 静态定位 (默认的定位)
fixed 固定定位(以浏览器窗口为基准进行定位)
relative 相对定位(以原位置为基准进行定位)
absoulte 绝对定位(以父元素为基准进行定位)
我们使用position这个属性来表示定位。
原文地址:https://www.cnblogs.com/suiyuewuxin/p/5608523.html