理解 CSS|青训营笔记

44 阅读5分钟

行内和块级元素

块级元素的特点

  1. 块级元素独占一行,多个块级元素自动换行

  2. 可设置高度、宽度、外边距和内边距

  3. 宽度默认是容器(父级元素)的100%,高度默认为0

  4. 行内元素可放入块级元素和其他行内元素

行内元素的特点

  1. 一行可以显示多个 ,相邻行内元素在一行上

  2. 无法设置宽度和高度,并且垂直方向的外边距和内边距失效

  3. 默认的宽度和高度皆根据内容的大小决定

  4. 行内元素只能容纳文本或其他行内元素

盒模型和选择器

标准盒模型

设定方式:box-sizing: content-box

真实宽度 = width + padding * 2 + border * 2 + margin * 2

真实高度 = height + padding * 2 + border * 2 + margin * 2

替代盒模型

设定方式:box-sizing: border-box

真实宽度 = width + margin * 2

真实高度 = height + margin * 2

CSS选择器类型

列表示例
标签选择器h1 { }
通配选择器* { }
类选择器.box { }
ID选择器#unique { }
属性选择器a[title] { }
伪类选择器p:first-child { }
伪元素选择器p::first-line { }
后代选择器article p
子代选择器article > p

CSS选择器的权重计算

类型权重
!important无穷大
内联样式1000
ID选择器0100
类选择器、伪类选择器、属性选择器0010
标签选择器、伪元素选择器0001
通配选择器、后代选择器、子代选择器0000
继承无权重

元素溢出与隐藏

  1. display:none/block(隐藏后不占据内容)

  2. visibility:hidden/visible(隐藏后仍占据内容)

  3. overflow 可选值

    -visible 元素正常溢出到父元素

    -hidden 元素溢出内容将会被裁剪

    -scroll 元素内部生成X和Y两个方向的滚动条

    -auto 根据元素是否溢出自动生成滚动条

  4. opacity:0/1(设置元素的透明度,仍占据内容)

实践:文本溢出显示省略号

/* 单行文本 */
p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: norwap;
}
/* 多行文本 */
p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Position 布局

developer.mozilla.org/zh-CN/docs/…

Flex & Grid 布局

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

实践:圣杯布局(两边宽度固定,中间宽度自适应)

我们首先设计DOM结构,该布局有三个父容器(顶部、中部和底部),中部则又分为三个子容器(左中右)。

<div class="page">
        <div class="top"></div>
        <div class="middle">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</div>

在圣杯布局中,最值的关注的是中间部分的布局。我们预先设计好页面的顶部和底部,作为固定的样式。

* {
    margin: 0;
    padding: 0;
}

.page {
    height: 100vh;
}

.top {
    height: 60px;
    background-color: #FF9A54;
}

.bottom {
    height: 60px;
    background-color: #FF9A54;
}

Flex布局实现:父容器设为flex,分别对其内部的左右两侧样式设置固定的宽度,中间样式的flex-grow则为1。

注意:middle样式中需使用calc计算中间部分的高度,减去顶部和底部的高度以达到撑满页面的效果。

.middle {
    height: calc(100% - 120px);
    display: flex;
}

.left {
    width: 220px;
    height: 100%;
    background-color: #6690FF
}

.center {
    flex-grow: 1;
    height: 100%;
    background-color: #95EF68
}

.right {
    width: 220px;
    height: 100%;
    background-color: #57F4FD
}

Grid布局实现:父容器设为grid,同时设定grid-template-columns属性,左右宽度为220px,中间宽度为1fr。

.middle {
    height: calc(100% - 120px);
    display: grid;
    grid-template-columns: 220px 1fr 220px;
}

.left {
    height: 100%;
    background-color: #6690FF
}

.center {
    height: 100%;
    background-color: #95EF68
}

.right {
    height: 100%;
    background-color: #57F4FD
}

水平垂直居中方法

DOM结构设计如下:其中的box2就是我们要垂直居中的对象。

<div class="box1">
    <div class="box2"></div>
</div>
  1. 利用Flex布局实现垂直居中;其中box1为父元素,box2为子元素。
.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    background-color: #57F4FD;
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #6690FF;
}
  1. 利用Position布局(子绝父相)实现垂直居中;其中box1为父元素,box2为子元素。
.box1 {
    width: 150px;
    height: 150px;
    background-color: #57F4FD;
    position: relative;
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #6690FF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS 属性书写规范

  1. 布局属性:display|position|float|clear|visibility|overflow

  2. 自身属性:width|height|margin|padding|border|background

  3. 文本属性:color|font|text-align|vertical-align|white-space|break-word

  4. 其他属性:content|cursor|border-radius|box-shadow|text-shadow

常见布局问题

元素的空白缝隙

  1. 图片元素底部存在空白缝隙

原因:图片元素默认基线对齐

解决办法:设置该元素vertical-align属性值为top|middle|bottom其中之一

  1. 行内/行内块元素空白间隙

原因:元素之间受空格字符影响

解决办法:设置父元素font-size属性值为0;或者设定行内元素的margin-left为-4px

float高度塌陷

原因:子元素在设置float属性后脱离文档流,出现父元素(未设置高度)产生高度塌陷的问题

  1. 解决办法:利用双伪元素清除浮动
<style>
.clearfix:after, .clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}
.container {
    border: 10px solid orange;
}
.box {
    float: left;
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>
<div class="container clearfix">
    <div class="box"></div>
</div>
  1. 解决办法:父元素触发BFC块级格式化上下文
<style>
.container {
    overflow: hidden;
    border: 10px solid orange;
}
.box {
    float: left;
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

margin外边距折叠

兄弟元素折叠后的外边距情况:

  • 如果相邻的外边距一正一负,则取两者的和
  • 如果相邻的外边距都是正值,则取两者中值较大的
  • 如果相邻的外边距都是负值,则取两者中绝对值较大的

解决办法:触发元素成为BFC块级格式化上下文

<style>
.container {
    overflow: hidden;
}
.box {
    width: 200px;
    height: 200px;
    background-color: green;
    margin: 20px;
}
</style>
<div class="container">
    <div class="box"></div>
</div>
<div class="box"></div>

margin过度约束

说明:一个元素在其父元素中,水平布局必须要满足以下的等式:父元素内容区的宽度 =

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

用法如下:利用上述特点使一个元素在其父元素水平居中

<style>
.container {
    border: 10px solid orange;
}
.box {
    width: 200px;
    height: 200px;
    background-color: green;
    margin: 0 auto;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

元素脱离文档流

元素脱离文档流后不再占据空间,而是以一种浮动的形式存在。

  1. 设置浮动布局:float:(left / right)

  2. 设置绝对/固定布局:position:(absolute / fixed)

BFC块级上下文

BFC块级上下文作为一个独立容器,不会影响外部元素的布局。

BFC块级上下文的触发条件如下:

  1. position:absolute|fixed|sticky

  2. float:除 none 以外的值

  3. overflow:除 visible 以外的值

  4. display:table-cell|inline-block|flex|gird

  5. 根元素:<html>