CSS学习-20180827

今日学习一点CSS；
一、浮动
1.含义
应用float属性后，该元素脱离标准文档流的控制（不会脱离文本流的控制），移动到其父元素中指定的位置。
注意：同时定义两个块级元素时，才能使其在同一行
2.语法

语法	含义
float:none;	默认值，元素不浮动。
float:left;	元素向左浮动。
float:right;	元素向右浮动。

3.清除浮动

语法	含义
clear:both;	两侧的浮动影响都被消除。
clear:left;	只消除左侧浮动的影响。
clear：right;	只消除右侧浮动的影响。

4.示例

<head>
<style>
.float-none{
    float:none;
}
.float-left{
    float:left;
}
.float-right{
    float:right;
}
.clear-both{
    clear:both;
}
.clear-left{
    clear:left;
}
.clear-right{
    cleart:right;
}
</style>
</head>
<body>
    <div>
    <div class="float-right">向右浮动<div>
    <div class="float-left">向左浮动<div>
    </div>
</body>

二、定位
1.含义
CSS页面布局时，常常使用其定义元素的位置。
2.语法

语法	含义
position:staric;	静态定位，默认值。
position:absolute;	绝对定位，相对于上一个已经定位的父元素定位，若无时则相对于body定位。
position:relative;	相对定位，相对于自身来定位。
position:fixed;	固定定位，相对于浏览器窗口（视口）来定位。

3.边缘属性
定位时，还要结合边缘属性进行定位。

名称	含义
top	相对于其父元素上边线的距离。
left	相对于其父元素左边线的距离。
right	相对于其父元素右边线的距离。
bottom	相对于其父元素下边线的距离。

4.示例

.div{
    position:relative;
    top:20px;
    left:20px;
    /*比较常用*/
}

猜你喜欢