前端基础-CSS

Jafferson
122 阅读11分钟

CSS 选择器

常见的CSS选择器

    <p>元素选择器</p>
    <div class="box">类选择器</div>
    <div id="box1">ID选择器</div>
    <input type="text" /> 属性选择器
    <div>
        <p>后代选择器</p>
    </div>

元素选择器：如下代码，p选择选择所有<p>元素

    p {
        color: blue;
    }

类选择器：类选择器以.开头，后面跟着类别名称
如下代码，.box选择器选择所有类名为box的元素

    .box {
        color: black;
    }

ID选择器：ID选择器以#开头，后面跟着ID名称
如下代码，#box1选择器选择所有ID名为box1的元素

    #box1 {
        color: red;
    }

属性选择器：属性选择器可以通过属性选择元素，可以根据属性名和属性值进行选择 如下代码，input[tyep="text"]选择器选择所有type属性为"text"的<input>元素

    input[type="text"] {
        background-color: #aaa;
    }

后代选择器：通过指定后代关系选择元素，后代选择器使用空格分隔元素名称
如下代码，div p选择器选择所有<div>元素内的<p>元素

    div p {
        font-size: 20px;
    }

CSS 选择器的优先级

内联样式 style > ID选择器 > 伪类选择器 > 属性选择器 = class选择器 > 元素选择器

inline block inline-block 元素

        <div class="inline">inline 行内元素</div><div class="inline">inline 行内元素</div>
        <div class="block">block 块元素</div><div class="block">block 块元素</div>
        <div class="inline-block">inline-block 行内块元素</div><div class="inline-block">inline-block 行内块元素</div>

inline : 行内元素不会开始新的一行，会和其他元素在同一行上，并且不可设置宽带和高度，元素的宽度就是文字或图片的宽度

   .inline{
    display: inline;
    border: solid 1px black;

    /* 失效 */
    width: 100px;
    height: 100px;
   }

block : 块元素会开始新的一行，宽度默认占父元素的 100% ，可以设置宽度和高度

   .block{
    display: block;
    border: solid 1px red;

    /* 生效 */
    width: 100x;
    height: 100px;
   }

inline-block : 行内块元素不会开始新的一行，会和其他元素在同一行上，可以设置宽度和高度

   .inline-block{
    display: inline-block;
    border: solid 1px blue;

    /* 生效 */
    width: 100x;
    height: 100px;
   }

效果： image.png

BFC 块级格式化上下文

BFC（Block formatting context）块级格式化上下文，是页面上的一个隔离的独立容器，容器里面子元素不会影响外面的元素

如何创建一个BFC

  • 浮动元素（元素的float属性不为 none，left right 都可以创建BFC）
  • 绝对定位元素（元素的positive属性为 absolute 或 fixed 都可以创建BFC）
  • display:inline-bloack, display:table-cell, display:flex, display:inline-flex
  • overflaw属性不为 visible 或 clip

BFC的特点

  • 排列方式：BFC中的块级元素是垂直排列的
    <div class="BFC">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

    .BFC{
        overflow: hidden;
    }
    
    .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
    }

    .box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

image.png

  • margrin重叠：BFC中的元素margin会重叠，以margin最大的为准
    <div class="BFC">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

    .BFC {
        overflow: hidden;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 10px;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px;
    }

image.png

  • 不会与浮动元素重叠：BFC的区域不会与浮动元素的区域重叠，而是紧挨着元素边界
    <div class="box1"></div>
    <div class="box2"></div>

    .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        overflow: hidden;
    }

image.png

  • 高度计算：BFC的高度计算，也会计算浮动元素的高度（可以用这个特性清除浮动）
    <div class="box">
        <div class="box1"></div>
        <div class="box2">浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动浮动</div>
    </div>

    .box {
        width: 200px;
        border: 5px solid blue;
    }

    .box1 {
        width: 50px;
        height: 50px;
        background-color: green;
        float: left;
    }

    .box2 {
        height: 100px;
        background-color: red;
    }

image.png

给box2元素设置BFC

    .box2 {
        height: 100px;
        background-color: red;
        overflow: hidden;
    }

image.png

  • 隔离：BFC是页面上的一个隔离的独立容器，容器内的子元素不会影响外面的元素（可以解决上面的margin重叠问题）
    <div class="BFC">
        <div class="BFC1">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </div>

把box1放到一个BFC中,容器内元素不会影响外面的元素

    .BFC {
        overflow: hidden;
    }

    .BFC1 {
        overflow: hidden;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
        margin-bottom: 10px;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 20px;
    }

image.png

CSS 居中定位（4种方案）

    <div class="box">
        <div class="box1"></div>
    </div>

方案一：设置 position 绝对定位+设置 margin
适用：知道子元素的宽高尺寸 方法：父元素相对定位，子元素绝对定位，设置子元素的 margin 的上和左方向移动子元素的一半尺寸

    .box {
        background-color: red;
        width: 100px;
        height: 100px;
        position: relative;
    }

    .box1 {
        background-color: black;
        width: 50px;
        height: 50px;
        position: absolute;

        margin: 25px 0 0 25px;
        /* 或者 */
        /* 
        top: 50%;
        left: 50%; 
        margin:-25px 0 0 -25px;
        */
    }

image.png

方案二：设置 position 绝对定位+设置 transfrom 调整 x 轴和 y 轴位置
适用：知道子元素的宽高尺寸或者不知道也可以 方法：与方案一类似，将 margin 改为设置 transform:translate(-50%, -50%)，并设置 left 和 top 为 50%

    <div class="box">
        <div class="box1">box1</div>
    </div>

    .box {
        background-color: red;
        width: 100px;
        height: 100px;
        position: relative;
    }

    .box1 {
        background-color: #fff;
        /* width: 50px;*/
        /*height: 50px; */
        position: absolute;
        left: 50%;
	top:50%;
        transform: translate(-50%, -50%);
    }

image.png

方案三：设置 position 绝对定位+ margin: auto
适用：知道子元素的宽高尺寸 方法：父元素相对定位，子元素绝对定位，设置子元素的 margin 为 auto ,并设置 top left bottom right 为 0

    .box {
        background-color: red;
        width: 100px;
        height: 100px;
        position: relative;
    }

    .box1 {
        background-color: #fff;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

效果与方案一致

方案四：flex 弹性盒子
适用：知道子元素的宽高尺寸或者不知道也可以 方法：父元素设置为弹性盒，设置主轴 justify-conten 和侧轴 align-items 为 center 居中

    .box {
        background-color: red;
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box1 {
        background-color: #fff;
        /* width: 50px;*/
        /*height: 50px; */
    }

效果与方案二一致

flex 布局

flex (Flexible Box)，意为弹性布局，用来为盒模型提供最大的灵活性

任何容器都可以设置为 flex 布局

.box{
  display: flex;
}

行内元素也可以设置为 flex 布局

.box{
  display: inline-flex;
}

flex 的属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction 属性，决定子元素的主轴方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端 image.png

row-reverse：主轴为水平方向，起点在右端
image.png

column：主轴为垂直方向，起点在上沿
image.png

column-reverse：主轴为垂直方向，起点在下沿
image.png

flex-wrap 属性，决定子元素如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap：默认不换行
image.png

wrap：换行，第一行在上方
image.png

wrap-resverse：换行，第一行在下方
image.png

flex-flow 属性，是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 属性， 决定子元素在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flext-start（默认值）：左对齐
image.png

flex-end：右对齐
image.png

center：居中
image.png

space-between：两端对齐紧贴父元素边界，子元素之间间隔相等
image.png

space-around：每个子元素两侧间隔相等，所有两端子元素与父元素的间隔是子元素之间的一半
image.png

align-items 属性，决定子元素在交叉轴的对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start（默认值）：交叉轴的起点对齐 image.png

flex-end：交叉轴的终点对齐
image.png

center：交叉轴的中点对齐
image.png

baseline：子元素第一行文字的基线对齐 image.png

stretch：如果子元素未设置高度或为auto，将占满整个容器的高度
image.png

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

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start（默认值）：交叉轴的起点对齐 image.png

flex-end：右对齐
image.png

center：居中
image.png

space-between：与交叉线两端对齐紧贴父元素边界，每根轴线间距相等
image.png

space-around：每根轴线上下两侧间隔相等，所有轴线间的距离是轴线与边框距离的两倍
image.png

子元素的属性

  • order 定义子元素的排列顺序，数值越小，排列越靠前，默认为 0
.item {
 order: <integer>;
}
  • flex-grow 定义子元素的放大比例，默认为 0，即如果有剩余空间也不放大
.item {
  flex-grow: <number>;  /* default 0 */
}
  • flex-shrink 空间不足时使用，定义子元素的缩小比例，默认为 1，即如果剩余空间不足，子元素将缩小
.item {
  flex-shrink: <number>;  /* default 1 */
}
  • flex-basis 定义在分配多余空间之前，子元素占主轴的空间，默认值为 auto，即子元素原本的大小
.item {
  flex-basis: <length> | auto; /* default auto */
}
  • flex flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，后两个属性可选
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
  • align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex 布局应用

通关游戏：Flexbox Froggy - 一个用来学CSS flexbox的游戏 (gitee.io)

盒子模型

盒子模型 （Box Model）是 css 中的一种布局模型，用于描述元素在页面中的尺寸和位置

盒子模型的分类

  • 标准盒子模型
    构成：content、margin、padding、border

  • IE 盒子模型
    构成：content（padding + border + padding）、margin

通过 CSS 转换盒子模型

box-sizing: content-box; /*默认值，标准盒子模型*/
box-sizing: border-box; /*IE 盒子模型*/

响应式布局

移动端适配的5种方案

  • rem 布局
    rem 的大小是相对于 html 根元素的 font-size 属性的大小，假如 html 的 font-size 是 100px， 则 1rem = 100px

  • vw/vh 布局
    类似 rem， vw 是可视窗口的高度， 1vw = 屏幕的宽度 1% ， vh 是可视窗口的高度

  • 百分比布局
    在 css 中可以使用百分百来实现布局，是相对父元素的百分百，但是有时候嵌套较深时，会出现问题

  • 响应式布局（媒体查询）
    通过媒体查询，可以针对特定屏幕单独设置，但针对不同尺寸的屏幕都做适配是不合理的，一般用作极端情况（Ipad 大设备）或简单的视频（隐藏元素或改变元素位置）

/*屏幕大于 1024px 应用该样式*/
@media screen and (min-width: 1024px) {
    box{
        background-color: blue;
    }
}

/*屏幕小于 900px 应用该样式*/
@media screen and (max-width: 900px) {
    box{
        background-color: red;
    }
}
  • px 搭配 vw/vh、媒体查询与 flex 布局 流程：
  1. 在 meta 标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度
  2. 在 css 中使用 px
  3. 在适当场景中使用 flex 布局，合适情况配合 vw 进行自适应
  4. 在跨设备类型场景中（pc、手机、平板），使用媒体查询
  5. 在跨设备类型如果交互差异太大的情况下，考虑分项目开发

实现字体小于 12px 及 0.5px 边框

字体小于 12px 方案

  • 设置 transform: scale( 0.5 )
  • svg 矢量图设置 text

0.5px 边框方案
常见的浏览器只能显示 1px

  • 通过 box-shadow 阴影实现，可达到单条或多条边框
.box {
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
    box-shadow:  0 0 0 0.5px black;
}
  • 通过 ::afer 定位伪类元素位置实现
    设置 height、width、top、left、bottom、 right 可达到单条边框或多条边框，如以下代码，通过设置 bottom: 0 + height: 0.5px + width: 100%，达到下边框
    .box {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
        /* box-shadow: 0 0 0 0.5px black; */
    }

    .box::after {
        position: absolute;
        content: "";
        background-color: black;
        height: 0.5px;
        width: 100%;
        bottom: 0;
    }
  • 通过 transform 缩放实现
    给伪类的宽度和高度设置为原来的 200% ，加上 1px 的边框，然后设置 transform 缩放为 0.5 ，此时宽高和原来一样，边框为 0.5px ，最后还要设置原点
    .box {
        position: relative;
        width: 200px;
        height: 200px;
        /* background-color: red; */
        margin: 0 auto;
        /* box-shadow: 0 0 0 0.5px black; */
    }

    .box::after {
        position: absolute;
        content: "";
        width: 200%;
        height: 200%;
        background-color: red;
        border: 1px solid black;
        transform-origin: 0 0;
        transform: scale(0.5);
    }
  • 通过 linear-gradient 边框线性渐变实现
    .box {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 0 auto;
        /* box-shadow: 0 0 0 0.5px black; */
    }

    div::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 1px;
        bottom: 0px;
        background: linear-gradient(to bottom, transparent 50%, black 50%);
    }
avatar
文章
阅读
粉丝