理解CSS | 青训营笔记

林咩咩
108 阅读5分钟

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

CSS基础知识

CSS（Cascading Style Sheets）是用来定义页面元素样式，定义网页排版；使用CSS方法有三种，分别为： 1.外链(rel href) <link rel="stylesheet" href="url"> 2.嵌入<style></style> 3.内联(在标签类定义<p style="font-size:16px">)

CSS工作过程

step1解析HTML
step2创建DOM树
step3加载CSS
step4解析CSS
step5添加样式到DOM树
step6展示页面

选择器Selector
  • 通配选择器(*{}) 标签选择器 id选择器(唯一) 类选择器 属性选择器 [属性]{} 或者 标签[type=""]

属性选择器例子

<label>用户名：</label>
<input value:"nihao" disabled/> <!--disabled禁用-->

<style>
 [disabled]{
        background:#eee;
        color:#999;
        }
</style>

<label>密码：</label>
<input value:"nihao" type="password"/> <!--disabled禁用-->

<style>
     input[type="password"]{
            color:#999;
        }
</style>
  • ^=匹配符以#开头 $=以什么结尾
伪类
  • 不基于标签和属性定位元素
  • 伪类分类：状态伪类 结构性伪类
<a href="http://baidu.com">
  Baidu.com
</a>
<style>
a:link {
  color: black;
}
a:visited {
  color: gray;
}
a:hover {
  color: orange;
}
a:active {
  color: red;
}

</style>

  <li>你好</li>
  <li>初见</li>
  <li>大家好</li>
  <li>拜拜</li>
</ol>

<style>
li {
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

伪类：通过父级节点的相对位置选中

组合说明

直接组合 AB 满足A且B 后代组合 A B 选中B，A的子孙 亲子组合 A>B 选中B，A的子元素 兄弟选择器 A~B 选中B，A的后边且同级 相邻选择器 A+B 选中B，紧跟A之后

颜色
  • RGB 0-255 红，绿，蓝
  • HSL 色相0-360 饱和度0-100% 亮度0-100%，hsl(,%,%)
  • alpha 不透明度且1为完全不透明度[放置hsl RGB最后一位]
字体
  • font-family 设置多个——适应不同设备访问
  • 通用字体族（一种字体分类）一般放置在font-family最后
  • 如果要预先涉及好字体则使用web fonts
  • font-size：关键词 长度 百分数
  • font-style italic nromal
  • 字重font-weight100-900 加粗 normal bold
  • line-height：行高 设置行间距离
  • font：斜体 粗细 大小/行高 字体族
  • text-align：left center right justify字定位
  • spacing：letter-spacing word-spacing字体间距
  • text-indent：首行缩进
  • text-decoration：underline overline line-through
  • white-sapce：控制空白符
    • normal 合并剩下一空格
    • nowrap强制不换行不保留空格
    • pre 保留所有空格换行
    • pre-wrap保留空格保留换行且一行显示不下则自动换行
    • pre-line合并空格保留换行且一行显示不下则自动换行
  • 更详细定位则优先级更高
CSS继承

某些属性会自动继承其父元素的计算值除非显式指定一个值 eg:.父类.子类

  • 属性值inherit显示继承父类
box-sizing内属性取值

content-box（盒子）：

[padding]和border不被包含在定义的[width]和height之内。( Element width = width + border + padding)，此属性表现为标准模式下的盒模型。

border-box（较为常见）：

padding和border被包含在定义的width和height之内。( Element width = width )，此属性表现为[怪异模式]模型。

CSS布局方式及相关技术
  1. 常规流
  2. 浮动
  3. 绝对定位
    常规流
  • 包括:行级 块级 表格布局 FlexBox Grid布局 auto依赖父级
  • padding ：10px 四边 10px 20px 上下 左右
  • 百分比为相对于所在容器
  • border:颜色粗细样式 顺时针（可以画三角形）
  • margin-left/right：auto（水平居中）
  • margin:垂直方向上合并 只取最大值并不相加(一般情况下）
  • overflow:visible 内容超出容器大小还是显示完全内容
  • hidden 截取超出部分 scroll 显示滚动条滚动
  • overflow-wrap:break-word超出换行
块级VS.行级

1.Block Level Box

  • 不和其他盒子并列摆放,使用所有盒模型属性
  • 例如：body article div main section h1-6 p ul li等
  • display:block

2.Inline Level Box

  • 和其他行级盒子一起放或者拆开多行（有可能中间嵌套了块级） 盒模型中的属性部分不适用（width\height不适用是由内容决定）
  • span em strong cite code等
  • display:inline
  • display:inline-block 不能拆散成多行

根元素 浮动 和绝对定位的元素会脱离常规流

行级排版上下文：

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

  1. 盒子在一行内水平摆放
  2. 一行放不下，换行显示
  3. vertical-align决定一个盒子在行内的垂直对齐
  4. 避开float元素

块级排版上下文：

BFC规则：

  1. 根元素
  2. 浮动、绝对定位、inline-block
  3. Flex子项和Grid子项
  4. voerflow值不是visble的块盒
  5. display：flow-root;

Flex Box排版上下文：

一种新的排版上下文：可以控制子级盒子

  • display:flex;//受flex布局上下文的规则流式单一布局模式
  • justify-content主轴
  • align-items侧轴
  • Flexibility：可以设置子项的弹性
  • flex-grow：number向外扩展（number剩余量分成的量的比值）
  • flex-shrink是否换行（看flex属性）
  • Flexiblility可以设置子项的弹性：当容器有剩余空间时，会伸展，容器空间不够时，会收缩。
  1. flex-grow有剩余空间的伸展能力
  2. flex-shrink容器空间不足时收缩能力
  3. flex-basis没有伸展或收缩时的基础长度

Grid布局二维布局模式：

将网页划分为网格 display:grid
使用grid-template相关属性将容器划分为网格
设置每个子项占N行/列

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px

grid line网格线：即把页面划分为一个个格子并给线编序号（第一条横线、竖线为1......）

grid-row-start:1;
grid-column-start:1;
grid-row-end:1;
grid-column-end:1;

grid area网格区域： 四个数字表示:开始横线/开始竖线/结束横线/结束竖线 eg:grid-area:2/2/4/4;

  • grid-template-columns：第一个网格 ......（列）
  • grid-template-row（行）
  • 1fr 单位为一份，剩下的平均分为N份

总结：学习完该课程对CSS有了更深入的了解，课后将阅读MDN文档和W3C CSS规范进一步了解CSS。

avatar
文章
阅读
粉丝