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. JavaWeb应用开发架构浅谈

    本文就我所经历和使用过的技术和框架, 讨论 Java / Javascript 技术组合构成的Web 应用架构. 一. 概述 Web 应用架构可以划分为两大子系统:前端子系统和后台子系统. 前端子系统 ...

  2. Web服务端软件的服务品质概要

    软件品质概述 提供同样功能.产品和服务的服务者中, 竞争力来自功能的多样化和服务品质的差异化, 无论是个体.企业还是国家. 这里的服务指功能.产品的实现程度和处理能力,以及研发/客服提供的技术支持程度 ...

  3. TCP/IP学习-链路层

    链路层: 路径MTU: 网络层: ifconfig netstat IP首部 网络字节序:大端字节序

  4. Android ActionBar的基本用法

    一  说明android 3.0后出现, 在3.0之前称为Title Bar  显示位置在标题栏上可以显示应用程序的图标和activity的标题创建方式的和系统菜单相似, 区别在于: android: ...

  5. ms sql 经典语句【珍藏】

    数据库中字段中有不需要"[演示数据请勿真实购买]" 例如: update Hishop_Products set ProductName = replace(ProductName ...

  6. 【Spring】初始化Spring IoC容器(非Web应用),并获取Bean

    参考文章 Introduction to the Spring IoC container and beans BeanFactory 和ApplicationContext(Bean工厂和应用上下文 ...

  7. CentOS 7 安装、配置、使用 PostgreSQL 9.5及PostGIS2.2

    学习CentOS下安装使用PostgreSQL [安装过程] 1.添加RPM    yum install https://download.postgresql.org/pub/repos/yum/ ...

  8. "Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null"

    翻译过来:“重启调试器:错误调试期间循环:TypeError:firstViewRangeElement为空” 写了一个项目,其中使用到了上传图片的插件,在本地上传图片一切正常,发布到服务器却不正常了 ...

  9. hihoCoder太阁最新面经算法竞赛18

    比赛链接:http://hihocoder.com/contest/hihointerview27/problems A.Big Plus 模拟水 #include <bits/stdc++.h ...

  10. How to install .deb file in Ubuntu

    if you have a .deb file: You can install it using sudo dpkg -i /path/to/deb/file followed by sudo ap ...