CSS
文章平均质量分 67
lianglizhongblog
专注前端100年
展开
-
关于CSS样式的一些小结
1.CSS代码语法:CSS样式由选择器和声明组成,声明又由属性和值组成,在英文大括号“{ }”中的就是声明,属性和值之间用英文冒号分隔,当有多条声明时,中间可以用英文分号分隔: p{color:red;font-size:20px;'}2.内联式CSS:A.CSS代码要写在要实现效果的文字内容之前的开始标签里; (正确:<p style="color:red">文字内容</p>原创 2016-08-02 09:44:22 · 346 阅读 · 0 评论 -
关于圣杯布局和双飞翼布局
圣杯布局和双飞翼布局讲的都是三栏布局,其中两栏固定,中间自适应,两者显示的效果是一致的;另外由于没有使用绝对定位position:absolute,所以可以避免发生当页面内容比较多的时候用绝对定位导致的页面布局混乱到处飞的情况:原创 2017-03-24 23:00:53 · 684 阅读 · 0 评论 -
对CSS中各个选择器的一些总结
类选择器:语法:类选择器名称{CSS样式代码;}注意:A.英文原点开头; B.类选择器名称可以任意起(除中文名外),但第一位不能为数字;用法:用合适的标签把要修饰的内容标记起来,然后再该标签的开始标签里面使用class="类选择器名称"为标签设置一个类<span class="类选择器名称">要修饰的内容</span> C.可以与元素选择器进行结合一起使用:p.stress{}(效果:此stress样式只对文档中所有的段落起作用,对标题等不起作用)原创 2016-08-02 15:57:23 · 534 阅读 · 0 评论 -
关于分组选择符
作用:为html中多个标签元素设置同一个样式语法:h1,span{font-size:20px} 相当于下面两行代码 h1{font-size:20px} span{font-size:20px}<!DOCTYPE><html><head><meta http-equiv="content-type' content-type="text/html" charest="utf-8"><title>分组选择器</title>原创 2016-08-02 15:59:27 · 1149 阅读 · 0 评论 -
对CSS盒模型的一些理解
盒子模型是CSS中一个比较重要的概念,它是网页开发布局的基石,它不仅可以存放文字文本,还可以存放图片、音频、视频等内容,所以理解好盒子模型的概念很重要。 盒子模型主要由4部分组成:外边距(margin)、边框(border)、内边距(padding)、内容(content),可以理解为我们日常生活中的一个快递盒子,外边距相当于快递盒与快递盒之间的距离,边框相当于快递盒,内边距相当原创 2017-02-26 11:04:13 · 400 阅读 · 0 评论 -
CSS深入理解流体特性和BFC特性下多栏自适应布局
一、开篇之言要说web上实现两栏自适应布局的方法,一双手都数不过来。不知大家有没有细想过,为什么这些方法可以实现自适应布局呢?本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是针对传统布局。一些现代布局,如弹性盒子模型布局(Flexbox Layout),格栅布局(Grid Layout)不在本文探讨之类。有些人看了个标题,以及看了前面一两段,发现,都是我知转载 2017-03-20 18:40:15 · 513 阅读 · 0 评论 -
关于margin重叠的一些理解
当用margin进行页面布局时,有时会出现margin-top/margin-bottom没有效果的情况或者说没有按照我们“原以为”的效果,在查找BUG时,我们往往却没有意识或者了解到这其实是因为margin出现了重叠的原因:一、相邻元素margin重叠:效果:如果按照我们的原来的“设想”,两个段落之间的距离应该是2em,但是效果却显示的是1em,这是因为第一段的mar原创 2017-03-17 23:52:46 · 5905 阅读 · 0 评论 -
关于width=100%时会出现滚动条的情况
我们常常会看到一些网页永远都是充满屏幕的,不会出现水平方向的滚动条,那这些灵活的页面布局是怎样做到的呢?而有些出现水平方向的滚动条的页面又是因为什么原因呢?例:1.出现水平方向滚动条的页面及代码:*{margin:0;padding:0;}#box{width:100%;background:black;border:5px solid red;}.box1{w原创 2017-03-02 18:11:10 · 25461 阅读 · 0 评论 -
关于CSS中继承、特殊性、重要性、层叠的理解
CSS继承: CSS的某些样式是具有继承性的,那么什么是继承呢?简单的来说,继承就是应用样式的元素的后代会继承样式的某些属性。 例:p{color;blue;} <p>我爱<span>前端开发</span>。</p> 显示的效果为:p中的文本和span中的文本都被设置为了蓝色,即<span>标签继承了<p>标签的样式(注:有些CSS样式是不具有继承性的,如:边框、边界、背景、定位、布局等)注:继承的好处在于恰当地使用继承可以减少代码中的选择器原创 2016-08-02 21:00:29 · 1160 阅读 · 0 评论 -
关于CSS布局
CSS三大定位机制:标准文档流、浮动布局、绝对定位布局。一、标准文档流:1.特点:从上到下,从左到右输出文本。标准文档流里面又分两种情况,即块级元素和行级元素,也可以说标准文档流是由块级标签和行级标签组成的。块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘时会自动换行,常见的块级标签有div、ul、li、dl、dt、p…。行级元素特点:能在同一行显示,不影响HTML文档结构:例:A.<span>专注前端100年</span> B.<span>专注<strong>前端</s原创 2017-03-02 11:25:05 · 512 阅读 · 1 评论