css学习笔记-3

传统网页布局三种方式

标准流

标签按照规定默认方式排列

浮动

多个块级元素同行显示

/*选择器{float: 属性值}；*/
div{
    float: left;
    /*none(不浮动，默认),left(向左浮动),right(向右浮动)*/
}
/*向一边移动直到左边缘或右边缘触及包含块或另一个浮动框*/

1. 浮动会脱离标准流

2. 多盒子设置浮动，按属性值一行内显示并且顶端对齐排列

3. 浮动元素会有行内块特性

4. 浮动的盒子只影响后面的标准流

清除浮动

最初产生是为了做文字环绕效果

    <!--清除浮动元素造成的影响
      父盒子本身有高度，不需要清除浮动
      父盒子无高度，清除浮动撑开父盒子-->
    
    <!--选择器{clear: 属性值}；-->
    div{
        clear: both;
        <!--left(清除左侧浮动影响),right(清除左侧浮动影响),both(同时清除两侧浮动影响)-->
    }
    
<!--方法-->
    <!--1.额外标签法,浮动元素末尾添加一个空标签-->
    <div></div>
    <div></div>
    <div style="clear: both;"></div>
    
    <!--2.父级添加overflow，属性值hidden、auto、scroll-->
    <div style="overflow: hidden">
        <div></div>
    </div> 
    <!--缺点：溢出遮挡-->
    <!--3.:after伪元素法-->
    <style>
    div:after{
        content: ;
        dispaly: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    div{
        /*IE6、7专有*/
        *zoom:1;
    }
    </style>
    
    <!--4.双伪元素法-->
    <style>
        div:before,div:after{
            content: ;
            dispaly: block;
    }        
        div:after{
        clear: both;
    }
        div{
        *zoom: 1;
    }
    </style>
    <!---->

定位

1. 一个盒子在盒子内随意定位，并盖住其他盒子

2. 定位=定位模式+边偏移（定位模式：元素在文档中的定位方式；边偏移：确定元素最终位置）

定位模式

position: static;
/*属性值：static(静态定位)|relative(相对定位)|absolute(绝对定位)|
  fixed(固定定位)|sticky(粘性定位)*/ 
/*静态定位：默认，无偏移，标准流*/
/*相对定位：相对原来位置移动，不脱标准流，原来位置继续占有*/
/*绝对定位：根据位置父元素移动位置，无父元素根据浏览器定位，父元素无定位
  以最近一级祖先元素位置定位，*绝对定位不占有原来位置*/
/*固定定位：以浏览器可视窗口区域定位*/
/*粘性定位：以可视窗口为参照，占有原来位置，必须添加其中一个偏移才生效（IE不支持）*/

/*行内元素添加绝对定位或固定定位，可直接设置宽高*/
/*块级元素添加绝对定位或固定定位，不设置宽高，默认大小是内容大小*/

边偏移

top: 100px;
left: 80px;
bottom: 100px;
right: 30px;

定位叠放次序

z-index: 1;
/*数值为正整数、负整数或0，数值越大，盒子越靠上*/

一般情况

*实际使用基本包含三种布局

*多个块级元素纵向排列标准流，横向排列浮动

*标准流父元素排列上下位置，内部子元素浮动左右排列

*脱标元素不会触发外边距合并问题

*脱标的浮动不会压住盒子中的内容与图片，定位会

元素显示与隐藏

/*隐藏元素*/
/*隐藏后不占有原位置*/
display: none;
/*none隐藏；block显示*/

/*overflow针对溢出部分(超出盒子部分内容)*/
overflow: hidden;
/*hidden隐藏；visible显示；scroll添加滚动条；auto需要时添加滚动条*/

/*隐藏后占有原位置*/
visibility: hidden;
/*hiddden隐藏；visible可视*/

背景图位置

bacground-position: 10px 10px;
/*X向右为正，Y向下为正*/

三角

一边有颜色其他边透明

div{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left-color: red;
}

鼠标样式

cursor: default;
/*default(默认箭头)|pointer(小手)|move(移动)|text(文本)|not-allowed(禁止)*/

取消轮廓线和防止拖拽文本域

/*清除表单轮廓线*/
outline: 0|none;

/*防止拖拽文本域,扰动布局*/
resize: none;

文字与图片垂直居中

/*对齐*/
vertical-align: baseline;
/*baseline(基线)，bottom(底线)，middle(中线)，投票(顶线)*/

解决图片下白框

vertical-align: bottom;
/*基于底线对齐*/

display: block;
/*转换为块级元素*/

单行/多行文字溢出省略号显示

/*单行*/
/*1.先强制一行内显示文本*/
white-space: nowrap;(默认normal自动换行)
/*2.超出部分隐藏*/
overflow: hidden;
/*3.文字用省略号代替超出部分*/
text-overflow: ellipsis;

/*多行*/
overfow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-web-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

/*推荐后端控制*/