CSS入门系列之二

文章还在编辑中

边框border

边框的组成：粗细、样式、颜色

1
2


border:1px solid red;
border-right:5px dashed black;

**边框的单一方向/条件设置：**比如只改变上边框的颜色border-top-color，使用这种方式可以单独指定颜色，而无需同时指定粗细、样式、颜色。

边框的特性：边框的形状是非矩形，所以可以使用边框实现三角形：

背景background

内容可以撑开容器，而背景是不会占用容器

属性	描述
`background-color:gray`	背景颜色
`background-image:url(bg.jpg)`	背景图
`background-repeat:no-repeat`	背景重复
`background-position:10px 20px`	背景图位置调整(第一个代表x轴，第二个为y轴)
`background-attachment:fixed`	背景图是否跟随滚动条滚动（`fixed`固定在浏览器可视区域，`scroll`不固定）
`background: red url(img.jpg) repeat-x 10px 20px scroll`	background复合(简写)样式：属性不要求按顺序书写

background-position: 的几个特殊值

对于x轴：left,right,center；
对于y轴：top,bottom,center；如果省略 y 轴的值，则其默认为center。

文本

示例	描述
font-weight	文字着重
font-style:italic	文字倾斜
font-size:16px	文字大小
font-family:	字体

前缀都是 font，那么也存在一种简化的写法：

1
2
3
4
5


/* font复合样式需要注意书写顺序 */
font: font-style | font-weight | font-size | font-family

/* 也可将行高结合在一起 */
font: bold italic 26px/30px "楷体"

行高line-height

某书中的解释：行高指的是段落的行距，即段落内每行之间的距离。

妙味课堂某老师的解释：文字在一行里占用的位置。

**注意：**行高将会影响到该行内文字所处的位置。是贴着一行的底部书写，还是贴着顶部书写，还是在一行的中间书写。（要想观察的更加仔细，可以截图，然后在图片编辑器中详细查看）

容器高度height与行高line-height：

当行高与容器高度相同时且文字只有一行时文字会垂直居中显示。

文字大小的测量

每种字体的设计都不一样，课程中老师讲解的"宋体"，感觉对于其它字体并不适用。

多行文字测量行高

多行文字测量行高的方法(在PS中测量设计师给的图片)：

确认文字大小
确认两行文字之间的空隙大小
空隙大小除以2，得到的值就是每行文字的上下的空隙大小
- 这里当文字为奇数时，那么文字的上方要比下方少一个像素
通过辅助线测量多行文字的行高

文本设置

属性	说明
color	文字颜色
text-align	文本对齐方式
text-indent	首行缩进(em缩进字符，缩进不能使用固定值)
text-decoration	文本修饰
letter-spacing	字母间距
word-spacing	单词间距(以空格为解析单位，对中文不大适用)
white-space	强制不换行

文字与文字之间的距离是由word-spacing加上空格的宽度来决定的，所以用word-spacing这个属性的时候一定要注意空格的宽度

一个空格有多大？

宋体字体下文字大小的一半。

盒模型

略

网易产品模块练习

出错点：

background 不可拆分
文本垂直居中
padding会改变元素大小
word-spacing的宽度计算
单词换行

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


#netease-model > div {
    border-left:2px solid #beafe2;
    border-right:2px solid #beafe2;
    border-bottom: 2px solid #ece7f7;
    /* 不可这样提取(最明显的一点：no-repeat  39px center 都是用于背景图片的，但是图片并不在这里。另外应该还有其它原因) */
    /* background: white no-repeat 39px center; */
    font-size: 16px;
    line-height: 38px;
    font-family:"宋体";
    /* 测量宽度-空格宽度： 33 - 8 ， ... 还是随便取 */
    word-spacing: 20px;

    /* 添加padding后会增大元素，所以添加下面的语句 */
    /* 但这样会导致div的高度变得不确定，从而无法通过设置行高等于height的方法来实现文本垂直居中 */
    /* 另一种解决办法：根据padding重新计算元素尺寸，并明确给出固定值 */
    box-sizing: border-box;
    padding: 11px 4px 13px 105px;
    /*padding-left: 105px;*/
}

#xinfeng{
    height: 98px;
    background: white url("img/xinfeng.png") no-repeat 39px 34px;
    /* 语法错误 */
    /*background-image: url("img/xinfeng.png");*/
    
    /*无法通过设置行高等于height的方法来实现文本垂直居中 */
    /*line-height: 98px;*/

    /* 网上看到的一种让文本垂直居中的方法：使用下面的语句。原理未知，且兼容性不大好 */
    display: flex;
    align-items:center; /*实现垂直居中*/
}

单词换行：

word-break 属性用来规定自动换行的处理方式，它不仅可以让浏览器在半角空格或连字符的后面换行。

默认值为 normal 表示根据语言自身的换行规则，确定换行方式，中文将容器边界处的汉字换到下一行，西方文字则将整个单词换到下一行；
keep-all 表示不允许把单词截断，只能在半角空格或连字符处换行；
break-all 允许把单词截断，在单词内换行。

css 文本和div垂直居中方法汇总 - CSDN博客

第一，给元素加了padding之后，元素的宽度会变大（学会用检查工具）

第二，文字与文字之间的距离是由word-spacing加上空格的宽度来决定的，所以用word-spacing这个属性的时候一定要注意空格的宽度

标签样式初始化

css reset原则：但凡是浏览器默认的样式，都不要使用。

在chrome的开发工具中，选中一个元素，然后查看它的Styles，只要出现在"user agent stylesheet"下的样式都是浏览器默认样式。

重置各种标签：(将其变成纯文本形式和各种边距)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


h1 ~ h6
p
strong
mark
ul>li
ol>li
dl>dt+dd

a
img

重置body

书写原则：

用到上面标签就清除所用标签的默认样式
建议不要直接将所有标签全部加上
不要将所有标签全部统一设置一致的reset，根据各自的特征来

选择器优先级

使用chrome检查元素时，如果发现某样式上存在删除线，则说明该样式被覆盖了。如果发现该样式前存在感叹号，则标明该样式写错了。

优先级：代码执行生效的顺序

行间(内联)样式 > id选择器 > 类选择器 > 标签选择器

一个小技巧：将其转换为分值，对于一个复合的选择器，我们可以将其分值相加再来比较

行间(内联)样式  1000
id选择器    100
类选择器    10
标签选择器    1

CSS布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

CSS Flex布局，弹性布局
CSS Grid布局，网格布局

A Complete Guide to Grid | CSS-Tricks

CSS Grid 网格布局教程 - 阮一峰的网络日志

Flex 布局教程：语法篇 - 阮一峰的网络日志

CSS 定位详解 - 阮一峰的网络日志

分类：开发者手册 - 阮一峰的网络日志

剩余空间分配数：CSS Grid带来的新单位：分数单位fr

fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

**fr**是代表网格容器中可用空间的一等份，即1fr。如果是2fr那么就是把容器剩余的空间分成两等。

gr 网格数