前端_CSS

2024年4月5日 158次阅读 来源: SoapEye

CSS

CSS(Cascading Style Sheet): 层叠样式表,控制网页的样式.选择器区分大小写.

  • 通过选择器来定位DOM(文档对象模型)的元素,将各种样式规则应用在元素上,改变元素在页面上的显示方式
  • 使用方式: 内联样式 + 内部样式 + 外部样式

盒模型

  • 标准盒模型 = content +border + padding +margin
  • IE盒模型 = content(content + border + padding) + margin
  • 空间 = padding(内边距) + margin (外边距) + border (边框)

块级元素/行内元素

  • 块级元素: 默认宽度是100%,块级元素会自动从新的一行开始.div table h1-h6 p form ol section canvas audio video
  • 行内元素: 和其他元素在同一行,宽度/高度时内容的宽度和高度,内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变 a span b img input select strong

BFC(块级格式化上下文)

  • 块级格式化上下文,是一个独立的渲染区域,让处于BFC内部的区域与外部的元素相互隔离,使内外元素的定位不会影响.在IE下为layout,可通过zoom:1;触发.
  • 计算BFC容器的高度时,浮动元素也会参与计算.容器内的Box会在垂直方向上一个接着一个放置.两个相邻的box的margin会发生重叠.
  • 触发BFC: float: none; position: absolute; position: fixed; display: inline-block/table-cell/inline-flex/felx; overflow: visable;

层叠上下文
在三维空间.z轴高出普通元素.

  • 触发条件: html ,position, flex, transform opacity filter will-change
  • 层叠等级:在同一层叠上下文中,层叠等级才有意义. background-color < z-index: -1; < 块级元素 < 浮动元素 < 行内元素 < z-index: 0 /auto; < z-index: 1;

颜色与单位

  • 十六进制: hex使用6个十六进制编码来表示颜色,2个一组,分表表示红(R),黄(G),蓝(B).
  • hsl色彩: hsl(60,100%,50%)
  • RGB颜色
  • px em rem %

布局

  • 文本对齐方式: text-align: left/right/center/justify;
  • 盒阴影: box-shadow: offset-x offset-y blur-raduis spread-radius;
  • 透明度: opacity: 0.7;
  • 字母的大小写: text-transform: lowercase / uppercase / capitalize / initial /inherit / noen;
  • 方向: top left right bottom;

  • 定位: position: relative(元素的定位参照于最近的已定位祖先的元素) absolute fixed ;

          相对定位不会受到top/left/right/bottom影响.
  • 堆叠顺序: z-index: 10;
  • 显示: display: table/inline-table/tbale-row-group/table-cell;
  • 变换 transform: scale(2) skewX;
  • 轮廓 outline-width: thin /medium / thick / length /inherit;
  • 圆角 border-radius: 25px;

字体

  color: orange;
  font-family: "Verdana";
  font-size: 16px;
  font-style: normal italic oblique;
  font-weight: 400;
  text-transform: none/lowsercase/uppercase/capitalize;
  text-decoration: none underline overline line-through;
  text-align: left right center;
  line-height: 20px ;

列表

list-style-type:none disc circle square decimal lower-alpha upper-alpha

背景

background-color: green; background-position:left center;
background-size: 120px;   background-repeat: no-repeat;
background-iamge:url('');

动画

  • 列表项目

选择器
伪类选择器:link :hover :active :visited
基础选择器: 标签选择器,类选择器,ID选择器,通配符选择器
组合选择器: 标签指定式选择器 后代选择器 并集选择器
属性选择器:
通配符: *

预编译语言

CSS的预编译语言:基于CSS语言的语法扩展,支持嵌套的书写,拥有继承机制,

SaSS

SaaS是对CSS的扩展,允许使用变量,嵌套规则,混合,导入等功能且完全兼容CSS语法.

  • 变量: $basiccolor: green;
  • 嵌套: ul{padding:0; li {margin:0;}}
  • 导入: @import url(‘s’)
  • 注意SASS中list列表的索引从i开始.
  • 混合代码在选择器前面加上@mixin classname {} 引用时div { @include classname;}

Flex布局

Flex布局父元素

 display: felx | inline-felx;
 flex-direction: row | row-reverse | column | column-reverse; 决定主轴的方向
 felx-wrap: nowrap | wrap | wrap-reverse;  主轴如何换行
 felx-flow: row nowrap;
 justify-content: flex-start | flex-end | center | space-between | space-around;
 align-items: flex-start | felx-end | center | baseline | stretch;
 align=content: felx-start | felx-end | center | space=between | cpace-around | stretch; 多跟轴线的对齐方式,只有一条时不起作用.

Flex布局子元素

order: 0;项目的排列顺序,数值越小,排序越靠前,最小为0.
flex-grow:0;项目的放大比例.
flex-shrink:1;
flex-basis: 350px;
flex: 0 1 auto;
align-self: auto | felx-start | flex-end | center | baseline | stretch;

图片

图片的类型分为位图和矢量图,位图最小单位是像素,每个像素都有自己的颜色信息,jpg,png,webp等都是位图.矢量图也叫向量图,记录元素的形状以及颜色的算法.常见格式sbg,png格式,根据压缩分类(无压缩/无损压缩/有损压缩),区别在于有损压缩处理图像,是去除某些像素的数据,无法找回原图,使用无损处理图像,是对像素数据进行压缩,可以找回原图.
GIf是一种无损压缩,只是对数据进行压缩,基于LZW算法,压缩率在50%,
JPG/JPEG格式,典型的有损压缩图像的格式,两种的保存方式,BaseLine JPEG的储存方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中.Progressive JPEG格式是从模糊渐进到清晰.
PNG-8是PNG的索引色版本,是无损的,使用索引色的,点阵图,更小的体积,透明度的调节.PNG-24是PNG的直接色版本,是无损的,直接色的,点阵图的,最佳效果,不在意图片大小时使用.PNG-32比PNG-24多一个APlha通道,用来支持半透明.
Webp是同时支持有损和无损压缩,使用直接色,点阵图.
SVG是矢量图,使用XML定义的语言,用来描述二维矢量以及栅格图形.

    原文作者：SoapEye
    原文地址: https://segmentfault.com/a/1190000018157370
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞