前端与CSS | 青训营笔记

xcdval
91 阅读3分钟

前端与CSS | 青训营笔记

这是我参与【第四届青训营】笔记创作活动的第2天

一、CSS是什么

  • CSS（Cascading Style sheets）

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

    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
二、CSS使用
h1 {
   color: white;
   font-size: 14px
}

h1 选择器Selector选中页面中的元素，为元素定义样式

color 选择器Property，为样式定义属性

white 属性值Value

14px 声明Declaration

页面中使用CSS
<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
<style>
    li {
        margin: 0;
        list-style: none;
    }
    p {
        margin: 1em 0;
    }
</style>

<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>
三、选择器Selector
  • 找出页面中的元素，以便给他们设置样式
  • 多种方式选择元素
    • 标签名、类名、id
    • 属性
    • DOM树中的位置
通配选择器

用‘*’表示

<h1>This is heading</h1>
<p>this is some paragraph</p>

<style>
    * {
        color: red;
        font-size: 20px;
    }
</style>
id选择器

用‘#id名’表示

<h1 id="logo">
   <img src="https://assets.codepen.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
    HTML文档
</h1>

<style>
    #logo{
        
    }
</style>
类选择器

用’.类名‘表示

<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li>
    <li>learn JavaScript</li>
</ul>

<style>
    .done{
        color: gray;
        text-decoration: line-through;
    }
</style>
属性选择器

用’[属性名]‘表示

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password"/>

<style>
    [disabled] {
        background: #eee;
        color: #999;
    }
</style>
选择器的特异度

image-20220725235908919

继承

显示继承

* {
   box-sizing：inherit；
}
html {
   box-sizing: border-box;
}
.some-weight {
   box-sizing: content-box;
}
四、伪类

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

  • 伪类

    • 状态伪类
    • 结构性伪类

    语法：

    selector：pseudo-class {
  property: value;
}

    实例：

    /* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}
五、布局
  • 确定内容大小和位置的算法
  • 根据元素、容器，兄弟节点和内容等信息来计算

相关技术

常规流

行级

块级

表格布局

FlexBox

Grid布局

image-20220726000952530

块级元素

独占一行、可定义宽高、内边距和外边距

body、article、div、main、section、h1-6、p、ul、li等

display:block

行级元素

可以与其他元素处于一行，不可设置宽高、边距

span、em、strong、cite、code等

display:inline

display属性

block 块级盒子

inline 行级盒子

inline-block 可以设置宽高，不换行

none 排版时忽略

IFC（行级排版上下文）
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内排版规则
    • 一行内水平摆放
    • 一行放不下就换行显示
    • text-align 行内盒子水平对齐
    • vertical-align行内盒子的垂直对齐
    • 避开float元素
BFC（块级排版上下文）
  • 某些容器会创建BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root
    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子margin不与外面合并
    • BFC不会和浮动元素重叠
Flex Box
  • 可以控制子级盒子
    • 摆放的流向（RLUD）
    • 摆放顺序
    • 盒子宽高
    • 水平和垂直方向对齐
    • 是否允许拆行

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

容器属性：

  • flex-direction

    定义容器要在哪个方向上堆叠flex项目

  • flex-wrap

    规定是否应该对flex项目换行

  • flex-flow

​ 同时设置以上两个属性的简写

  • justify-content

    用于对齐flex项目

  • align-items

    用于垂直对齐flex项目

  • align-content

    用于对齐弹性线

Grid布局

  • display:grid使元素生成一个块级的Grid容器

  • 使用grid-template相关属性将容器划分为网格

  • 设置每个子项占哪些行列

avatar
文章
阅读
粉丝