理解CSS|青训营笔记

我是熊二
43 阅读6分钟

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

CSS是什么？

  • 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

CSS中最基础的规则如下所示：

h1{

color:while;

font-size: 14px;

}

在页面中使用CSS

<!--外链-->
<link rel-"stylesheet" href="/assets/style.css">
<!--嵌入-->
<style>
  li{ margin:0;list-style:none;}
  p{margin:lem 0;}
</style>
<!--内联-->
<p style="margin:lem 0">Example Content</p>

一般来讲，推荐使用外链的方法，而内联则不建议用，它难以维护（在需要更新时，你必须在修改同一个文档的多处地方），并且这种写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解。

选择器Selector

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

伪类

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
    • 结构性伪类

状态伪类：元素处于某种特定状态下才能被选中

选择器组样式如下：

body,h1,h2,h3,h4,h5,ul,ol,li[
 margin; 0;
 padding: 0;
 }
 
[type="checkbox"],[type="radio"]{
  box-sizing: border-box;
   padding: 0;
}

字体 font-family

通用字体族：

  • 英文字体写在中文字体前

font-size

  • 关键字
    • small、medium、large
  • 长度
    • px、em
  • 百分数
    • 相对于父元素字体大小

font-weight的表示范围在100~900, 可加上关键字normal、bold

line-height表示两行文字的基准线

white-space

  • normal：html里多个空格或换行会被合并成一个
  • nowrap:强制不换行
  • pre:保留所有
  • pre-wrap:一行内当显示不下时，自动换行
  • pre-line:需要合并空格，但是保留换行

调试CSS

  • 右键点击页面，选择[检查]
  • 使用快捷键
    • Ctrl+Shift+I(Windows)
    • Cmd+Opt+I(Mac)

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

显式继承

*{
box-sizing:inherit;
}
html{
box-sizing:border-box;
}
.some-widget{
box-sizing:content-box;
}

初始值

  • CSS中，每个属性都有一个初始值
    • background-color的初始值为transparent
    • margin-left的初始值为0
  • 可以使用initial关键字显式重置为初始值
    • background-color:initial

布局（Layout）是什么？

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

布局相关技术：常规流、浮动、绝对定位 常规流中一些常见的布局方式：行级、块级、表格布局、FlexBox、Grid布局

width

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

height

  • 指定content box高度
  • 取值为长度、百分数、auto
  • auto取值由内容计算得来
  • 百分数相对于容器的content box高度
  • 容器由指定的高度时，百分数才生效

padding

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

border

  • 指定容器边框样式、粗细和颜色
  • 三种属性
    • border-width
    • border-style
    • border-color
  • 四个方向
    • border-top
    • border-right
    • border-bottom
    • border-left

若指定长度宽度，但当超过容器本身的宽度范围，这时可以通过overflow控制溢出的部分 overflow:visible、hidden、scroll

块级行级
Block Level BoxInline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子
内容分散在多个行盒（line box）中
body、atricle、div、main、section、h1-6、p、ul、li等span、em、strong、cite、code等
display:blockdisplay:inline

display属性

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

行级排版上下文

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

块级排版上下文

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

BFC内的排版规则

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

Flex Box是什么？

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

通过css控制页面摆放的顺序

主轴方向上的对齐： justify-content: flex-start、flex-end、center、space-between、space-around、space-evenly 侧轴方向上的对齐： align-items（设置在上下文或容器上）: flex-start、flex-end、center、stretch、baseline

Flexibility

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

一些flex布局

flex:1flex-grow:1
flex:100pxflex-basis:100px
flex:2 1flex-grow:2;flex-shrink:1
flex:1 100pxflex-grow:1;flex-basis:100px
flex:2 0 100pxflex-grow:2;flex-shrink:0;flex:basis:100px
flex:autoflex:1 1 auto
flex:noneflex:0 0 auto

Grid布局？

display:grid

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

如何划分网格？ 利用grid-template-columns和grid-template-rows

grid line网格线： 通过编号表示一条线

float浮动

图片左布局

<style>
 img
 {
 float: left;
 }
 </style>

position属性

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

position: relative

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

position：absolute

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

学习CSS的几点建议

  • 充分利用MDN和W3C CSS规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝