css3
文章平均质量分 92
web_zsh
时机未到,资格未够,请继续努力
展开
-
CSS3--Flex布局
Flex布局CSS2传统的盒模型采用float – position布局方式。【PC端】CSS3的弹性盒模型采用Flex布局方式。【移动端、响应式Bootstrap】盒模型分类盒模型分类:IE盒模型,标准盒模型,本质区别:宽高计算方式Flex布局的术语Flex Container:Flex容器。启用了弹性盒布局(display:flex;)的块级元素被称为Flex容器。Flex...原创 2019-09-10 19:06:32 · 393 阅读 · 0 评论 -
移动端适配
@charset "utf-8";/* 涉及到的H5新标签,之后课程做介绍 */html{ color:#000;/*默认字体颜色黑色*/ background:#fff;/*默认背景白色*/ overflow-y:scroll;/*纵向滚动*/ /*文本大小根据设备尺寸进行调整,取值auto自动、none不调整、percentage百分比*/ -webkit-text-size-a...原创 2019-09-20 15:53:20 · 163 阅读 · 0 评论 -
CSS3--移动端苹果安卓适配
(一)meta元标签一、iPhone页面会自动把数字当成电话号码,点击后自动跳到电话拨号界面解决方案:禁止手机自动将网页中的电话号码显示为拨号的超链接<meta name="format-detection" content="telephone=no"/>二、微信浏览器自动调整页面字体大小解决方案:禁止微信浏览器调整页面字体大小 body{ -webkit-te...原创 2019-09-19 16:31:08 · 961 阅读 · 0 评论 -
CSS3--多列布局与响应式
多列布局(一)column多列属性一、columns:设置多列布局的列宽和列数。columns: < column-width > < column-count >columns 属性初始值根据元素个别属性而定,它适用于不可替换的块元素、行内块元素、单元格,但是表格元素除外。通俗理解:column属性是一个简写属性,用于设置列宽和列数默认值:columns:a...原创 2019-09-19 15:18:45 · 359 阅读 · 0 评论 -
CSS3--其他新增属性
关键词:box-shadow、overflow-x、overflow-y、min-width、min-height、max-width、max-height、zoom、pointer-events、user-select、content、filter: blur();box-shadow属性语法:box-shadow: none|inset x-offset y-offset blur-...原创 2019-09-19 13:33:04 · 214 阅读 · 0 评论 -
CSS3--增强用户界面
在CSS3中,增加了一些新用户界面特性来调整元素尺寸、框尺寸、外边框等(关键词:box-sizing、resize、outline-width、outline-style、outline-color、outline)常见的用户界面属性浏览器支持,如下图所示:resize属性resize属性规定用户是否可以调整元素尺寸,常用属性值如下:none: 用户无法调整元素的尺寸inherit...原创 2019-09-18 19:45:52 · 203 阅读 · 0 评论 -
CSS3--移动端meta元标签
meta元标签通常在写移动端页面的时候,我们都会设置viewport,保证页面缩放没有问题,最常见的viewport的meta标签如下:开发移动端设置viewport配合进行缩放 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-...原创 2019-09-14 20:43:48 · 286 阅读 · 0 评论 -
CSS3--移动端自适应
CSS单位CSS中,单位分为两类:绝对单位:无论其他相关的设置怎么变化,绝对单位指定的值是不会变化的;相对单位:没有固定的度量值,是由其他元素尺寸来决定的相对值。CSS绝对单位:(绝对单位通常使用在打印方面)CSS相对单位CSS单位浏览器兼容性CSS重要单位集合:px像素Pixel,绝对长度单位,相对于显示器屏幕分辨率而言的。em是相对长度单位,相对于当前对象内文...原创 2019-09-13 21:51:59 · 2471 阅读 · 0 评论 -
CSS--FC格式上下文
【前言】Web页面的布局,常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等。Formatting Context格式上下文Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲...原创 2019-09-10 19:53:22 · 375 阅读 · 1 评论 -
CSS3--物理与逻辑像素
CSS3–物理与逻辑像素移动端开发经常遇到一些概念:物理像素、逻辑像素、像素密度、像素比等。关键词:屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、vw、vh等。一、 vw、vh新单位vw和vh是css3中的新单位,是一种视窗单位,在移动端中也同样适用。窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw...原创 2019-09-10 09:50:53 · 304 阅读 · 0 评论