理解css｜青训营笔记

冰草莓好吃z
83 阅读5分钟

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

一、CSS是什么？

  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
  • 引入css的三种方式
    • 外链式
    • 嵌入式
    • 内联式
//1.外链式
<link rel="stylesheet" href="./css/bootstrap.css> 
//2.嵌入式
<style>
    div{
        width:100px 
    } 
</style> 
//3.内联式
<div style="width:100px"></div>

二、CSS工作原理

0173c389b47bb8aab2591f6d6ba1df0.jpg

选择器Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择器
    • 按照标签名、类名、id
    • 按照属性
    • 按照DOM树中的位置

通配选择器

<h1>heading</h1>
<p>paragraph</p>
<style>
    *{
        color: red;
        font-size: 20px;
    }
</style>

标签选择器

<h1>heading</h1>
<p>paragraph</p>
<style>
    h1{
        color: orange;
    }
    p{
        color: red;
    }
</style>

id选择器（唯一）

<h1 id="logo">heading</h1>
<style>
    #logo{
        font-size: 60px;
    }
</style>

类选择器

<ul>
    <li class="done">lean html</li>
    <li class="done">lean css</li>
    <li>lean javascript</li>
</ul>
<style>
    .done{
        color: aqua;
        text-decoration: line-through;
    }
</style>

属性选择器

<label>用户名</label>
<input value="你好" disabled />
<label>密码：</label>
<input value="123456" type="password"/>
<style>
    [disabled]{
        background-color: #eee;
        color: #999;
    }
</style>

伪类（pseudo-classes）

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类（比如链接鼠标移动、输入框等）
    • 结构性伪类

继承（某些属性会自动继承其父元素的计算值，除非显示指定一个值）

<p>This is a <em>text</em>of <strong>inherit</strong></p>
<style>
    body{
        font-size: 20px;
    }
    p{
        color: red;
    }
    em{
        counter-reset: blue;
    }
</style>

布局（Layout）

  • 确定内容的大小和位置的算法

  • 依据元素，容器，兄弟节点和内容等信息来计算

  • 布局的相关技术：

    • 常规流（行级，块级，表格布局，FlexBox,Grid布局）
    • 浮动（图片浮动）
    • 绝对定位

  • 常规流（Normal Flow）

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

  • 行级排版上下文

    • 只包含行级盒子的容器会创建一个IFC
    • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动（float）元素

  • 块级排版上下文

    • 某些容器会创建一个BFC
    • 根元素
    • 浮动，绝对定位，inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display:flow-root

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

  • Flex Box

    • 一种新的排版上下文
    • 它可以控制子级盒子的：
    • 摆放的流向
    • 摆放的顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许拆行

001.jpg

002.jpg

  • Flexibility

    • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
    • flex-grow有剩余空间时的伸展能力
    • flex-shrink容器空间不足时收缩的能力
    • flex-basis没有伸展或收缩时的基础长度

  • display:grid

    • display:grid使元素生成一个块级的Grid容器
    • 使用grid-template相关属性将容器划分为网格
    • 设置每一个子项占那些行/列

  • position属性

    • static 默认值，非定位元素
    • relative 相对自身原本位置偏移，不脱离文档流
    • absolute 绝对定位，相对非static祖先元素定位
    • fixed 相对于视口绝对定位

  • position:relative

    • 在常规流里面布局
    • 相对于自己本应该在的位置进行偏移
    • 使用top,left,bottom,right设置偏移长度
    • 流内其他元素当它没有偏移一样布局

  • position:absolute

    • 脱离常规流
    • 相对于最近的非static祖先定位
    • 不会对流内元素布局造成影响

123.jpg

  • width

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

  • height

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

236.jpg

  • padding

    • 指定元素四个方向的内边距
    • 百分数相对于容器宽度
    • 10px:上下10px
    • 10px 20px:上下10px 左右20px
    • 10px 20px 10px 20px:上10px 右20px 下10px 左20px(顺时针)

  • border

    • 指定容器边框样式，粗细和颜色
    • 三种属性：border-width(宽度),border-style（实线或者虚线）,border-color（颜色）
    • 四个方向：border-top,border-right,border-bottom,border-left

  • margin

    • 指定元素四个方向的外边距
    • 取值可以是长度，百分数，auto
    • 百分数相对于容器宽度
    • margin:auto水平居中
    • margin:collapse

  • box-sizing:border-box

    • padding和border的值不会在影响元素的宽高，相当于把padding和border的值都算在content里

110.jpg

三、CSS属性

  • alpha：透明度
    • #ff0000ff
    • rgba（255,0,0,1）
    • hsla(0,100%,59%,1)
  • font-family：字体
  • line-height：文字间距
  • font-size：字体大小
    • 关键字 small,medium,large
    • 长度 px,em
    • 百分数 相对于父元素字体大小
  • text-align：文本对齐方式
  • text-indent：文本缩进
  • text-decoration： 属性规定添加到文本的修饰，下划线、上划线、删除线
  • overflow
    • visible(默认超出的也显示)
    • hidden(超出的隐藏)
    • scroll(超出以滚动条呈现)

四、块级VS行级

888.jpg

999.jpg

  • display属性
    • block：块级盒子
    • inline：行级盒子
    • inline-block:本身是行级，可以放在行盒中，可以设置宽高；作为一个整体不会被拆散成多行
    • none:排版时完全被忽略
avatar
文章
阅读
粉丝