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倾斜转换

时间: 2024-10-12 09:56:19

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

web前端基础篇⑨

1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕尺寸,用@media screen引入不同的值 用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据.web和app图不能相同,为了浏览速度最好使用雪碧图. APP端.CSS原生代码写 需要注意:①宽高,使用百分比的方式. ②宽的话,使用rem,不能在一套css里面使用两个

web前端基础篇⑧

1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {color:yellow} 已访问的链接a:hover {color:green} 将鼠标放在链接上a:active {color:blue} 按住链接的时候hover必须放在link和visited后,才有效.active必须放在hover之后,才有效.2.伪元素选择器 也以冒号开始.:first-l

web前端基础篇①

html1.html5和css3在IE上都不支持2.超过1100px以上的宽度,就会出现滚动条3.<!doctype html>解析模式 分为 标准模式 混杂模式 非标准模式-针对IE6or74.标签成对出现,/表示结束5.选中内容 ctrl+/ 即可注释6.<mate charset:“UTF-8”>支持中文显示 ★ps 切图①图片格式为png1.按住shift拖动鼠标建立参考线.2.使用切片工具切出图片3.导出图片:文件-储存为web格式-预设(png-24)-选中图片-储存-

web前端基础篇⑩

1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px 3 3 6 4版 四格式布局(较常用)容器:container_x 后面x代表数字.container_12 将页面分成12等份2.使用bootstrap下载后生成css,js,foots三个文件夹,三个文件夹不能修改不能删,缺一不可.min是压缩版,引入时建议引入压缩版.所有的javascrip

web前端基础篇⑤

1.雪碧图技术(精灵图)sprite cpmpass-合并2.兼容性:1.reset充值技术,normalize技术2.加前缀-webkit —mom -ms— -o-3.<!Doctype>解析模式4.CSS中的hack技术(不同的浏览器显示不同的页面内容)5.条件注释6.倒入包opacity-filter(0-100)png背景-导包圆角-导包,图片BFC=200m:1(无限值)IE下触发BFC环境 haslagout技术双倍margin兼容性问题IE下 3PX差距font-size 10

web前端基础篇②

1.要默认选择在radio或checkbox后加checked 2.想实现单选在radio后加上name 两个命名一样即可出现排斥 3.自动聚焦 autofocus readonly只读 4.placeholder 框里提示的文字 5.textarea 文本域或留言版 也可使用placeholder 6.select下拉列表 option列表选项 size下拉可见的数目 multiple设置多选 8.form表单 method提交方式 只有get和post两种 区别为get:会在地址栏显示输入的

web前端基础篇③

1.video视频 audio音频 controls出现控件 loop循环 autoplay自动播放例:<video/audio src=“地址” controls=“controls” loop autoplay>2.块级元素                 行内元素  独占一行                 不独占一行  设宽高                   不能设宽高  内容不影响边框            内容影响元素大小  可嵌套块级.行内           嵌套会乱  m

web前端基础篇⑥

LESS.①是一种拓展技术,基于css.②包含变量.混合.函数.运算.③简化css代码.降低维护成本④目前用的解析器(koala) 变量(值可变)@变量名:值步骤:①建立文件夹②建html和less两个文件③启动koala④配置路径⑤输入一部分less-刷新koala⑥生成用less命名的css文件⑦在html里面引入的是css文件(不用建css文件)less里引入文件@important 可引入{less 可变的/css不可变的.变量@变量名:具体的值混合(mixins)只有3类class类/

web入侵基础篇

基本的命令....最基础的,为以后提权做准备 入侵基础篇.zip:http://pan.baidu.com/s/1dDhAHwd web入侵基础篇,布布扣,bubuko.com