css3中transform 2d转换

css3中transform 2d转换

transform 2d 样式:rotate、skew、scale、translatetransform-origintransform的执行顺序
浏览:113 分类:HTML5/CSS3 标签: transform css3
CSS盒子模型理解

CSS盒子模型理解

        前言        盒子模型,英文即box model。无论是div、span、还是a都是盒子。        但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。        盒子中的区域        一个盒子中主要的属性就5个:width、height、padding、borde
浏览:336 分类:HTML/CSS 标签: 盒子模型 css
css阻塞与js阻塞

css阻塞与js阻塞

        js 的阻塞        所有浏览器在下载 JS 的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载 JS,但是 JS 下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。  由于浏览器为了防止出现 JS 修改 DOM 树
浏览:282 分类:前端干货 标签: js阻塞 css阻塞
css加载方式link和@import的区别

css加载方式link和@import的区别

        有 4 种方式可以在 HTML 中引入 CSS。        1、内联方式:内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。<divstyle="background: red"></div>        这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div> 拥有相同的样式,你不得不重复地为每个 <di
浏览:355 分类:HTML/CSS 标签: css link @import
渐进增强和优雅降级含义及区别

渐进增强和优雅降级含义及区别

        渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。        渐进增强的例子.transition {/*渐进增强写法*/
浏览:284 分类:前端干货 标签: 渐进增强 优雅降级 css3
css3响应式布局

css3响应式布局

        响应式布局        一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。        媒体类型        在何种设备或者软件上将页面打开all:所有媒体braille:盲文触觉设备embossed:盲文打印机print:手持设备projection:打印机预览screen:彩屏设备speech:'听觉'类似的媒体类型tty
浏览:284 分类:CSS3 标签: 响应式 css3 media 媒体查询
弹性盒模型-box/flex

弹性盒模型-box/flex

        1、注意在使用弹性盒模型的时候,父元素必须要加上 display:box 或者 display:inline-box。flex:display:flex; /*新版弹性盒模型 */box:display:-webkit-box;/* 老版弹性盒模型 */        新/旧版弹性盒模型布局<!DOCTYPE html><html>    <head>  
浏览:277 分类:CSS3 标签: box css3 flex
怪异盒子模型:css3 box-sizing布局

怪异盒子模型:css3 box-sizing布局

        盒子模型        关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:padding + border + width= 盒子的宽度padding+ border + height =
浏览:301 分类:CSS3 标签: box-sizing css3
移动端开发去除默认css样式/overflow问题

移动端开发去除默认css样式/overflow问题

        清除点击阴影:-webkit-tap-highlight-colora,input,button{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}        清除按钮圆角 (ios上):-webkit-appearanceinput,button {-webkit-appearance: none;border
浏览:281 分类:移动开发 标签: 移动端 css
用css里的 viewport-fit 标签应对iphone x的刘海

用css里的 viewport-fit 标签应对iphone x的刘海

        iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个 background-color 就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕
浏览:315 分类:CSS3 标签: viewport-fit css iphone
css3实现超出指定文本以省略号显示效果

css3实现超出指定文本以省略号显示效果

css3实现超出指定文本以省略号显示效果:一种是单行显示省略号;另一种是自己可以控制几行,最后一行末尾才显示省略号。css样式.text01 {width:200px;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;-webkit-text-overflow:ellipsis;-moz-text
浏览:291 分类:特效/功能 标签: css3 省略号
《HTML5与CSS3实战指南》pdf下载

《HTML5与CSS3实战指南》pdf下载

        《HTML5与CSS3实战指南》主要介绍HTML5和CSS3的新功能,内容系统全面,易于理解。《HTML5与CSS3实战指南》由11章和3个附录组成,内容包括HTML5和CSS3简介、HTML5标记、HTML5语义、HTML5表单、HTML5音频和视频、CSS3渐变和多背景、CSS转换和过渡、嵌入字体和多列布局、地理定位、离线Web应用和Web存储、画布、SVG
浏览:356 分类:前端书籍 标签: html5 css3

邮箱快速注册

忘记密码