css3
实现页面布局、CSS3相关文章
mn_front
这个作者很懒,什么都没留下…
展开
-
详解CSS3中:nth-child的用法
CSS3中:nth-child的实际用途:不适用低版本的IE浏览器!(1):nth-child(n + 4)选取大于等于4的标签,其中"n"为整数,下同.demo01 li:nth-child(n+4){background:#090}(2):nth-child(-n + 4)选取小于等于4的标签.demo01 li:nth-child(-n+4){background:#090}(3):nth-child(2n)选取偶数标签,其中的2n也可以写转载 2021-09-10 11:15:34 · 1933 阅读 · 0 评论 -
2021-06-15css弹性盒子-------桃园三兄弟之:flex-grow、flex-shrink、flex-basis详解
flex-grow、flex-shrink、flex-basis三个属性的作用:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的。(注意:这三个属性都是在子元素上设置的,下面小编要讲的是父元素,指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性:首先是flex-basis,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,...转载 2021-06-15 14:01:05 · 155 阅读 · 0 评论 -
理解em、rem、vh、vw
1.emem就相当于“倍”,相对于该元素的父元素的字体大小进行缩放,如父元素的字体大小为14px,子元素字体大小为1.2em,显示出来的就是16px。2、remr是root的缩写,相对于根节点的字体大小进行缩放,当有嵌套关系的时候,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。3、vhvh就是当前屏幕可见高度的1%,也就是说height: 100vh ==height: 100%;但是有个好处是当元素没有内容时候,设置height: 100%该元素不会被撑开,但.转载 2021-03-06 15:15:33 · 208 阅读 · 0 评论 -
flexible.js 原理解析(看了不会忘)
写关于原理解析的文章很多,每次看完理解了,后面又忘记了,这次自己整理一下,用通俗形象的话梳理一下。flexible.js用来处理移动端各种设备兼容问题。也就是怎么解决移动端尺寸众多的问题,我们的设计稿是固定,怎么办,如果设计稿是弹性的可以随意缩放该多好,想想,有办法了,就像本来你在一张大的纸上面了一副画,现在让你在小的纸上在画一次要怎么画,就是所有东西都等比例画小,如果要画到更大的纸上也是一个道理,等比画大,对不对。现在我们把设计稿分成10等份,设计稿 A = W/10,我们把设备可视区域.转载 2021-03-24 11:35:14 · 1509 阅读 · 0 评论 -
link和@import的区别
页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:XML/HTML代码 XML/HTML代码 两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;原创 2017-03-18 16:33:10 · 282 阅读 · 0 评论 -
css选择器的分类及优先级计算方法…
首先声明一下CSS三大特性——继承、优先级和层叠。继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式。 css选择符分类 首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class原创 2017-03-18 16:32:58 · 871 阅读 · 0 评论 -
Flex 布局教程:语法篇
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功原创 2017-03-18 16:31:56 · 569 阅读 · 0 评论 -
解释下浮动和它的工作原理?清除浮…
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素引起的问题和解决办法?浮动元素引起的问题:父元素的高度无法被撑开,影响与父元素同级的元素与浮动元素同级的非浮动元素(内联元素)会跟随其后若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法:使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问原创 2017-03-18 16:31:54 · 583 阅读 · 0 评论 -
常见图片格式jpg、jpeg、png、gif…
1、 在通常情况下面jpg与jpeg是一样的,只是里面保存的数据不一样,但我们多数使用的是jpg(后缀是小写,大写的有些是无法读写),在图片颜色丰富的地方使用该格式保存,像拍摄的相片,ps合成的图片,经常保存图片时我会压缩20%保留80%,看上去没有变化,但文件大小小了很多;2、 png是用于全透明(保存png24)图片,该格式是多数用于小型格式的图片,不然文件会很大;3、原创 2017-03-18 16:31:51 · 1544 阅读 · 0 评论 -
细说HTML元素的ID和Name属性的区别
可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?!而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。 上周我也遇到了ID和Name的问题,在页面里输入了一个inputtype="hidden",只写了一个ID='SliceIn原创 2017-03-18 16:31:48 · 298 阅读 · 0 评论 -
CSS选择器大全
网页制作poluoluo文章简介:css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。 最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器;css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实原创 2017-03-18 16:31:45 · 260 阅读 · 0 评论 -
css有哪些种类的选择器
CSS的选择器其实大类的话可以分为三类,即id选择器、class选择器、标签选择器。用法如下: #id名{ 属性名:属性值; } .class名{ 属性名:属性值; } 标签名{ 属性名:属性值; }其中,他们之间又可以以不同的方式进行组合,如下: 后代选择器:父代名 后代名 { 属性名:属性值; } 子代选原创 2017-03-18 16:31:42 · 325 阅读 · 0 评论 -
详解 CSS 属性 -&n…
之前写了一篇 《详解CSS 属性 - :before &&:after》 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸@riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别。首先,阅读 w3c 对两者的定义:CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。可以明确两点,第一两者都与选择器相关,原创 2017-03-18 16:31:39 · 2648 阅读 · 0 评论 -
利用@media screen实现网页布…
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@mediascreen属性,根据浏览器宽度判断并输出不同的长宽值 准备工作1:设置Meta标签首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: name="viewport" content="width=device-width, initial-s原创 2017-03-18 16:31:36 · 381 阅读 · 0 评论 -
css3容易混淆记错的记录
:nth-child(n) 选择器匹配属于其父元素的第 N个子元素,不论元素的类型。与类型无关。n 可以是数字、关键词或公式。:nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。原创 2017-03-18 16:31:33 · 245 阅读 · 0 评论 -
Flex布局新旧混合写法详解(兼容微…
flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持flex 的浏览器)。然而在移动开发中,本来绝大多数浏览器(包括安卓2.3以上的自带浏览器)都支持的属性,偏偏有个例外,就是国产某某X5内核神器(不知哪个版本的webkit,仅支持 display:box),自主研发这东西也不好多说什么了,下面入正题。首先还是从原创 2017-03-18 16:29:51 · 283 阅读 · 0 评论