前端的自我修养- CSS篇

VinsonHe
141 阅读6分钟
HTML语义化

概念：合理使用语义化标签来创建页面结构

常见的语义化标签：header、nav、main、article、section、aside、footer

优点：

  • 没有样式修饰的情况下也能展现出其大致结构
  • 结构清晰易维护
  • 利于搜索引擎优化（SEO）
CSS选择器
  • ID选择器（#myid）
  • 类选择器 (.myclass)
  • 标签选择器 (a,p,div)
  • 属性选择器 (a[rel="external"])
  • 伪类选择器 (div:after，div:nth-child)
  • 后代选择器 (div a)
  • 相邻选择器 (div p)
  • 子选择器 (ul>li)
  • 通配符选择器 (*)

优先级：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承选择器 > 浏览器默认属性

Position属性

固定定位fixed：元素位置相对于浏览器窗口，脱离文档流，不占据空间，通过z-index定义层叠关系

相对定位relative：遵循标准文档流，使用top，right等属性相对于该元素在标准文档流中的位置进行偏移，可通过z-index定义层叠关系

静态定位static：遵循标准文档流，top，left等属性失效

绝对定位absolute：脱离文档流，使用top，right等属性相对于除static定位以外第一个父元素进行定位，通过z-index定义层叠关系

box-sizing属性

content-box(标准盒子模型)：元素的width指的是元素content部分的宽度

border-box(怪异盒子模型)：元素的width包含content+padding+border的宽度

inherit：继承父元素的box-sizing的值

BFC（块级格式上下文）

它是一块独立的渲染区域，规定了内部如何布局，并且与这个区域外部毫不相干

创建方式：

  • 根元素或其他包含它的元素
  • 浮动
  • 绝对定位元素(absolute或fixed)
  • 行内元素(inline-block)
  • overflow值不为visible的元素
  • 弹性盒子(display:flex)

内部特性：

  • 内部盒子会在垂直方向一个个放置
  • 所有子元素与父元素左边对齐
  • 同一个BFC中的元素相互影响，可能发生上下margin重叠，不同BFC可阻止上下margin重叠
  • 容器里面的子元素不会影响到外部元素
  • 计算BFC高度时浮动元素也参与计算

应用场景：

  1. 撑开容器高度

当容器内部包含浮动元素时，父元素的高度无法被撑开，可以将父元素的overflow设置为auto场景BFC来撑开父元素的高度

  1. 解决上下margin重叠

示例：如下代码定义了2个div，并给他们添加了margin属性

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

.box{
    width: 80px;
    height: 80px;
    background: red;
    margin: 20px;
}

image.png

从图中可以看出上下margin发生了重叠。此时通过给其中一个div创建BFC，使其成为一块独立的渲染区域即可解决margin重叠问题。

<div>
    <div class="box">
    </div>
    <div style="overflow:hidden">
        <div class="box">
        </div>
    </div>
</div>

image.png

让元素水平居中

  • 行内元素：在父元素中设置 text-align:center；

  • 确定宽度的块级元素:

    1. 设置margin：0 auto；
    2. 绝对定位+margin-left（父width-子width）/2

  • 未知宽度的块级元素

    1. 将元素设为display：table，再设置margin：0 auto

    2. 将元素设为inline-block，再在父元素中设置text-align:center

    3. 绝对定位+transform，通过translateX将元素本身移动50%

    4. flex布局使用 justify-content:center

让元素垂直居中

  1. line-height,适合纯文字

  2. 父元素设置display:flex,子元素设置margin:auto

  3. 父元素设置相对定位，子元素设置绝对定位+transform进行位移

  4. flex布局，align-items:center

Flex布局

容器的属性：

  • flex-direction：决定主轴方向

    值说明
    row(默认)水平方向，从左至右
    row-reverse水平方向，从右至左
    column垂直方向，从上往下
    column-reverse垂直方向，从下至上

  • flex-wrap：决定换行规则

    值说明
    nowrap(默认)不换行
    wrap换行，第一行在上方
    wrap-reverse换行， 第一行在下方

  • justify-content：水平对齐方式

    值说明
    flex-start(默认值)左对齐
    flex-end右对齐
    center居中
    space-around每个项目两侧间隔相等
    space-between两端对齐，项目之间间隔相等
    space-evenly每个项目的间隔与项目和容器之间的间隔相等

  • align-items：交叉轴对齐方式

    值说明
    flex-start交叉轴起点对齐
    flex-end交叉轴终点对齐
    center交叉轴中点对齐
    baseline项目的第一行文字基线对齐
    stretch(默认值)若项目未设置高度，将占满整个容器高度

  • align-content：多根轴线的对齐方式，需设置flex-wrap:wrap，否则不会生效

    值说明
    flex-start交叉轴起点对齐
    flex-end交叉轴终点对齐
    center交叉轴中点对齐
    space-around每根轴线两侧的间隔相等
    space-between与交叉轴两端对齐，轴线之间的间隔平均分布
    stretch(默认值)轴线占满整个交叉轴

元素的属性：

属性名说明
order定义项目排列顺序，值越小排列越靠前，默认0
flex-grow容器中剩余空间的多少分配给项目，也称为扩展规则，最大值为1
flex-shrink指定元素的收缩规则，仅在默认宽度之和大于容器的时候才会收缩，默认值为1
flex-basis指定元素在容器主轴上的初始大小，优先级高于自身的width
flexflex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto
align-self允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性，可选值与align-items相同
响应式布局

  • Rem布局：rem单位都是相对于根元素html的font-size来决定大小的，当页面尺寸发生变化时只需要改变font-size的值，那么以rem为单位的元素的尺寸也会发生改变。因此可用来做响应式布局，其本质是等比例缩放。

  • 百分比布局：当浏览器尺寸发生变化时，通过百分比可以使浏览器中的元素宽度随浏览器的变化而变化。缺点是计算困难。

    子元素尺寸使用百分比是相对于父元素进行计算的。
    子元素top,left设置百分比是相对于非static定位的父元素的高度与宽度。
    子元素的padding，margin设置百分比无论垂直还是水平方向，都相对于直接父元素的width，与height无关。 
    border-radius设置百分比是相对于自身的宽度。
浮动布局

当元素浮动以后会向左或向右移动，脱离正常文档流，浮动以后就拥有块级元素的性质。缺点是一旦脱离文档流就会无法撑起父元素。

清除浮动
  • 添加带clear的标签
<div>
    <div style="clear:both"></div>
</div>
  • 为父元素创建BFC，添加overflow属性
  • 为父类添加伪类选择器清除浮动
.parent:after{
    display: block;
    content: '';
    clear: both;
}
avatar
文章
阅读
粉丝