2. 科技
    3. css-03

    css-03

    科技2022-07-15  153

    目录

    尺寸（dimension）相关属性

    定位（position） 几个值的具体描述

    定位相关的属性

    overflow相关

    css布局-水平、垂直对齐

    组合选择符

    伪类/伪元素

    透明度

    尺寸（dimension）相关属性

    height、width、line-height、（max-height、max-width、min-height、min-width）

    定位（position） 几个值的具体描述

    position：static | relative | absolute | fixed  | inherit

    static:默认值，没有定位，遵循正常的文档流对象；static的元素不受top/bottom/left/right影响

    fixed：元素的位置相对于浏览器窗口的固定位置；脱离文档流，不占据空间；fixed定位的元素和其他元素重叠

    relative：相对其正常位置；移动relative的元素，原本所占空间不改变；relative定位的元素通常用作absolute定位的容器块

    absolute：相对最近已定位的父元素，如果无，相对于<html>；脱离文档流，不占据空间；absolute定位的元素和其他元素重叠

     

    定位相关的属性

    position、（top、bottom、left、right） 、（overflow、overflow-x、overflow-y）、z-index、clip、cursor、

    overflow相关

    overflow：visible | hidden | scroll | auto | inherit

    【注：overflow属性只工作于指定高度的块元素上】 

    css布局-水平、垂直对齐

    居中对齐

    元素居中对齐：width & margin：auto文本居中对齐：text-align:center;图片居中对齐：margin：auto & display：block

    左右对齐

    定位方式：position:absolute  & padding & marginfloat方式：【注：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。】

    垂直居中对齐

    使用padding:使用line-height：height = line-height使用position和transform： <style> .parent { height: 200px; position: relative; border: 3px solid green; } .child { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>

    【注：padding和设置line-height方式只对单行文本有效，还未理解】

    组合选择符

    后代选择器：空格分隔（直接）子元素选择器：>分隔 兄弟选择器：+分隔普通兄弟选择器： ~分隔

    伪类/伪元素

    anchor伪类/伪元素：（a:link、a:visited、a:hover、a:active）子元素相关：（:first-child、:last-child、:ntn-child(n）、nth-last-child(n)、:only-child）元素类型相关：（:first-of-type、:last-of-type、nth-of-type、：ntn-last-of-type(n)、：only-of-type）表单相关：（：checked、：disabled 、:enabled、）（:in-range、:out-of-range）（read-only、:read-write）（:valid、:invalid）:first-letter：该伪元素只能用于块级元素:first-line：该伪元素只能用于块级元素:empty:not(selector):optional:required:root:target:lang(language):focus:before:after

    伪类和伪元素可以与css类配

     伪类：基于元素当前状态或者当前具有的特性->选择元素

     伪元素：对元素中的特定内容进行操作

     

    透明度

    opacity: 0.0-1.0

    IE8和早期版本使用滤镜：alpha（opacity= x） x可以采取的值是从0 - 100

    Processed: 0.010, SQL: 8