css的布局

css的布局

 border

dotted 定义点状边框,大多数浏览器中呈现为实线
dashed 定义虚线边框,大多数浏览器呈现实线
solid 定义实线
double 定义双线,双线的宽度等于dorder-width的值

padding----------内边距

marign-----------外边距

元素分类

       块级元素(独占一行,可以设置宽和高)----------------div  p   hn等

       内联元素(不会自动换行,甚至宽和高的时候是不起作用的)-------span  a等

        块级元素和内联元素可以进行相互转换

display

none 此元素不会被显示
block

此元素将显示为块级元素,此元素前后会带有换行符

inline 默认,此元素会被显示为内联元素,元素前后没有换行符

css的布局

 注意css隐藏元素的方式------diaplay:none

                                              width:height:0

浮动布局

  (通过设置float属性进行布局)

none 不浮动
left 对象向左浮动,而后面的内容回流线向对象的右侧
right 对象向有浮动,而后面的内容会流向对象的左侧

清除浮动

clear

left 在左侧不允许浮动元素
right 在右侧不允许出现浮动元素
both 在左右两侧都不允许出现浮动元素
none 默认值,允许浮动元素出现在左右两侧

定位布局

属性 position------定位方式

absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”  “top”  “right”  以及”bottom“
flexed 生成绝对的定位元素,相对于浏览器窗口进行定位,也是的位置通过“left”  “top”  “right”  以及“bottom”属性进行规定。

relative

生成绝对的定位元素,相对于其正常位置进行定位,因此“left:20"会向元素的left位置添加20像素。
static

默认值,没有定位,元素出现在正常的流中

css的布局

 

上一篇:python判断变量是否为None


下一篇:通过web自动化实现文件上传