1.BFC－块级元素－块级格式化上下文
布局规则：
独立区域，与外部毫不相关
内部box会在垂直方向，一个个放置
box垂直方向距离由margin决定
BFC的区域不会与float box重叠
计算BFC高度时，也要计算浮动元素
它是被触发（被生成）的
会触发生成BFC环境的元素：
根元素
float属性不为none
position为absolute或fixed
display为inline－block，table－cell，table－caption，flex，inline flex
overflow不为visible
使用overflow－hidden可以最大程度的在不影响其他元素的情况下避免生成BFC环境。

IFC－行内元素－行内格式化上下文
不需要触发
创建一个IFC的环境,让行框的高度是包含块的高度的100%,让行框内部的元素使用vertical-align:middle,就可以实现垂直居中。因此,我们可以在行框中插入一个高度100%的inline-block元素,把整个行框撑高直到包含块的100%。
2.css3浏览器前缀
－webkit－谷歌或苹果
－o－欧朋
－moz－火狐
－ms－ie9
3.边框圆角 简写属性
border－radius：10px 四个角
               10px 20px 左上右下、右上左下 对角线
               10px 20px 30px 左上、右上左下、右下
               10px 20px 30px 40px 由左上开始 顺时针方向
4.边框阴影 简写属性
box－shadow：10px 20px 30px grey
            水平  垂直  模糊  颜色
可接负值，为相反方向。
5.文字阴影
text－shadow 使用同上
6.transform 2d转换
translate偏移 rotate旋转角度 scale按比例缩放 skew倾斜转换

web前端基础篇④的更多相关文章

  1. web前端基础篇⑨

    1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...

  2. web前端-基础篇

    该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...

  3. web前端基础篇⑧

    1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...

  4. web前端基础篇①

    html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...

  5. web前端基础篇⑩

    1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...

  6. web前端基础篇⑦

    1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...

  7. web前端基础篇⑥

    LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...

  8. web前端基础篇⑤

    1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...

  9. web前端基础篇③

    1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src＝“地址” controls＝“controls” loo ...

随机推荐

  1. Linux top和负载的说明

    转自:http://bbs.linuxtone.org/thread-1684-1-1.html top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windo ...

  2. bat命令

    将DIR设置为当前文件所在的绝对路径 @echo off echo 当前盘符:%~d0 echo 当前盘符和路径:%~dp0 echo 当前盘符和路径的短文件名格式:%~sdp0 echo 当前批处理 ...

  3. Centos6版本升级

    1.查看当前版本 [root@IDC-D-1699 docker]# cat /etc/issue CentOS release 6.8 (Final) Kernel \r on an \m 2.升级 ...

  4. FusionCharts或其它flash的div图层总是浮在最上层的问题

    div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上. 由于FusionCharts的图表都放在div中,如果页面还有其他的div,将 ...

  5. Android 网络框架 volley源码剖析

    转载请注明出处:  http://blog.csdn.net/guolin_blog/article/details/17656437 经过前三篇文章的学习,Volley的用法我们已经掌握的差不多了, ...

  6. 实现一个名为Person的类和它的子类Employee，Employee有两个子类Faculty 和Staff。

    (1)Person类中的属性有:姓名name(String类型),地址address(String类型), 电话号码telphone(String类型)和电子邮件地址email(String类型): ...

  7. [问题2014S05] 解答

    [问题2014S05] 解答  (本解答由谷嵘同学提供) 首先, 由 \(\mathrm{tr}(AB)=\mathrm{tr}(BA)\) 可得 \(a=0\), 或者由 Cauchy-Binet ...

  8. android 修改framework下资源文件后如何编译

    在framework/base/core/res/res 下添加资源文件后需要先编译资源 然后编译framework 才可正常引用 进入项目根目录 cd frameworks/base/core/re ...

  9. sqlite创建表

    create table bike (id ) primary key, password ));

  10. 【PL/SQL系列】Oracle存储过程使用动态SQL

    Oracle存储过程相信大家都比较了解,下面就为您介绍Oracle存储过程使用动态SQL的方法,希望对您能够有所帮助. CREATE OR REPLACE PROCEDURE P_STAT_SCORE ...