7.26 CSS31. 选择器选择属于其父元素的第n个子元素的每个匹配元素。 2. 单行文本溢出隐藏 normal 默

1. 选择器

[attribute=value]

   <!--[target=_blank]	-->
   <!--选择 target="_blank" 的所有元素-->

[attribute~=value]

    [title~=flower]
    <!--选择 title 属性包含单词 "flower" 的所有元素-->

[attribute|=value]

 [lang|=en]	
    <!--选择 lang 属性值以 "en" 开头的所有元素-->

:empty

匹配没有子元素（包括文本节点）的每个元素
:not(selector)

匹配非指定元素/选择器的每个元素
:nth-child(n)

选择属于其父元素的第n个子元素的每个匹配元素。
:nth-last-child(n)

同上，从最后一个子元素开始计数
:nth-of-type(n)

选择属于其父元素第n个元素的每个匹配元素
:nth-last-of-type(n)

从最后一个子元素开始计数
::placeholder 伪元素用于控制表单输入框占位符的外观

2. 单行文本溢出隐藏

溢出溢出隐藏 overflow: hidden;
超出部分显示'...' text-overflow: ellipsis;
保留文本的空格

white-space 属性设置如何处理元素内的空白(空格)
- normal 默认被浏览器忽略。
- pre 被浏览器保留，类似 HTML 中的<pre>
- nowrap 不会换行，文本会在在同一行上继续，直到遇到 <br> 为止
- pre-wrap 保留空白符序列，但是正常地进行换行
- pre-line 合并空白符序列，但是保留换行符
- inherit 规定应该从父元素继承 white-space 属性的值。

3. 伸缩盒 Flex布局

1.`flex`

Flex是Flexible Box的缩写，意为弹性布局，用来为盒子模型提供最大的灵活性、任何一个容器都可以指定为Flex布局。
设为Flex布局后子元素的float、clear、vertical-align属性将失效。

2. `flex-grow`

占父元素剩余空间比例

3. `flex-direction`

容器内元素的排列方向(默认横向排列)

flex-direction:row; 沿水平主轴让元素从左向右排列
flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
flex-direction:row-reverse;沿水平主轴让元素从右向左排列

4. `lex-wrap`

容器内元素的换行(默认不换行)

flex-wrap: nowrap; (默认)元素不换行
flex-wrap: wrap; 元素换行

5. `justify-content`

元素在主轴（页面）上的排列

justify-content : center;元素在主轴（页面）上居中排列
justify-content : flex-start;元素在主轴（页面）上由左或者上开始排列
justify-content : flex-end;元素在主轴（页面）上由右或者下开始排列
justify-content :space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
justify-content :space-around;两元素间距相等距父容器距离相等

6.`align-items`

元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

align-items : flex-start;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
align-items : flex-end;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）
align-items : center;弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
align-items : baseline;如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。（靠上对齐）

4. 行列布局 (定位、浮动、flex)

1. 左侧固定中间自适应

定位

    <style>
    #baba{
        width: 100%;
        height: 500px;
        background: #653232;
        position: relative;
    }
    .left{
        width: 200px;
        height: 500px;
        background: #445544;
        position: absolute;
        top: 0;
        left: 0;
      
    }
    .right{
        height: 500px;
        margin-left: 200px;
        background: #ff0036;
    }
    </style>
    
    <body>
        <div id="baba">
        <div class="left">z</div>
        <div class="right">z</div>
        </div>
    </body>

flex

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #box>div:nth-child(1){
            width: 200px;
            height: 400px;
            background-color: brown;
        }
        #box>div:nth-child(2){
            height: 400px;
            background-color: violet;
            flex-grow: 1;
        }
    </style>    
    
    <body>
        <div id="box">
            <div></div>
            <div></div>
        </div>
    </body>

效果图：

2. 左右固定中间自适应

浮动

    <style>
    .container{
        width: 100%;
        height: 500px;
        background: #000000;
    }
    .left{
        width: 100px;
        height: 500px;
        background: #ffffff;
        float: left;
    }
    .right{
        width: 100px;
        height: 500px;
        background: #ff0036;
        float: right;
    }
    .center{
        margin: 0 100px;
        height: 500px;
        background: #559966;
    }
    </style>
    
    <body>
        <div class="container">
            <div class="left">我是左边</div>   
            <div class="right">我是中间</div>
            <div class="center">我是右边</div>
            
        </div>  
    </body>

flex

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100%;
            height: 500px;
            display: flex;
        }
        #box>div:nth-child(1){
            background-color: aqua;
            flex: 0 0 200px;
        }
        #box>div:nth-child(2){
            background-color: black;
            flex: auto;
            }
        #box>div:nth-child(3){
            background-color: blue;
            flex: 0 0 200px;
        }
        </style>
       
        <body>
            <div id="box">
                <div>我是左边</div>
                <div>我是中间</div>
                <div>我是右边</div>
            </div>
        </body>

效果图:

3. 上下固定中间自适应

定位

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top{
            height: 50px;
            width: 100%;
            background: #654826;
            position: absolute;
            top: 0;
        }
        .buttom{
            height: 50px;
            width: 100%;
            background: #872387;
            position: absolute;
            bottom: 0;
        }
        .center{
            background: #821248;
            width: 100%;
            position: absolute;
            top: 50px;
            bottom: 50px;
            height: auto;
        }
    </style>
    
    <body>
        <div class="top"></div>
        <div class="center"></div>
        <div class="buttom"></div>
    </body>

flex

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,
        body
        {
            width: 100%;
            height: 100%;
        }
        #box{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #box>div:nth-child(1){
            background-color: aqua;
            height: 50px;
        }
        #box>div:nth-child(2){
            background-color: black;
            flex-grow: 1;
        }
        #box>div:nth-child(3){
            background-color: blue;
            height: 50px;
        }
    </style>
    
    <body>
        <div id="box">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>

效果图：

5. 转换属性

1. transform

transform 属性向元素应用 2D 或 3D 转换(旋转、缩放、移动或倾斜)
位移如果是百分比的话是本身宽高的百分比

    transform: translateX(50%) translateY(50%);

水平居中垂直居中

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

2. 旋转/缩放

    <!--旋转角度-->
    transform: rotate(-45deg); 
    <!--旋转点-->
    transform-origin: 200px 0; 
    <!--定义沿着 X 和 Y 轴的 2D 倾斜转换-->
    transform: skew(30deg);
    <!--定义沿着 X , Y , Z 轴的 3D 倾斜转换-->
    transform: scale3d(0.5, .5, .5);
    <!--在正的一侧看 顺时针是+ 逆时针是--->
    transform: rotateX ()
    <!--在正的一侧看 顺时针是+ 逆时针是--->
    transform: rotateY ()
    <!--在正的一侧看 顺时针是+ 逆时针是--->
    transform: rotateZ ()

3. `translate()`

translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。
translateX(x)：元素仅在水平方向移动（X轴移动）
translateY(y)：元素仅在垂直方向移动（Y轴移动）
transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）

应用：绝对1px

6. CSS3 filter(滤镜) 属性

使模糊

    filter: blur(10px);
    -webkit-filter: blur(10px);

7. 单位

rem

相对于根元素

    html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        /* 20*16px */
        width: 20rem;
        /* 20*16px */
        height: 20rem;
    }

em

字体相对于根元素计算，其他元素相对于当前元素

     html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        font-size: 18px;
        /* 20*18px */
        width: 20em;
        /* 20*18px */
        height: 20em;
    }

8. calc()

动态计算长度值
需要注意的是，运算符前后都需要保留一个空格

    <!--永远都是父元素宽度-100px-->
    width: calc(100% - 10px)

任何长度值都可以使用calc()函数进行计算
calc()函数支持 "+", "-", "*", "/" 运算

9. CSS3 @media 查询

应用于pc端相对简单页面
如果文档宽度小于 300 像素则修改背景颜色

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

7.26 CSS3

1. 选择器

2. 单行文本溢出隐藏

3. 伸缩盒 Flex布局

1.flex

2. flex-grow

3. flex-direction

4. lex-wrap

5. justify-content

6.align-items

4. 行列布局 (定位、浮动、flex)

1. 左侧固定中间自适应

2. 左右固定中间自适应

3. 上下固定中间自适应

5. 转换属性

1. transform

2. 旋转/缩放

3. translate()

6. CSS3 filter(滤镜) 属性

7. 单位

8. calc()

9. CSS3 @media 查询

1.`flex`

2. `flex-grow`

3. `flex-direction`

4. `lex-wrap`

5. `justify-content`

6.`align-items`

3. `translate()`