css05

CSS 基本样式：宽高、边框、边距、display字体、文本、颜色

关键词：块级元素+行内元素、宽高、边框(制作三角形)、边距、display(CSS继承)、font、文本、颜色、单位、其他（a链接、小圆点）

注意：默认样式1em=16px

宽高-width、height 只对块级元素设置生效，对行内元素设置无效

边框-border 边框的几个元素 粗细、颜色、类型（实线、虚线、点线）

border-width 粗细

border-color 颜色

border-style style:solid 实线 

style:dotted 点线 

style:dashed 虚线

第一个：style：solid 实线

第二个：style：dotted 点线

第三个：style：dashed 虚线

第四个：组合

第五个：去掉一边

2、如何使用边框做三角形？

width:0; //中间的区域的宽和高 height:0; 

//中间的区域的宽和高 border-top:30px solid transparent; border-left:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid blue;

第一个：

第二个：

第三个：transparent 透明

四、边距

1、盒模型

padding-内边距 四个方向的值，可以合写，值是数值、百分比（相对于父容器，不是自身）

padding-top padding-right padding-bottom padding-left

margin-外边距 四个方向的值，可以合写，值可以是数值、百分比（相对于父容器，不是自身），还可以是负值

外边距合并问题 行内元素中，使用margin和padding左右生效 块级元素居中 margin:0 auto清除元素默认样式的margin 和padding *{margin:0; padding:0;}

行内元素中，使用margin和padding左右生效，上下不生效，如图：

margin:0 auto 块级元素居中

对于块级元素设置 margin:0 auto（即：margin:0 auto 0 auto;）达到居中目的

无宽度时居中不明显 有宽度时居中明显

清除元素默认样式的margin 和padding 由于页面元素在浏览器会有自身的默认样式

margin 和padding清除浏览器的固定样式，重新设置宽高

display-布局

1、块级和行内布局：

块级：block，list-item,table 行内：inline，inline-table，inline-block

display:inline

display:inline-block

2、CSS继承和不继承

继承：每一个父级元素的CSS属性值都可以被应用到它的子元素。可继承属性：font-size、font-family、color

C不继承：页面细节元素，border、padding、margin、background-color 、width、height

六、font（可继承）

font-size：字体大小 12px（较小）14px（正常）16px（浏览器默认）20px（标题大小）22、28、60px（大标题大小） font-family：字体 常用Arial font-weight：文字粗度 常用默认值：regular、bold line-height：行高（文字大小） 可以用百分比、倍数或者固定尺寸。 font-size*line-height ：垂直高度（行+文字占据的垂直空间）

body{

  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

}

或者

p {

  line-height: 1.5;

  font-size: 14px;

  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

  font-weight: bold;

}

2、font-family

（1）字体原理

使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到文字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上

（3）font-family写法

在 CSS 中设置字体时，直接写字体中文或英文名称浏览器都能识别，直接写中文的情况下编码（GB2312、UTF-8 等）不匹配时会产生乱码。保险的方式是将字体名称用Unicode来表示

宋体 | SimSun | \5B8B\4F53 （Unicode码）

黑体 | SimHei | \9ED1\4F53

微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1

？可打开控制台 escape('微软雅黑')，将 %u替换成 \

3、chrome最小字体

chrome 默认字体大小16px, 最小字体 12px

若需要小于12px的字体，可参考以下解决方案：Web-Developer/compatible-with-less-than-12px-fontsize.md at master · islittle/Web-Developer · GitHub

文本

1、类型

text-align： 文本对其方式 left、center（行内元素居中）、right、justify（≈两端对齐）text-indent：文案第一行缩进距离 text-decoration：none（去掉下划线）、underline(增加下划线)、line-through（删除线）、overline（顶部线） color： 文字颜色 text-transform：改变文字大小 none（不改写）、uppercase（小写展示大写） lowercase（大写展示小写）、capitalize（单词的首字母变大写展示） word-spacing：可以改变字（单词）之间的标准间隔（对于中文，每字就是一单词） letter-spacing：字母间隔修改的是字符或字母之间的间隔

图：

2、单行文本溢出

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

.card > h3{

  white-space: nowrap; //规定段落中的文本不进行换行

  overflow: hidden; //清除浮动

  text-overflow: ellipsis;

}

颜色

1、单词： red、blue、pink、yellow、white、black

2、十六进制：

#ff0000 红色

#0000ff 蓝色

#008000 绿色

#000000（黑色）= #000

#ffffff（白色）= #fff

#eeeeee（淡灰色）= #eee

#cccccc（灰色）= #ccc

#666666（深灰色）= #666

#333333（深黑色）= #333

#f00（红色）

#0f0（绿色）

#00f（蓝色）

rgb: rgb(255,255,255)，rgb(0,255,0)

rgba: rgba(0,0,0,0.5) css3中涉及

九、单位

px 固定单位 em 长度单位（相对于当前元素的字体大小） rem 相对于根元素（html）字体大小，即1rem = font-size。移动端较常用。 vw vh 相对单位，1vw为屏幕宽度的1% 兼容性较差 百分比 涉及宽高？文字大小？line-height、position

1、px：固定单位

2、em：相对长度单位，相对于当前元素的字体大小。

3、rem：相对单位，相对于根元素（html）字体大小，即1rem = html设置的font-size。移动端较常用。

4、vw vh：相对单位，1vw为屏幕宽度的1% 兼容性较差

5、百分比：（涉及宽高？文字大小？line-height、position）

其他

a链接 text-decoration: none; ul/li(列表) list-style: none;

1、a链接设置颜色

当鼠标放置a链接，本身就会出现“手”指针的形状效果

a有默认颜色和样式，会覆盖继承的样式

a{

color：red；

text-decoration: none;

}

实际，.box a{}

2、列表去掉点

/* 设定列表样式为：无 ,即没有顺序数字、圆点出现*/

ul{

  list-style: none;

}

/*也可这样*/

li{

  list-style: none;

}

如图：

CSS 基本样式：背景、隐藏&透明、inline-block、line-height

（一）CSS基本样式

关键词：背景、隐藏&透明、display:inline-block、（文本行高）line-height、

一、背景

属性 描述

background 简写属性，将背景属性设置在一个生命中

background-attachment背景图像是否固定或者随着页面的其余部分滚动

background-color 可设置元素的背景颜色

background-image 可把图像设置为背景

background-position 设置背景图像的起始位置（常用于图标在页面上的设置）

background-repeat 设置背景图像是否重复，以及如何重复

background-size 设置背景的大小（兼容性）（css3）

1、background-position：默认图片主要从左上角方向偏移

x y

x% y%

[top | center | bottom] [left | center | right]

2、background-repeat：背景图像是否重复或如何重复

no-repeat：背景图片在规定位置

repeat-x：图片横向重复

repeat-y：图片纵向重复

repeat：全部重复

3、background-size：背景图片大小的设置，用来拉伸、缩放

100px 100px

contain

cover

4、关于background相关元素的属性，

代码：

/*背景色和背景图片使用场景

场景1：两元素适用于页面大、背景图片小

场景2：背景图为.png格式的图片*/

background-color: #f00;

background-image: url(background.gif);

background-repeat: no-repeat;

background-attachment: fixed;

background-position: 0 0;

/*背景位置与页面窗口的宽、高成正相关*/

可缩写为一句：

background: #f00  url(background.gif)  no-repeat  fixed  0 0;

background-size：contain； background-size：cover； display：inline-block display：block

注：使用background-color和background-image，需要注意：

（1）将该页面撑开

（2）注意background-size使用

三、隐藏or透明

opacity: 0; 透明度为0，整体（透明度0-1，0.5为半透明）

visibility: hidden; 即元素看不见，但存在。 和opacity：0；类似

display：none； 消失，不占位置（页面上渲染的其他元素都察觉不到）

background-color：rgba（0，0，0，0.2） 只是背景色透明

四、inline-block

1、定义：既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可设置宽高，内外边距）

注：display:block;的布局下，块级元素的宽度是一个可忽视的问题

2、缝隙问题：如图，

3、行内元素对齐问题：如图，

在inline-block的布局下，可以看成文字对齐。默认情况下，行内元素对齐是以里面内容的底部为基线对齐（至少两个元素进行对比），其他则设置vertical-align：top（bottom、middle等）进行基线对齐（在表格中使用尤为明显）

五、line-height

1、定义：用于设置单行文本的行高。

2、几个问题：

（1）了解line-height和margin、padding在使用上的一个区别

line-height: 2，所占据的行高是本身文字高度的2倍。margin是外边距，padding则是内边距

（2）line-height的用法，数字和百分比的区别

line-height：2 VS line-height： 100%

line-height具有继承性。

line-height: 2，所占据的行高是本身文字高度的2倍。想要页面每个元素都拥有几倍的行高，则设置为数字。

line-height: 200% ，是其父元素文字高度的2倍。（注：百分比有一定的相对性，如本身无设置和设置百分比，便可看出差别）

3、height=line-heihgt

设置垂直居中单行文本，如图：

补充

一、让一个元素"看不见"有几种方式？有什么区别?

1、display: none;

给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。

2、visibility: hidden;

给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。

3、opacity: 0;

给元素设置opacity: 0;后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。

4、设置盒模型属性为0

将height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;来隐藏子元素。

.box1 {

        width: 0;

        height: 0;

        padding: 0;

        border: 0;

        margin: 0;

        overflow: hidden;

}

5、设置元素绝对定位与top、right、bottom、left等将元素移出屏幕

如：

.box1 {

        position: absolute;

        left: 100%;

}

或:

.box1 {

        position: absolute;

        top: 100px;

}

6、设置元素的绝对定位与z-index，将z-index设置成尽量小的负数。

但z-index是相对而言的 ，用z-index就要设置其他元素的z-index值，且如果元素本身占据空间很大就不一定会被z-index值比它大的元素完全覆盖，所以不推荐这种方法。 如：

.box1 {

        position: absolute;

        z-index: -100;

}

.box2 {

        position: absolute;

        z-index: 1;

}

inline-block 元素对不齐 ——无解 —— 用 flex 或 float

inline-block 有空隙 ——用 flex 或 float