资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端_CSS

前端_CSS

HackerShell / 3162人阅读

摘要：层叠样式表控制网页的样式选择器区分大小写通过选择器来定位文档对象模型的元素将各种样式规则应用在元素上改变元素在页面上的显示方式使用方式内联样式内部样式外部样式盒模型标准盒模型盒模型空间内边距外边距边框块级元素行内元素块级元素默认宽度是块级元

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定义的语言,用来描述二维矢量以及栅格图形.

GPU云服务器 云服务器 前端css css前端 前端css框架 浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117348.html

相关文章

  • 前端构建_webpack

    摘要：一个文件，一张图片一个文件都是一个模块，都能用导入模块的语法的，的导入进来。自身只能读懂类型的文件，其它的都不认识。 webpack 是什么？ webpack是一个前端模块化打包工具指（由于模块化开发，所以需要打包，这里所说的模块化开发主要指JS) 由于现代前端应用程序越来越复杂，需要采用模块化进行开发，但浏览器还未支持模块化开发，所以webpack才诞生 webpack默认只支持js...

    ethernet 评论0 收藏0

  • 2017-09-03 前端日报

    摘要：前端日报精选精读引擎特性带来的的性能变化中的艺术译你是如何拆分组件的高级技巧如何遍历中对象属性一个可视化并且能快速生成模拟数据的持久化服务中文第期中的执行上下文和调用栈是什么译谁更适合前端开发掘金实战桌面计算器应用我们日夜期盼的 2017-09-03 前端日报 精选 精读《V8 引擎特性带来的的 JS 性能变化》CSS中的艺术[译] 你是如何拆分组件的？JS高级技巧如何遍历JavaSc...

    岳光 评论0 收藏0

  • 前端、HTML+CSS+JS编写规范（终极版）

    摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

    jsyzchen 评论0 收藏0

  • 前端、HTML+CSS+JS编写规范（终极版）

    摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

    _Dreams 评论0 收藏0

  • 前端、HTML+CSS+JS编写规范（终极版）

    摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

    Developer 评论0 收藏0

  • 前端进阶之路: 前端架构设计(1)-代码核心

    摘要：可能很多人和我一样首次听到前端架构这个词第一反应是前端还有架构这一说呢在后端开发领域系统规划和可扩展性非常关键因此架构师备受重视早在开发工作启动之前他们就被邀请加入到项目中而且他们会跟客户讨论即将建成的平台的架构要求使用还什么技术栈内容类型 可能很多人和我一样, 首次听到前端架构这个词, 第一反应是: 前端还有架构这一说呢? 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备...

    DevYK 评论0 收藏0

发表评论

登陆后可评论

0条评论

HackerShell

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<