HTML/CSS
总结html/5,css/3相关的知识点
seven豆
以梦为马,重新出发....
展开
-
媒体查询详解析
媒体查询详解析0.什么是媒体查询(Media Queries)1.媒体类型(media-type)2.媒体特性(Media features)3.逻辑操作符(logical operators)0.什么是媒体查询(Media Queries)CSS媒体查询为你提供了一种应用CSS的方法,仅在浏览器和设备的环境与你指定的规则相匹配的时候CSS才会真的被应用媒体 指的就是各种设备 (移动设备, PC设备)查询 指的是要检测属于哪种设备媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备原创 2020-08-13 12:05:49 · 905 阅读 · 1 评论 -
20道HTML基础面试题(附答案)
20道HTML基础面试题(附答案)1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义?2 HTML5为什么只需要写 ?3 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?4 页面导入样式时,使用link和@import有什么区别?5 无样式内容闪烁(FOUC)Flash of Unstyle Content6 介绍一下你对浏览器内核的理解?7 常见的浏览器内核有哪些?8 HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTM转载 2020-08-04 13:01:12 · 628 阅读 · 0 评论 -
50道CSS基础面试题(附答案)
50道CSS基础面试题(附答案)1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?2 box-sizing属性?3 CSS选择器有哪些?哪些属性可以继承?4 CSS优先级算法如何计算?5 CSS3新增伪类有那些?6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?7 display有哪些值?说明他们的作用?8 position的值?9 CSS3有哪些新特性?10 请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?11 用纯CSS创建一个三角形的原理是转载 2020-08-04 11:33:46 · 427 阅读 · 0 评论 -
完美的响应式布局vw+vh+rem视口布局
完美的响应式布局vw+vh+rem 视口布局VM和VH是什么?VM、VH 与rem的使用1、页面布局2、响应垂直居中3、模仿bootstrap的栅栏布局4、rem布局-解决字体适配(此布局在weex中无法识别)5、vw、vh、rem的使用VM和VH是什么?vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。vw是可视窗口的宽度单位,和百分比有点一样原创 2020-07-28 14:50:15 · 9367 阅读 · 2 评论 -
【总结】flex布局的属性与值
【总结】flex布局的属性与值1.什么是flex布局2.容器的属性2.1 flex-direction属性2.2 flex-wrap属性2.3 flex-flow2.4 justify-content属性2.5 align-items属性2. 6 align-content属性3. 项目的属性3.1 order属性3.2 flex-grow属性3.3 flex-shrink属性2.4 flex-basis属性2.5 flex属性3.6 align-self属性1.什么是flex布局Flex 是 Fle原创 2020-07-02 17:50:01 · 808 阅读 · 0 评论 -
web前端id/class命名规范
前端命名规范1、页面结构的命名(id/class)2、导航的命名(id/class)3、功能命名(id/class)1、页面结构的命名(id/class)容器: container页头:header内容:content/container页面主体:main页尾:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽度:wrapper左右中:left right center2、导航的命名(id/class)容器: container页头:hea原创 2020-06-10 11:52:04 · 2303 阅读 · 0 评论 -
CSS预处理器sass/less/stylus的区别
CSS预处理器less/sass/stylus的区别1.什么是 CSS 预处理器2.基本的写法区别2.1 less: 标准的css语法 ,有花括号和冒号2.2 sass: 可以写成上面那样 同时也可以不写花括号2.3 stylus: 花括号和冒号都可以不写 比较自由3. 变量上的差异3.1 Less3.2 sass3.3.stylus:4.嵌套5.运算符6.继承6.1 sass:6.2 stylus6.3 less7.Mixins(混入)7.1 Sass 的混入语法:7.2 Less CSS 的混入语法:7转载 2020-06-28 19:14:10 · 1619 阅读 · 0 评论 -
CSS3中动画实现的方法
CSS3中动画实现的方法一、 transition 属性(过渡)二、 transform 属性(转变)三、animation属性(动画)一、 transition 属性(过渡)transition:定义了元素在变化过程中是怎么样的语法transition: property duration timing-function delay;1.transition-property: 接要改变的属性,如width,height,all等;2.transition-duration: 定义了过渡效果原创 2020-06-28 17:19:16 · 694 阅读 · 0 评论 -
HTML5主要知识点总结
html5主要知识点总结一、HTML5的概念二、HTML5 新增部分简介1,新增的结构标签2,新增的智能表单2.1 input表单新增了type属性值:2.2 表单智能验证2.3 表单新属性2.4 智能表单过滤(datalist)3,video和audio标签4,canves的基本用法4.1 canves元素4.2 一个简单的例子5,js获取元素的新方式6,js操作类名的新方法7,js自定义属性8,网络状态9,地理定位9.1 获取地理位置的方式9.2 API详解10,web存储10.1 特性10.2 win转载 2020-06-28 11:48:41 · 1255 阅读 · 0 评论 -
HTML meta标签总结,HTML5 head meta属性整理
HTML meta标签总结,HTML5 head meta属性整理移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->转载 2020-06-12 14:30:34 · 184 阅读 · 0 评论 -
CSS3选择器-30个
CSS3选择器-30个1、*:通用元素选择器2、#ID:ID选择器3、.class:类选择器4、E :元素选择器5、E X:元素组合选择器6、E :visited and E:link 伪类选择器7、X + Y:毗邻元素选择器8、X > Y:子元素选择器9、X ~ Y:10、X[title]:属性选择器11、x[href="foo"]12、x[href*="nettuts"]13、X[href^="http"]14、x[href$=".jpg"]15、X[data-*="foo"]16、X[foo~=原创 2020-06-28 14:50:23 · 276 阅读 · 0 评论 -
CSS的属性与值
CSS的属性与值一 、背景相关-属性(6)二 、字体相关-属性(8)三 、区块相关-属性(6)四 、边框相关-属性(3)五、盒子相关-属性(6)六、列表相关-属性(3)七、定位相关-属性(6)八、display相关-属性(4)block块元素(div)inline内联元素(span)inline-block行内块元素nonedisplay:inline-block,block,inline元素的区别:九、拓展-属性(3)十、 css属性代码大全10.1 CSS文字属性:10.2、CSS边框空白10.3、C原创 2020-06-28 13:40:12 · 1018 阅读 · 0 评论 -
CSS的单位详解
CSS的单位详解一、px二、em三、%四、rem五、vh/vw六、vmin/vmax本文主要讲下CSS中各类度量单位的意思和区别。开发中最常用到的css单位是px、em、%。随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处。一、px相对长度单位,浏览器的度量单位,相对于物理像素(显示器屏幕分辨率),1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素,有关物理像素和px之间转换比,二、em相对于当前DOM元素的font-size。如果设置当前元素的font原创 2020-06-04 19:11:50 · 1247 阅读 · 0 评论