CSS
CSS
Linxi~
这个作者很懒,什么都没留下…
展开
-
Flex 布局教程:语法篇
原文链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html一、Flex 布局是什么?Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } Webkit 内核的浏览器,转载 2020-05-19 19:08:39 · 95 阅读 · 0 评论 -
:before , :after 伪类选择器(CSS选择器 一)
1、:before 选择器定义和用法1):before 选择器在被选元素的内容前面插入内容。2)请使用 content 属性来指定要插入的内容。代码示例:在每个 元素前面插入内容,并设置所插入内容的样式:p:before{ content:"台词:-";background-color:yellow;color:red;font-weight:bold;}2、:afte...转载 2020-04-20 12:34:57 · 1761 阅读 · 0 评论 -
CSS浏览器兼容性的4个解决方案
为什么会有浏览器兼容性问题还不是因为浏览器厂商太多了!Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9...360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)……关键是不同厂商,甚至同一厂商不同版本,对同一段CSS的解析效果也不一致,这就导致了页面显示效果不统一,也就带来了兼容性问题。CSS浏览器兼容性问题的...转载 2020-03-19 09:38:25 · 1151 阅读 · 0 评论 -
rem+媒体查询+less——移动端适配方案(一)
一、rem单位rem (root em)是一个相对单位,类似于em,em是相对于父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。em案例: <style> div { font-size: 12px; } p { /* 1. em相对于父...原创 2020-03-15 19:16:40 · 612 阅读 · 0 评论 -
flexible.js ——移动端自适应方案(二)
GitHub下载地址:https://github.com/amfe/lib-flexible官方文档地址:https://github.com/amfe/article/issues/171、什么是flexible.js是一个终端设备适配的解决方案。也就是说它可以让你在不同的终端设备中实现页面适配。是一个用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小,...原创 2020-03-15 18:28:46 · 1050 阅读 · 0 评论 -
网站优化三大标签SEO
SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!常见的搜索引擎,比如百度,谷歌,雅虎,搜狗等等..SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。 简单的说就是,把产品做好,搜索引擎就会介绍客户来。1、网页title 标题title具有不...原创 2020-03-15 10:47:13 · 420 阅读 · 0 评论 -
清楚浮动的几种方法
标准流:盒子会各占整行位置。子盒子若是标准流,父盒子虽然没有高度,但是会撑开父盒子高度。浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父盒子,父盒 子高度为0。(浮动可以让多个块级元素在一行显示,且块与块之间没有空隙,但要注意给父盒子清除浮动,否则父盒子不会被撑开)。清除浮动的本质是什么?清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清...原创 2020-03-14 16:15:43 · 464 阅读 · 0 评论 -
移动端特殊样式CSS
CSS3盒子模型: box-sizing: border-box; -webkit-box-sizing: border-box;点击高亮我们需要清除 设置为transparent 完成透明 -webkit-tap-highlight-color: transparent;在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 -web...原创 2020-03-13 22:08:21 · 236 阅读 · 0 评论 -
相对定位,绝对定位和固定定位的区别
定位:定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素, 通过position属性来设置元素的定位可选值: static:默认值,元素没有开启定位 relative:开启元素的相对定位 absolute:开启元素的绝...转载 2020-03-13 21:46:34 · 1270 阅读 · 0 评论 -
margin相关技巧以及margin-top塌陷问题
使用相关技巧1、设置元素水平居中: margin: 0 auto;2、负边距+定位:水平垂直居中一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。3、margin负值让元素位移及边框合并外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度...原创 2020-03-13 14:27:27 · 381 阅读 · 0 评论 -
css-可继承和不可继承的属性
一、有继承性的属性1、字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。font-stretc...转载 2020-03-13 12:38:22 · 131 阅读 · 0 评论 -
normalize.css使用方法
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset, Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap以及许许多多其他框架、工具和网站上。Normalize.css是一种CSS reset 的替代方案。经过...转载 2020-03-13 12:02:31 · 166 阅读 · 0 评论 -
前端css框架Animate.css的使用
下载:https://www.bootcdn.cn/animate.cssGitHub地址:https://github.com/daneden/animate.css中文:http://www.animate.net.cn使用步骤:1、在头部文件中引入animation.css文件<head> <link rel="stylesheet" href="...转载 2020-03-12 13:57:42 · 299 阅读 · 0 评论