CSS基础复习

CSS中常用选择器有哪些

        id选择器：  #idname {    }

        类选择器： .classname {    }

        标签选择器：  div {    }

        属性选择器：  [ name ]  {    }

        通配选择器： *  {     }

        伪类选择器： li:nth-child {    }

CSS选择器优先级

        !important  >  内联样式  >   id选择器  >  类选择器  /  伪类选择器 / 属性选择器  >  标签选择器  >  通配符选择器  >  浏览器默认样式

CSS盒模型

        盒子模型组成： border + margin + padding+ content

        盒子大小： content + border + padding

        border-sizing: border-box    盒子大小等于盒子宽高，这种border 和padding不会影响盒子大小

float

        浮动特性：

                1.会脱离标准文档流，使元素不在占有原来的位置

                2.浮动元素会一行中显示，并且顶部对齐

        为什么清除浮动？ 

                当不方便给父元素高度时，而子元素浮动又不占用原来的位置，最后父元素高度为0，就会影响下面的标准流盒子

        如何清除浮动

                1. 给浮动元素末尾添加一个标签

                        <div  style="clear:both"></div>

                2.父元素添加after伪类

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1
}

 position

        static:  默认值，代表没有定位

        relative:  相对定位。未脱离文档流，相当于自己原来的位置移动

        absolute:  绝对定位。脱离文档流，如果父元素没有定位则以浏览器为基准定位，所以一般都是给父元素设置ralative，这个叫子绝父相

        fixed:  固定定位。脱离文档流，以浏览器窗口为参考点固定位置。不随页面滚动。

        z-index:  当用定位时可能会涉及到盒子重叠的情况，z-index设置盒子前后顺序（z轴），数值越大越靠上。只能用于相对定位、绝对定位、固定定位，对浮动、标准流无效。

        如何使用定位做居中：

.div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: 50px;
    margin-top: 50px;
    
}

CSS3新特性

        border-radius   圆角边框

        box-shadow   盒子阴影

        text-shadow   文本阴影

        background-image   背景图片

        gradient   渐变

        transform   2D/3D转换       translate定义沿X/Y轴移动

        transition     过渡      

.div {
    //  2S内进行transform
    transition: transform 2s;
}

.div:hover {
    // 鼠标放上去进行变换
    transform: translateX(100px);
}

        animation    动画     

        column      文本多列显示

        resize: both    可以用户自己改变元素大小

CSS3弹性盒子： 

        容器的6个属性： 

                        flex-direction:   子元素在父元素中的排列方式

                                row / row-reverse / column / column-reverse 

                        flex-wrap:   子元素的换行方式

                                wrap / nowrap / wrap-reverse

                        flex-flow:   flex-direction 和 flex-wrap的缩写

                                flex-flow: row  wrap

                        justify-content:   子元素X轴对齐方式

                                flex-start / flex-end / center / space-between / space-around

                        align-item:  子元素Y轴对齐方式

                                flex-start / flex-end / center / baseline / stretch

                ​​​​​​​        ​​​​​​​align-content:   定义多跟轴线的对齐方式，如果只有一根轴线，该属性不起作用

                                flex-start  / flex-end / center / space-between  /  space-around / stretch 

        子项的6个属性：

                        order:   子项的排序，数值越小越靠前

                        flex-grow:   放大子项,默认0 ,每个都设置1那么就是等分剩余空间

                        flex-shrink:   缩小子项，默认1

                        flex-basis:   项目占据的空间，可以设置固定值，默认auto

                        flex:   flex-grow  flex-shrink  flex-basis的缩写，默认0  1 auto  

                        align-salf:    单独的对齐方式

CSS3多媒体查询

        @media  根据查询屏幕分辨率来展示不同效果，多用于响应式布局

@media screen and (max-width: 480px) {
    body {
        background-color: pink;
    }
}