web前端基础篇④
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前端基础篇④的更多相关文章
- web前端基础篇⑨
1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕 ...
- web前端-基础篇
该篇仅是本人学习前端时,做的备忘笔记: 一.背景图片设置: 设置背景图时的css代码:background-image:url(图片的url路径); ps:设置好这个背景后请一定要设置该背景图片的大小 ...
- web前端基础篇⑧
1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {co ...
- web前端基础篇①
html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6o ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- web前端基础篇⑦
1.img src/url后一般接地址信息 标题为<h1>-<h6> 字体依次变小 预文本格式<pre></pre> 2.a标签实现跳转 例:<a ...
- web前端基础篇⑥
LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两 ...
- web前端基础篇⑤
1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype&g ...
- web前端基础篇③
1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loo ...
随机推荐
- wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
一 先说说,这两个概念是什么意思 全局可观察变量?没听说过,只听过全局变量,那你out了,因为我要充分发挥绑定技术来控制页面部局,组件的隐藏与显示,文字内容,样式改变.看我博文大家知道,我想用绑定技术 ...
- Microsoft JScript提示‘DIRECT’未定义(2014-08-26记)
当启动Applet的时候,页面弹出:DIRECT’未定义可能的问题是:java控制面板的网络设置问题,可能使用了代理解决: 打开java控制面板--->网络设置-->直接连接-->确 ...
- 【Jersey】IntelliJ IDEA + Maven + Jetty + Jersey搭建RESTful服务
本文参考以下内容: 使用Jersey实现RESTful风格的webservice(一) Starting out with Jersey & Apache Tomcat using Intel ...
- Linux C Programing - Arguments(2)
#include <iostream> #include <stdlib.h> #include <stdio.h> //printf #include <u ...
- StringBuilder和StringBuffer区别
一.StringBuilder 一个可变的字符序列.此类提供了一个与StringBuffer兼容的API,但不保证同步.该类被设计用作StringBuffer的一个简易替换,用在字符串缓冲区被单个线程 ...
- 用andtoid studio获取天气数据并解析适配
1.申请拿到数据 可以用“聚合数据” 2.在android studio中导入需要的jar包 复制—>app—>libs—>粘贴—>右击—>Add As Library… ...
- 添加一个DataSet
/// <summary> /// 返回状态数据 /// </summary> /// <param name="values"></pa ...
- 【Android】设置 LinearLayout 的样式
前言 LinearLayout是最常用的控件之一,主要是用来进行排版布局,本人介绍如何给LinearLayout 增加边框样式,在增加样式之前的效果如下: 可以看得出来,每个LinearLayout几 ...
- Java 中的 static 使用之静态初始化块
Java 中可以通过初始化块进行数据赋值.如: 在类的声明中,可以包含多个初始化块,当创建类的实例时,就会依次执行这些代码块.如果使用 static 修饰初始化块,就称为静态初始化块. 需要特别注意: ...
- windows中的程序放在linux上因为字符集不同出错
问题 在把windows下的一个python脚本挪到linux下的时候,出现了一个奇怪的问题,就是标题那样的报错,很明显,shell没有用对应的python解释器去解释脚本,而是直接用shell解释了 ...