transform 2D样式介绍
transform 2D样式介绍
        移动端使用 transform 需要加-webkit-前缀,即 -webkit-transform。        rotate:旋转,常用单位deg;        skew:斜切,skewX、skewY;如:skew(40deg)、skew(40deg,50deg)。skew的默认原点是盒子的中心点,横向为Y轴,纵向为X轴,这跟我们以往接触到的坐标轴刚好
浏览:403 标签: transform
css3响应式布局
css3响应式布局
        响应式布局        一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。        媒体类型        在何种设备或者软件上将页面打开all:所有媒体braille:盲文触觉设备embossed:盲文打印机print:手持设备projection:打印机预览screen:彩屏设备speech:'听觉'类似的媒体类型tty
浏览:379 标签: 响应式 css3 media 媒体查询
弹性盒模型-box/flex
弹性盒模型-box/flex
        1、注意在使用弹性盒模型的时候,父元素必须要加上 display:box 或者 display:inline-box。flex:display:flex; /*新版弹性盒模型 */box:display:-webkit-box;/* 老版弹性盒模型 */        新/旧版弹性盒模型布局<!DOCTYPE html><html>    <head>  
浏览:360 标签: box css3 flex
怪异盒子模型:css3 box-sizing布局
怪异盒子模型:css3 box-sizing布局
        盒子模型        关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑,尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度,需要加上一些其它的属性,例如:padding + border + width= 盒子的宽度padding+ border + height =
浏览:419 标签: box-sizing css3
html5之localstorage本地存储
html5之localstorage本地存储
        HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上,网站在页面加载完毕后可以通过Javascript来获取这些
浏览:375 标签: localstorage html5
div嵌套引起的margin-top不起作用
div嵌套引起的margin-top不起作用
        通常大家在制作网页的过程中会遇到很多棘手的问题,比如我在写一个页面的时候,遇到了div嵌套引起的margin-top不起作用,对内部的div设置margin-top时,内部对于外部的div并没有产生一个margin值,而是外部的div相对于上面的div产生了一个margin值,为什么会出现这种情况???  这是因为嵌套div中margin-top出现转移,在部
浏览:425 标签: margin-top
用css里的 viewport-fit 标签应对iphone x的刘海
用css里的 viewport-fit 标签应对iphone x的刘海
        iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个 background-color 就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕
浏览:420 标签: viewport-fit css iphone
清除浮动的几种方法
清除浮动的几种方法
        一、什么是浮动?        原理: 在css中使用float:left和float:right,使元素脱离文档流。同时显示为类似display:inline-block的形式(可以定义宽高,但是又不会换行)。最大好处是相比于之前的table布局的,更具有灵活性。                二、不清除浮动会产生什么后果?        比如 我想要
浏览:447 标签: 浮动 css
新手如何书写优雅CSS代码
新手如何书写优雅CSS代码
        最近,经常有朋友问我一些工作中遇到的CSS问题。他们总是不能很好的控制CSS,影响CSS的效率发挥。我来分析总结一下错误所在,帮助大家更加容易使用CSS。 本文总结
浏览:464 标签: css
flexbox布局之项目属性设置
flexbox布局之项目属性设置
            项目下的属性介绍           1、order:order属性定义项目的排列顺序;数值越小,排列越靠前,默认为0。            <!DO
浏览:539 标签: flexbox flex css3
flexbox布局之父容器属性设置
flexbox布局之父容器属性设置
        父容器下的属性介绍        1、display : flex        2、flex-direction:决定主轴的方向            ro
浏览:479 标签: flexbox flex css3
flexbox简介及浏览器兼容情况说明
flexbox简介及浏览器兼容情况说明
        1、flexbox简介         flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案。它可以简便,完整,完成页面的布局。     
浏览:713 标签: flexbox flex css3

邮箱快速注册

忘记密码