一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left,right) 2.设置overflow除visible以外的值(hidden,auto,scroll) 3.设置display属性(table,table-cell,inline-block,flex) 4.设置position属性(fixed,absolute) 三.BFC的作用 1.可以解决上下marg…

一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择器) 1.后代选择器语法: E F eg: .box a{color:red;} 匹配.box中所有的子元素a 2.子代选择器语法: E>F eg: .box>a{color:red;} 匹配.box中第一级子元素a 3.相邻兄弟选择器语法: E+F eg: .box+h3{background:…

一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成,声明由属性和值组成. 语法: 选择符{ 属性:值; 属性:值; } 注: (1)属性和值用冒号连接 (2) 一条声明结束要添加分号 (3)属性和属性不分先后顺序 3.样式表的创建 1.内联样式(行间样式,行内样式) 语法:<标记 style="属性:值;"></标记&g…

一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景在边框及边框以内的区域可见 b) padding-box 背景在padding及padding以内的区域可见 c) content-box 背景在content区域可见 二.背景原点: background-origin:padding-box|border-box|content-box; 作用:…

一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border-radius:50px 5px; 左上,右下为50px,右上,左下为5px 3.设置三个值 border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px 4.设置四个值 border-radius:0px 10px 30px 50px; 顺时针方向依…

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性…

一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotateX(180deg) 沿x轴翻转 等价于 rotate3d(1,0,0,180deg) b) rotateY(180deg) 沿y轴翻转 等价于 rotate3d(0,1,0,180deg) c) rotate(60deg) 2d空间的旋转,正值为顺时针,负值为逆时针 d) rotateZ(180d…

一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一即可 3.设置栏间距column-gap:数值+单位; 4.设置栏间隔线column-rule:5px solid|dashed|dotted black; 5.设置是否跨栏显示column-span:all(跨栏)|none(不跨栏); 注:a)给需要跨栏显示的元素设置该属性 b) 该属性只有ch…

一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 aside 定义网页的侧边栏 hgroup 将网页某个区域的标题进行组合 figure 将网页中的元素进行组合 figcaption 定义figure的标题 dialog 定义一个对话框 2.定义带有记号的文本语法: <mark>带有记号的文本</mark> 3.定义一定范围内的标量或测…

1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p></div> -- 对 <a href="#"><span></span></a> -- 对 <span><div></div></span> -- 不合理 2. 块级元素不能…