【css学习整理】浮动,清除

css内边距属性: padding padding-top right bottom left
- 如果是两个数字,指的是上下,左右 padding: 10px 20px 上下10 左右20
- 如果是三个数字,指的是上,左右,下 padding: 10px 20px 30px 上10 左右20 下30
css外边距属性:margin
- 两个数字: 上下左右
- 三个数字: 上左右下
- 居中: 0 auto
css背景: background
- background-color: 背景色
- background-img: 背景图
- background-repeat: 背景图是否重复
- background-position: 背景图定位 left right bottom top center
- background-attachment: 背景图是否固定
css浮动和清除

　　　　浮动的元素可以理解为该元素已经脱离文档流。‘已经不存在了’

　　　　浮动只有两个方向：left 。 right Float:left (左浮动) 。 Float right

　　　　浮动的位置：浮动到包含元素的边界。或具有浮动属性的边上

　　　　浮动元素的层级高于普通元素。

　　　　凡是浮动的元素都是块元素。如果浮动前行内元素，浮动后自动转为块元素。备注：行内元素没有宽高，只有块元素才有宽高

　　　　凡是设置了浮动，一定要有清除浮动，主要目的是清除上面的有浮动属性的。（上面的浮动属性不清除，下面的元素会默认继承）

　　　　清除浮动的写法：clear：left, right,both

　　　　clear:both 清除两边，通常用在版权，独占一行

　　　　清除写的位置：具有浮动属性的最后面，通常用一个空的 <div class='clear'></div>

<style type="text/css">
        .box{
            width: 960px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid black;
        }
        .left{
            width: 200px;
            height: 400px;
            border: 1px solid red;
            float: left;
        }
        .right{
            width: 750px;
            height: 400px;
            border: 1px solid blue;
            float: right;
        }
    </style>

【css学习整理】浮动,清除

猜你喜欢