浮动
实例:
img
{
float:right;
}
在css中,是存在流的概念的。在正常情况下,页面总是从左到右,从上到下布局,这种被称为正常的流。但是有很多情况,正常流是没办法实现的,因此我们需要一些手段来破坏流,从而实现一些特殊的布局,而float就具备破坏流的特性。
一个元素设置了float属性,会表现出如下特性:
包裹性
块状格式化上下文
破坏文档流
没有margin合并
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动,并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
渐变
<style type="text/css">
.div1{
width: 600px;
height: 600px;
border: 1px solid red;
margin: 0 auto;
background-image:repeating-radial-gradient(300px at center right,red,green,blue);
}
</style>
<body>
<div class="div1">
</div>
</body>
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
径向渐变(Radial Gradients)- 由它们的中心定义
background-image: radial-gradient(shape size at position, start-color, …, last-color);