CSS进阶-黑马程序员-前端零基础

关注

原创最新推荐文章于 2026-11-09 20:43:22 发布 205 阅读 AI 写同款· GEO 优化 ›

CSS 弹性盒布局：flex-wrap 换行与多行交叉轴对齐默认情况下，弹性容器（flex container）会把所有子项（flex item）挤在一行里，哪怕空间不够也只会压缩子项，而不会换行。浏览器会依次把子项放进当前行，当剩余空间不足以容纳下一个子项的基础尺寸时，就开启新的一行。一旦允许换行，容器里就会出现多条「弹性行（flex line）」，此时交叉轴对齐的行为也会从「单行对齐」变成「多行对齐」，是默认值：当子项没有设置固定高度时，行会被拉伸，子项随之变高，看起来像是「撑满了容器」。上面这段代码中，每个子项固定 200px 宽，容器宽度决定每行能放几个。阅读详情

1.选择器进阶

后代选择器：空格	选择器1 选择器2{ CSS }	后代，儿子孙子重孙子
子代选择器：>	选择器1 > 选择器2{ CSS }	儿子
并集选择器	选择器1，选择器2{ CSS }	同时选择多组标签，设置相同的样式（建议每写一个选择器换一行）
交集选择器	选择器1选择器2{ CSS }	p.box

1.1hover伪类选择器

选中鼠标悬停在元素上的状态，设置样式

选择器：hover { CSS }

1.2emmet语法

    <!-- 生成div带类名 -->
    .box
    <div class="box"></div>
    p.box
    <p class="box"></p>
    <!-- div 同级 p + -->
    div+p
    <div></div>
    <p></p>
    <!-- 父子 > -->
    div>p
    <div>
        <p></p>
    </div>
    <!-- ul 有4个li *乘号 -->
    ul>li*4
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    ul>li{111}*3
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>

w300+h500+bgc回车，这个很常用

2.背景相关属性

2.1背景图片

background-image（bgi）

background-image：url（'图片的路径');

这里的引号可以省略

2.2背景平铺

background-repeat (bgr)

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

2.3背景位置

background-position （bgp）

background-position：水平方向位置垂直方向位置；（空格隔开）

属性值	方位名词	水平方向	left center right
		垂直方向	top center bottom
	数字+px（坐标）	坐标系	原点（0，0）盒子的左上角
			x轴水平向右 y轴垂直向下

3.元素显示模式

块级元素	独占一行，可以设置宽高	div,p,h,ul,li,dl,dt,form,header
行内元素	一行可以显示多个，高度和宽度默认由内容撑开，不可以设置高宽	span,a,b,u,i,s,strong,ins,em
行内块元素	一行可显示多个，可以设置宽高	input,textarea,button,select,img

3.1转换

改变元素默认的显示特点，让元素符合布局要求

属性	效果	使用频率
display：block	转化成块级元素	较多
display：inline-block	转化成行内块元素	较多
display：inline	转化成行内元素	较少

一个新的发现

            width: 100px;
            height: 50px;
           
            text-align: center;
            line-height: 50px;
            /* 设置行高还有水平居中，可以让文字在框架中居中显示 */