CSS的认知

shuye1015
96 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天

CSS是什么？

CSS全称是Cascading Style Sheets

  • 用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

三大特征

  • HTML(内容)
  • css(样式)
  • JavaScript(行为)

简单的CSS代码示例

    h1{
        color: white;
        font-size: 14px;
    }
复制代码

在页面中如何使用CSS

  • 外链式
    <link rel="stylesheet" href="./index.css">
复制代码
  • 嵌入式
    <style>
        h1{
            color: white;
            font-size: 14px;
        }
    </style>
复制代码
  • 内联式
    <h1 style="color: violet;">我是h1</h1>
复制代码

选择器selector

  • 找出页面中的元素，以便于给他们设置样式

  • 使用多种方式选择元素

  • 1.按照标签名、类名或id
  • 2.按照属性
  • 3.按照DOM树中的位置

选择器分类

  • 1.通配选择器
  • 2.标签选择器
  • 3.id选择器
  • 4.类选择器
  • 5.属性选择器

伪类(pesudo - classes)

不基于标签和属性定位元素

几种伪类

  • 状态伪类
  • 结构性伪类

组合(Combinators)

名称语法说明示例
直接组合AB满足A同时满足Binput：focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A>B选中B，如果它是A的子元素section > p
兄弟选择器A~B选中B，如果它在A后且和A同级h2 ~ p
相邻选择器A+B选中B，如果它紧跟在A后面h2 + p

选择器组使用规范

 body,h1,h2,h3,h4,h5,h6,ul,ol,li{
   margin:0;
   padding:0
 }
复制代码

    [type="checked"],[type="radio"]{
        box-sizing=border-box;
        padding:0;
    }
复制代码

颜色-RGB

示例： cdpn.io/webzhao/deb…

颜色-HSL

HUE

  • 色相(H)是色彩的基本属性，如红色、黄色等；取值范围是0-360

Saturation

  • 饱和度(s)是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%

Lightness

  • 亮度(L)指颜色的明亮程度，越高颜色越亮；取值范围是0-100%

示例：cdpn.io/webzhao/deb…

CSS颜色关键字

cdpn.io/webzhao/deb…

alpha透明度

cdpn.io/webzhao/deb…

字体 font-family

通用字体族 cdpn.io/webzhao/deb…

使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

字体 font-size

关键字

  • small、medium、large

长度

  • px、em

百分数

  • 相对于父元素字体大小

调试CSS

右键点击页面，选择[检查]

使用 快捷键

  • ctrl+shift+I (Window)
  • cmd+opt+I (MAC)

CSS初始值

CSS中，每个属性都有一个初始值

  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0

可以使用 initial 关键字显示重置为初始值

  • background-color:initial

CSS求值过程

cdpn.io/webzhao/deb…

布局(Layout)是什么？

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

  • 常规流

  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid 布局
  • 浮动
  • 绝对定位

width

  • 指定 content box 宽度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其他属性确定
  • 百分数相对于容器的 content box 宽度

Height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 由浏览器根据其他属性确定
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

  • border-width    border:1px solid #ccc
  • border-style    border-left:1px solid #ccc
  • border-color    border-right:2px solid red

  • 四个方向

  • border-top
  • border-right
  • border-bottom
  • border-left

当四条边框颜色不同时

示例：cdpn.io/webzhao/deb…

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

margin:auto 水平居中

示例： codepen.io/webzhao/emb…

margin collapse

示例： codepen.io/webzhao/emb…

overlow

示例： cdpn.io/webzhao/deb…

块级与行级

Block Level BoxInline Level BOX
不和其他盒子并列拜访和其他行级盒子一起放在一行或拆开成多行
使用所有的盒模型属性盒模型中的width、heigh不适用
块级元素行级元素
生成块级元素- 生成行级元素 - 内容分散在多个行盒(line box) 中
body、article、div、main、section、h1-h6、p、ul、li等span、em、strong、cite、code等
display:blockdisplay:inline

display 属性

blcok块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none排版时完全被忽略

常规流 Normal Flow

  • 根元素、浮动和绝对定位的元素回脱离常规流
  • 其他元素都在常规流之内(in-flow)
  • 常规流中的盒子，在某种排版上下文中参与布局

排版方式

  • 1.行级排版上下文

  • Inline Fromatting Context(IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

  • 盒子在一行内水平摆放>
  • 一行放不下时，换行显示
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素
  • 示例：codepen.io/webzhao/emb…

  • 2.块级排版上下文

  • Block Formatting Context(BFC)

  • 某些容器会创建一个BFC

  • 根元素
  • 浮动、绝对定位、inline-block
  • flex 子项和 Grid 子项
  • overflow 值不是 visible 的块盒
  • display：flow-root
  • 3.Table排版上下文
  • 4.Flex排版上下文
  • 5.Grid排版上下文

BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠
  • 示例：codepen.io/webzhao/emb…

Flex Box是什么？

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

  • 摆放的流向(→ ⬅ ⬆ ⬇)
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许拆行
  • 示例：codepen.io/webzhao/emb…

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会伸缩。

  • flex-grow 有剩余空间时的伸展能力

  • flex-shrink 容器控件不足时收缩的能力

  • flex-basis 没有伸展或收缩时的基础长度
avatar
文章
阅读
粉丝