前端学习之路-CSS

今天也在学的Razor
182 阅读9分钟

前端学习之路-CSS

1、CSS常见的基础属性

  • font-size:字体大小
  • color:前景色(文字颜色)
  • background-color:背景色
  • width:宽度
  • height:高度

2、link元素

外部链接资源元素，规范了文档与外部资源的关系

常见属性如下：

  • href：指定被链接资源的URL（可以是相对也可以是绝对）
  • rel：制定链接类型
    • icon:站点图标
    • stylesheet:CSS样式

3、CSS颜色的表示方式

  • 颜色关键字
  • rgb颜色
    • rgb(0,255,255)
    • #00ffcc或者#0fc

3、文本属性

  • text-decoration(文字装饰线)

    • none:无任何装饰线
    • underline:下划线
    • overline:上划线
    • line-through:中划线(删除线)

  • text-transform(设置大小写)

    • capitalize:首字母大写
    • uppercase:大写
    • lowercase:小写
    • none:无影响

  • text-align(文本对齐方式)

    • left:左对齐
    • right:右对齐
    • center:正中间显示
    • justify:两端对齐

  • font-size

    • 具体数值+单位
    • 百分比:基于父元素的font-size

  • font-family(字体,可设置多)

  • font-weight(文字粗细)

    • 100~900
    • normal:等于400
    • bold:等于700

  • line-height(文本的行高)

    行高的严格定义:两行文字基线(baseline)之间的间距

    基线:与小写字母x最底部对齐的线

    注意:height=line-height可以设置垂直居中,但仅限于文字

行高图解.png

4、CSS选择器

  • 通用选择器

  • 元素选择器

  • 类选择器

  • id选择器

  • 属性选择器

  • 后代选择器

    • 所有后代：选择器之间以空格分割
    • 直接子代：选择器之间以">"分割

  • 兄弟选择器

    • 相邻兄弟选择器:"+"连接
    • 全兄弟选择器:"~"连接

  • 交集选择器

    选择器之间紧密连接(注意元素选择器的连接)

  • 并集选择器

    选择器之间以","分割

  • 伪类选择器(处于元素某种状态时)

    • 动态伪类
      • :link(未访问的元素)
      • :visited(已访问的元素)
      • :hover(鼠标覆盖的元素)
      • :active(正在点击的元素)
      • :focus(聚焦的元素)
    • 结构伪类
      • :nth-child()
      • :nth-last-child()

  • 伪元素

    • ::before
    • ::after

5、属性的继承-层叠-类型

1、继承

常见的具有继承性的属性:(具体应用可以查询文档)

  • font-size
  • font-family
  • font-weight
  • line-height
  • color
  • text-align

2、层叠

对于一个元素，相同的属性可以通过不同的选择器进行多次设置，层层覆盖但只有一个生效

  • 选择器的权重
  • 先后顺序，权重相同，后面设置的生效

选择器的权重：

  • ！important：10000
  • 内联样式：1000
  • id选择器:100
  • 类选择器\属性选择器\伪类:10
  • 元素选择器:1
  • 通配符:0

3、类型

  • 块级元素：独占父元素一行
  • 行内级元素：多个行内级元素可以在父级元素同一行显示

6、元素隐藏方法

  • display设置为none
    • 元素不显示，也不占据位置，不占用任何空间
  • visibility设置为hidden
    • 设置为hidden，虽然元素看不见但是会占据元素应该占据的位置
    • 默认为visible，元素是可见的
  • rgba设置颜色，将a的值设置为0
    • a设置的是alpha的值.可以设置透明度,不影响子元素
  • opacity设置透明度，设置为0
    • 设置整个元素透明度,会影响所有的子元素

6、盒子模型

盒子模型.png

1、上下margin的传递

  • margin-top传递
    • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
  • margin -bottom传递
    • 如果块级元素的底部线与父元素的底部线重叠,并且父元素的高度是auto,那么这个块级元素的margin-bottom的值会传递给父元素
  • 如何防止传递问题的出现?
    • 给父元素设置padding-top\padding-bottom
    • 给父元素设置boder
    • 触发BFC:设置overflow伪auto

2、上下margin的折叠

  • 垂直方向上相邻的2个margin有可能合并为1个margin，这种现象叫做collapse（折叠）
  • 折叠后最终值的计算规则
    • 两个值作比较，去较大值
  • 防止margin collapse
    • 设置其中一个元素的margin

4、块级元素的水平居中问题

因为块级元素默认独占一行，margin-right/margin-left设置为auto,浏览器会自动将剩余的宽度平分给margin-right/margin-left,然后元素就会居中显示.

5、行内非替换元素（span\a\strong\i)的注意事项

  • 内容：width、height不生效
  • 内边距:上下会被撑起,但是不占据空间
  • 边框:上下会被撑起,但是不占据空间
  • 外边距:上下的margin不生效

原因:行内元素是在行内逐个排列,如果单独设置属性可能会破坏整体的美感.

6、css属性：box-sizing

  • 标准盒子
    • padding、boder都布置在width、height外边
  • 怪异盒子
    • padding、boder都布置在width、height里面

7、结构伪类

1、:th-child(1)

  • 父元素中的第一个子元素

2、:th-child(2n)

  • 父元素中的偶数元素

3、:th-child(2n+1)

  • 父元素中的奇数元素

4、nth-child(-n+2)

  • 代表前两个元素

8、网络字体

1、将字体下载到本地

2、通过@font-face引入字体,并且设置格式

网络字体.png

9、布局-元素定位（重点）

1、标准流

默认情况下，元素都是按照标准流进行排布的

  • 从左到右，从上到下按顺序排列。
  • 默认情况下，互相之间不存在层叠现象。

2、position（可以使元素脱离标准流）

  1. static(默认值,静态定位)
  2. relative(相对定位)
    • 定位参照对象是元素自身原来的位置
  3. absolute(绝对定位)
    • 定位参照对象是最邻近的定位祖先元素
    • 如果找不到这样的祖先元素,参照对象是视口
  4. fixed(固定定位)
    • 定位参照对象是视口(viewport)
    • 当画布滚动时,固定不动
  5. sticky(粘性定位)
    • 可以看做的相对定位和固定定位的结合体
    • 允许被定为元素表现得像相对定位一样,直到它滚动到某个阈值点
    • 当达到某个阈值点时,机会变成固定(绝对)定位

注意:

将position设置为absolute\fixed元素的特点一

  • 可以随意设置宽高
  • 宽高默认由内容决定
  • 不再受标准流的约束
    • 不再按照从左到右,从上到下排布
    • 不再严格区分块级\行内级\行内块级
  • 不再向父级汇报宽高数据
  • 脱标元素内部默认还是按照标准流

将position设置为absolute\fixed元素的特点二

  • 对于绝对定位元素来说
    • 定位参照对象的宽度=left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
    • 定位参照对象的高度=top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度

10、布局-浮动(重点)

1、浮动规则一

  • 元素一旦浮动，脱离标准流
    • 向左或者向右移动，直到自己的边界紧贴包含块或者其他浮动元素的边界
    • 定位元素会层叠在浮动元素上面

2、浮动规则二

  • 浮动元素不能超出包含块的边界

3、浮动规则三

  • 浮动元素之间不能层叠
  • 水平方向剩余的空间不够显示浮动元素，浮动元素会向下移动，直到有充足的空间为止

4、浮动规则四

  • 浮动元素不能与行内级内容层叠，行内级内容会被浮动元素推出

浮动的问题：高度塌陷

浮动元素脱离了标准流，变成了脱标元素，不再向父元素汇报高度，那么父元素在计算高度时就会忽略浮动的子元素高度，导致高度塌陷问题。

清除浮动的方式：

  • clear属性：

    • both值:要求元素的顶部低于之前生成的所有浮动元素的底部
    ::after {
	content:'';
	clear:both;
	//伪元素为行内级非替换元素,content为空时,无宽高,不占据空间,所以设置display
	display:block;
}

11、布局-flex(重点)

flexbox(弹性盒子)是一种按行或者按列布局元素的一维布局方法

flex布局的两个重要概念

  1. 开启flex布局的元素叫 flex container
  2. flex container里面的直接子元素叫 flex item

flex item具备以下特点

  • flex item将受flex container属性的设置来进行控制和布局
  • flex item不再严格区分块级元素和行内级元素
  • flex item默认情况下是包裹内容的,但是可以设置宽高

flex布局的模型

主轴(默认从左到右)和交叉轴(默认从上到下)

flex布局模型.png

flex container的一些属性:

  • flex-direction:修改主轴方向
  • flex-wrap:设置单行或者多行
  • justify-content:决定了flex item在主轴上的对齐方式
  • align-items:决定了flex item在交叉轴上的对齐方式
  • align-content:决定了多行flex item在交叉轴上的对齐方式

flex item的一些属性:

  • order:决定了flex item的排列顺序,可以设置任意整数,值越小排前面
  • align-self:覆盖align-items的设置
  • flex-grow:决定flex items如何扩展(拉伸\成长),可设置任意非负数字

12、transform

transform属性允许对某一元素进行某些形变，包括旋转、缩放、倾斜，但是transform对行内级非替换元素无效，比如span、a元素

常见的函数：

  • 平移：translate(x,y)
  • 缩放:scale(x,y)
  • 旋转:rotate(deg)
  • 倾斜:skew(deg,deg)

13、transition动画

CSS transition提供了一种更改CSS属性时控制动画速度的方法,可以让CSS属性变化成为一个持续一段时间的过程,而不是立即生效.

常见的属性:

transition-property:指定应用过度属性的名称

transition-duration:指定过渡动画所需的时间

transition-timing-function:指定动画变化的曲线

transition-delay:指定过渡动画执行之前的等待时间

avatar
文章
阅读
粉丝