CSS系列篇:零碎、细节点整理(一)

前言


  这个CSS系列,是我从七月开始陆续整理的系列篇。存放在草稿箱里很久了,今晚把这几篇系列篇都整理下排版,然后发布出来。
  为什么要写这个系列,初衷也是因为有很多细节点是需要从源头上去理解的。像是很多属性设置,都是设置在某个元素自身无效,在其父元素设置就生效,诸如这一类的,都是细节点。当然,如果了解原理之后,就不难理解为什么是这样的设置了。
  总之,我热衷做总结梳理,不是我多勤快,恰恰是我懒,想通过这些知识碎点的整理,可以把这些知识点都学薄了,然后在有空就翻看的时候,又常翻常新。当然,后面有觉得需要补充添加的点的话,这几篇CSS系列篇会持续更新。

一、块级元素和行内元素

1、块级元素

(1)块级元素占据一整行的空间,可以再包含块级元素和行内元素。
(2)设定width和height属性有效。设定了width之后,没特殊要求可以不用再设定height,因为高度会按照宽高比自适应,这点常应用在img的使用。
(3)因为占据一整行空间,所以margin:0 auto的居中设定,需要在同时设定了width属性的情况下才有效。
需要记住的常见块级元素:div h1-h6 p form ul li dl ol table tr td th dd dt
让我意外,原来它是块级元素的标签:p,ul,li

2、行内元素

(1)占据本身内容的宽度。设定width和height是无效的。需要设置display:inline-block才能让宽高的设置生效。
(2)同时设定盒模型的margin,只有左右margin生效,上下margin是无效的。

需要记住的常见行内元素:em strong span a br img button input label select textarea script
让我意外,原来它是行内元素的标签:img、input、textarea、script、a

3、置换元素

置换元素就是会根据标签属性来显示的元素,反之就是非置换元素。比如img标签根据src属性来显示,input根据value属性来显示,同理textarea和select元素也是置换元素。
所以img元素是行内元素,同时也是置换元素,置换元素一般内置框高属性,可以直接设置框高。

二、边框

border:1px solid/dotted/dash/double #333
注意:border-style:dotted solid double dashed;,分别对应是点状/实线/双线/虚线

1、应用:实现三角形和由此的其他图形组合
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
2、圆形的实现
Paste_Image.png
3、边框圆角的实现
Paste_Image.png

三、盒模型

1、盒模型:就是margin+border+padding
2、上下左右距离的设置:

(1)举例:padding:10px 20px 30px:代表padding-top:10px;padding-bottom:30px;
padding-left和padding-right都是20px
(2)margin和padding的值都可以是百分比,是相对于父容器而言的

(3)margin外边距合并的问题
如下图:两个div之间的间距应该是10+10=20px,但却是10px。对此的解决方案是使用BFC。

Paste_Image.png

(4)行内元素设定padding的情况
行内元素设定padding时,左右padding是生效的,上下padding撑开了边距,但对其本身高度并没有发生变化,还是那么高。
Paste_Image.png

3、标准盒模型和IE盒模型

IE盒模型,是指IE678在怪异模式下(没有写!DOCTYPE:<!DOCTYPE html>)的盒模型状态
标准盒模型,在IE9以上,以及IE678在严格模式下(<!DOCTYPE html>)就是使用的标准盒模型。
标准盒模型:width和height的宽度高度设置,就是content的大小而已
IE盒模型:width和height的宽度高度设置是content+padding+border的大小。

4、box-sizing的使用

由盒模型延伸,有时我们设置父元素宽度900px,每个子元素小框宽度为300px,边框为1px,全部向左浮动,如果是在标准盒模型下,是无法同一行刚好布满3个小框的。因为实际3个小框的全部长度为300*3+1px*6=906px。这种时候,就需要用上IE盒模型这样的特性,才能刚好一行铺满。这时候就对子元素使用box-sizing:border-box属性,就可以实现刚好占一行。

Paste_Image.png
Paste_Image.png

四、居中的实现:

块级元素:margin:0 auto;(上下边距可以任意设,左右为auto即可)
行内元素:记住:是在其父元素上设定text-align:center,实现行内元素的居中

Paste_Image.png

五、display

块级元素的设定:display:blcok/table/list-item
行内元素的设定:display:inline/inline-table/inline-block

需要记住除了常见的inline、inline-block、block属性值外,还有的其他的display属性选项。

1、display:inline-block

这个属性很重要:因为它让元素呈现inline的特性,不占据一整行,宽度由内容宽度决定,又呈现 block 特性 ,可设置宽高,内外边距

(1)应用:面包屑

面包屑可以直接采用全部左浮动,然后父元素清除浮动的方式。也可以直接使用display:inline-block的属性设置,这种方法更简单。但对应的问题就是两个设置display:inline-block的行内元素之间会有缝隙。
缝隙情况如下:

Paste_Image.png

(2)解决缝隙问题:

因为换行也是等同于空白字符的
消除设置display:inline-block的元素之间的缝隙的方法:
1)、元素标签之间不要换行
如下:span不换行,直接挨着写:


Paste_Image.png

2)、父元素设定font-size:0,将空白字符给去掉,然后子元素再设定font-size大小


Paste_Image.png

六、基线对准问题

vertical-align这个属性,是只对行内元素和表格才有效。
vertical-align:top/middle/bottom,分别实现顶部对齐,中间对齐或底部对齐

Paste_Image.png

七、font字体的设置

1、常见设置:font-size/line-height/font-family/font-weight

(1)综合写法:

font:12px/1.5 arial,'Hiraginp Sans GB','\5b8b\4f53';
2、font-family:字体类型

这是要结合看用户电脑按照的字体文件,支持的话才会展现出来。最好把中文名称的字体都转化为Unicode码,避免无法识别中文的出错:
打开控制台输入:

escape('微软雅黑'),然后把%u转化为\

例如:
宋体 | SimSun | \5B8B\4F53
黑体 | SimHei | \9ED1\4F53
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

Paste_Image.png
3、行高line-height

比如设定60px,字体大小为30px,那么上下就是15px。等于行高是有加上字体大小一起计算的。

4、谷歌的默认字体大小为16px,最小字体为12px

八、文本

1、常见属性

(1)文本对齐:text-align:left/right/center/justify,记住是用在块级元素上的。
记住:text-align:justify是两端对齐,这个有时候很有用
(2)文本线:text-decoration:line-through/overline/underline/none
记住:text-decoration:line-through用于表示错误给划掉时的用法
(3)英文大小写:text-transform:uppercase/lowercase/capitalize
分别是用于将英文单词全部变为大写、小写和首字母为大写。text-transform:capitalize;应用更多些
(4)改变单词之间的间隔:word-spacing:20px;
(5)改变单词字母之间的间隔:letter-spacing:10px;

Paste_Image.png
2、应用:

行内元素的居中,对其父容器块级元素,设置text-align:center;
如果父容器和子元素都是块级元素,那么设定子元素居中,就是对子元素设置使用margin:0 auto;

3、应用:单行文本溢出的部分写为省略号....

注意是对文本所在标签的父级元素做这三行属性设置才生效。下面例子文本标签a的父标签是p,对其做设置:

.mid{
  width:100px;
  height:100px;
  border:2px solid red;
/*以下三行的设置,行成省略号*/
  white-space:nowrap;  /*文字不折行*/
  overflow:hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/*文字超出部分变为省略号*/
}
Paste_Image.png

注意:对于文本换行:中文和英文是有区别的:元素宽度不够宽时,中文是会自动折行换行的,而英文并不会。设置多出的文字为省略号对中英文通用

Paste_Image.png

九、颜色

1、直接使用颜色单词设置:color:red;
2、十六进制:#fff/#eee/#ccc,#000000,为黑色,重复的6位数,就可以简写为3位,#000为黑色,#fff为白色;
3、rgb:(255,255,255)
4、rgba:rgba(0,0,0,0.5),最后一个为透明度的设定

十、单位

下面这几个单位记住:

1、px:固定单位
2、em:相对单位

em是相对父元素字体的大小,是父元素字体的倍数。font-size:2em等同于font-size:200%

3、rem:相对单位

rem是相对于根元素(html)字体的大小,是根元素字体大小的倍数。

4、vw:相对单位

1vw为屏幕宽度的1%,50vw就相当于屏幕宽度的一半。兼容性差,不怎么使用

5、vh:相对单位,1vh为一屏幕宽度。

十一、透明度的设定

1、opacity:0

透明度为0,整个元素看不见,但仍然占据位置

2、visibility:hidden

和opacity:0类似

3、display:none

元素消失,不占据位置

4、backgr-color:rgba(0,0,0,0)

设置透明度透明度为0,从0到1,颜色越重,占据位置

十二、边框阴影的设定

1、用法
Paste_Image.png
2、应用

让边框的四边都有阴影的做法,就是让x-offset和y-offset的值都为0,只设置阴影范围值

.box-shadow-2{  
  -webkit-box-shadow:0 0 10px #0CC;  
  -moz-box-shadow:0 0 10px #0CC;  
  box-shadow:0 0 10px #0CC;  
}  

实现效果:

Paste_Image.png

一篇关于边框阴影的文章:http://blog.csdn.net/freshlover/article/details/7610269

十三、background背景

下面是background的常见常用属性:

1、background-image:url(路径)
2、background-repeat:

选项为repeat/no-repeat
这两个选项为图像重复铺满页面或者不重复。repeat-x,则是水平方向的铺满。repeat-y,则是垂直方向的铺满。

3、background-color:

设置各种颜色

4、background-size

(设置背景的大小,CSS3用法,注意兼容性)
设置百分比、px固定值或者以下两个单词的设置
contain:让图片等比缩放,可以充满屏幕
cover:让图片的高度与屏幕等高,宽度溢出屏幕就不显示

5、background-position

设置背景图像位置,默认是左上角。
设置方式:XY,设置为像素,从左上角开始进行位置移动(0,0)
百分比,移动的距离为其父元素content宽度的百分比
直接单词来定位:[top、center、bottom]、[left、center、right]
background-position:top left,以图片的左上角对其屏幕的左上角

6、background-attachment:fixed

背景图像是否固定,或者随着页面其他内容滚动

7、使用情景

背景图片有镂空,然后也有背景颜色的设置。那么背景颜色就会从背景图片中透出来。

以上属性可以缩写为一行,一次性写多个属性:
background:#fff url(background.gif) no-repeat fixed 0 0;

十四、line-height

1、使用场景:

设置单行文本的行高

2、使用方式:

可以设置为数字,也可以设置为百分比,或是固定宽度

(1)设置为数字

line-height:2:是它本身文字字体大小的两倍。比如一个字体大小是30px,设置行高为60px,那就是除去字体大小的30,还剩下30px是平分字体的上下间隔的,就是上下空白为15px

(2)设置为百分比

line-height:200%:当它是继承而来时,行高是它父元素文字字体大小的两倍。如果是它自身元素设置行高为百分比,那就还是它自身行高的2倍。


Paste_Image.png

在这个例子中,继承而来的line-height:200%,等同于自身元素上设定line-height:40px;
如果父元素没有设定line-height,那么元素自己设定line-height:200%,就是等于设定line-height:2,等于自身高度的2倍,等于line-height:120px


Paste_Image.png
(3)设置为固定宽度

line-height:20px:固定值

3、继承性

line-height是可以继承的,子元素的line-height高度继承父元素的line-height高度

4、应用

通过设定行高和元素高度相同,可以实现文本或子元素的垂直水平居中
当然,也可以把高度设置去掉,也是同样效果。


Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 前言 接着上一篇,这篇主要集中对BFC、浮动、定位、负margin和相对定位的区别、伪类和伪元素进行整理。 一、B...
    huangyh_max阅读 678评论 0 3
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 1,917评论 1 4
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,198评论 0 3
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,532评论 0 30