liuqiao0327的专栏

Sass 入门文章目录Sass 入门一.Sass是什么?二.语法格式1.语法格式2.编译Sass3.编译配置选项(输出格式)1.未编译的样式2.nested 编译排版格式(嵌套的)3.expanded编译排版格式(展开的)4.compact编译排版格式(紧凑的)5.compressed 编译排版格式(压缩的)4.注释三.Scss1.变量1.普通变量2.默认变量3.全局变量4.特殊变量2.选择器嵌套3.属性嵌套4.@import导入样式1.扩展link和@import区别2.sass中的@import1.全

CSS 伪类和伪元素1.伪类CSS伪类用于向某些选择器添加特殊的效果1.CSS3之前的伪类(状态伪类)图中前5个为状态伪类2.CSS3新增的伪类(结构伪类)属性说明X:first-child其父元素的首个子元素。IE7就可以支持X:last-child匹配父元素中最后一个X元素X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也

CSS BFC原理和应用文章目录CSS BFC原理和应用一.定义二.BFC渲染规则三.生成BFC四.BFC的一些应用1.防止margin重叠2.自适应2栏布局3.清除浮动五.总结一.定义BFC(Block Formattin Context) 直译过来就是块级格式化上下文,它是页面中一块独立渲染的区域,有一套渲染规则,只有Block-level box参与,也就是只有块级盒子参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部无关FC(Formattin Context)是

四大内核与五大浏览器文章目录四大内核与五大浏览器一.简介二.浏览器内核组成三.四大内核1.Trident2.Gecko3.Webkit4.Chromium/Blink5.Presto(淘汰)四.五大浏览器1.IE浏览器2.Opera浏览器3.Safari浏览器4.Firefox浏览器5.Chrome浏览器五.浏览器前缀兼容写法1.-ms-2.-moz-3.-o-4.-webkit-六.总结一.简介浏览器最重要的部分是浏览器的内核,浏览器内核是浏览器的核心,也称之为"渲染引擎",用来解释网页语法并渲染

CSS 元素类型文章目录CSS 元素类型一.概念1.块级元素特点2.内联元素特点(行内元素)二.元素分类1.常见块级元素2.常见的内联元素(行内元素)3.行内块元素三.元素的转换1display属性2.基本类型3.垂直居中一.概念根据CSS显示分类,XHTML元素被分为:块状元素,内联元素(置换元素&&非置换元素)1.块级元素特点(1) 块状元素在网页中就是以块的形式显示,所谓块状就是元素显示未矩形区域(2) 默认情况下,块状元素都会占据一行,通俗的说,两个相邻块状元素不会出现并

CSS 清除浮动方式文章目录CSS 清除浮动方式一.背景二.清除浮动1.空标签 clear:both(不推荐)1.优点2.缺点2.overflow:hidden(不推荐)1.优点2.缺点3.after伪元素清除浮动(推荐使用)1.优点2.缺点4.before和after双伪元素清除浮动()1.优点2.缺点浮动元素脱离文档流,就无法撑起父元素,会造成父元素的高度塌陷一.背景先来了解下为什么要清除浮动?#box{ border:1px solid red; /* overflow:

CSS3 选择器归纳文章目录CSS3 选择器归纳一.CSS之前的选择器1.元素选择器2.id选择器3.类(class)选择器4.属性选择器5.派生选择器6.相邻兄弟选择器二.CSS3新增选择器1.属性选择器2.结构性伪类选择器3.目标伪类选择器4.UI 元素状态伪类选择器5.动态伪类选择器6.否定伪类选择器7.层级选择器一.CSS之前的选择器1.元素选择器文档的元素就是最基本的选择器h1{ color:red;}2.id选择器可以为标有特定id的元素指定特定的样式#box{ b

CSS3 弹性盒Flex文章目录CSS3 弹性盒Flex一.简介二.Flex1.Flex布局是什么?2.容器属性1.flex-direction2.justify-content3.align-items4.flex-wrap5.align-content6.flex-flow3.子元素属性1.order2.flex-grow3.flex-shrink4.flex-basis5.flex6.align-self一.简介弹性盒子是CSS3的一种新的布局模式.CSS3弹性盒(flexbox)是一种当页面

CSS 几种常见的布局方式文章目录CSS 几种常见的布局方式一.单列布局二.两列布局1.方法一 利用float和margin-left实现2.方法二 利用float和overflow实现3.方法三 利用flex弹性盒4.方法四 利用grid栅格布局5.方法五 利用table布局三.三列布局1.方法一 利用float和margin是实现2.方法二: 利用float3.方法三:利用绝对定位absolute4.方法四 弹性盒flex5.方法五 table布局6.方法六 grid栅格布局7.圣杯布局8.双飞翼布局

CSS 水平垂直居中方式文章目录CSS 水平垂直居中方式1.绝对定位 absolute 负margin1.优点2.缺点2.绝对定位 absolute margin:auto1.优点2.缺点3.绝对定位 absolute calc1.优点2.缺点4.绝对定位 absolute transform1.优点2.缺点5.flex布局1.优点2.缺点6.table表格7.grid布局1.父元素指定子元素对齐方式:2.子元素指定自己的对齐方式:8.空元素span9.总结1.绝对定位 absolute 负margin

Html5新特性文章目录Html5新特性一.简介二.十大新特性1.语义化结构化标签1.section2.header3.footer4.nav5.article6.aside7.figure和figcaption8.main9.兼容低版本2.增强型表单3.多媒体标签1.视频 video2.音频 audio4.本地存储1.localStorage 永久存储2.sessionStorage 临时存储3.相同的API操作4.cookies,sessionStorage,localStorage的区别5.Canv

CSS 属性文章目录CSS 属性一.CSS属性组成和作用二.文本字体属性1.font-size 文体大小2.font-family 字体的类型3.font-weight 字体加粗4.font-style 字体倾斜5.font-variant 设置文本小型大写字母6.font 简写7.line-height 行高8.color 文本颜色9.text-transform 检索和设置对象中的大小写10. text-align 文本对齐方式11.text-decoration 文本修饰12.text-indent

CSS 盒模型和怪异盒模型一.概念盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距)下面图片说明了盒子模型:Margin(外边距):在元素外边的空白区域,被称为外边距Border(边框): 元素的边框Padding(内边距) 元素内容到元素的边框之间的距离,也称补白.Content 盒子的内容二.标准盒模型和IE盒模型盒模型又分为标准盒模型(W3