# 非布局样式
# 字体族
serif sans-serif monospace cursive fantasy
- 多字体 fallback 一级一级往下找
- 网络字体、自定义字体
- iconfont
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fonts</title>
<style>
body{
/* font-family: "monaco"; */
/* font-family: "monaco", "PingFang SC"; */
font-family: "aaaaa", "monaco", "PingFang SC";
}
.chinese{
/* monospace等宽字体 */
font-family: "PingFang SC", "Microsoft Yahei", monospace;
/* serif衬线字体 */
/* font-family: "Microsoft Yahei", serif; */
/* font-family: "serif"; */
}
.weight{
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
font-weight: normal;
font-weight: 100;
}
/* 自定义字体 iconfont的原理也就是自定义字体*/
@font-face {
font-family: "IF";
src: url("./IndieFlower.ttf");
}
.custom-font{
font-family: IF;
}
</style>
</head>
<body class="body" id="body">
Hello world 你好，世界
<div class="chinese">你好</div>
<!-- <div class="weight">你好 Hello World</div> -->
<div class="custom-font">你好 Hello World</div>
</body>
</html>
# 行高
- 行高的构成
- 行高相关的现象和方案
- 行高的调整
行高会决定上下多余的宽度，会把外面的盒子的高度撑起来。比如下面的代码最外层的盒子的高度inline box这个div会被c3的元素的行高撑起来。
inline的元素背景颜色是根据字体大小进行渲染的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>inline</title>
<style>
span{
background:red;
}
.c1{
line-height: 20px;
}
.c2{
line-height: 8px;
}
.c3{
line-height: 30px;
}
.c5{
line-height: 28px;
}
.cc1 {
font-size: 12px;
}
.cc2 {
font-size: 18px;
}
.cc3 {
font-size: 24px;
}
</style>
</head>
<body>
<div>
<span class="c1">inline box xfg中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span>
inline box
<span class="c5">inline box</span>
</div>
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg                     
</span>
</div>
<!-- 字体大小不同是按照基线对齐的 -->
<div class="c1">
<span class="cc1">第一段</span>
<span class="cc2">第二段</span>
<span class="cc3">第三段</span>
</div>
<div style="background:red">
<span>文字</span>
<img src="test.png" />
</div>
<div>
<div style="float:left">
<span>第一段</span>
</div>
<div style="float:left">
<span>第二段</span>
</div>
</div>
</body>
</html>
如果需要垂直居中，可以设置inline元素的行高来进行实现：
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg                     
</span>
</div>
如下面的如果子元素的font-size是不同大小的，我们需要子元素居中对齐：可以设置三个子元素的vertical-align为middle，这样就居中显示了。 这个属性vertical-align也可以基于像素的，是基于底线进行移动，比如vertical-align：2px，就是比底部高2px
<style>
.cc1 {
font-size: 12px;
vertical-align: middle;
}
.cc2 {
font-size: 18px;
vertical-align: middle;
}
.cc3 {
font-size: 24px;
vertical-align: middle;
}
</style>
<!-- 字体大小不同是按照基线对齐的 -->
<div class="c1">
<span class="cc1">第一段</span>
<span class="cc2">第二段</span>
<span class="cc3">第三段</span>
</div>
下面的代码：会发现照片的底部有一些空隙，img也是一个inline的元素，这是因为图片是以基线的对齐方式，基线到底线的距离就是有一些空隙， 这个空隙是根据字体的大小来决定的，如果字体大小为12px那么空隙大概就是3px；这个就是经典的图片3px问题。这时候我们设置图片的vertical-align：bottom 这样就按照底线对齐方式，空隙就没有了。使用display:block也可以解决。
<div style="background:red">
<span>文字</span>
<img src="test.png" />
</div>
# 背景
- 背景颜色
- 渐变色背景
- 多背景叠加：css3新增，可以指定多个颜色
- 背景图片和属性（雪碧图）：雪碧图就是吧不同的背景集中到同一张图片当中，减少http请求。
- base64和性能优化
- 多分辨率适配
渐变色：
/* 左到右红色到绿色 */
background: linear-gradient(to right, red, green);
/* 角度渐变：默认0deg为从下到上的，45deg从左下角到右下角。90就是从左往右，180是从上往下 */
background: linear-gradient(180deg, red, green);
/* 下面的百分数是指到元素的百分之多少显示什么颜色 ，比如下面的0是代表坐左边最开始的颜色，然后元素10%的位置是绿色*/
background: linear-gradient(135deg, red 0, green 10%, yellow 50%, blue 100%);
/* 多背景的叠加 transparent是透明色*/
background: linear-gradient(135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 10,
linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
/* 背景图的大小对渐变色也起作用 */
background-size: 30px 30px;
背景图片的属性
.c1 {
height: 90px;
background: red url(./test.png);
/* 不让图片平铺 */
background-repeat: no-repeat;
/* 背景图的位置 -也可以指定为像素*/
background-position: center center;
/* 指定背景图的大小 */
background-size: 100px 50px;
}
雪碧图设置：一般设置background-position来找图片上对应的位置进行展示。一般是负值。 background-position是相对于容器的，如果容器的大小变了，也需要进行改变。
.c2 {
width: 20px;
height: 20px;
background: url(./test_bg.png) no-repeat;
background-position: -17px -5px;
background-size: 261px 113px;
}
# 边框
- 边框的属性：线型 大小 颜色
- 边框背景图
- 边框衔接（三角形）
/* dotted点状、dashed虚线 */
.c1 {
width: 400px;
height: 200px;
/* border: 1px solid red; */
/* border:5px solid red; */
/* border: 5px dotted red; */
border: 5px dashed red;
}
/* 边框背景图，30 round，30是图片大小，round是按照图片的整数进行显示，不显示半个图片，可能会对图片进行压缩 */
.c2 {
width: 400px;
height: 200px;
/* border-width: 30px; */
border: 30px solid transparent;
border-image: url(./border.png) 30 round;
}
/* 一个梯形 */
.c3 {
width: 400px;
height: 200px;
border-bottom: 30px solid red;
/* border-right:30px solid blue; */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
/* 一个三角形 */
.c3 {
width: 0;
height: 200px;
border-bottom: 30px solid red;
/* border-right:30px solid blue; */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
# 滚动
- 滚动行为和滚动条 visible 滚动条隐藏（文字内容撑出div），hidden 滚动条隐藏（文字不会撑出来），scroll显示滚动条、auto自动显示
.c1{
background:red;
height:200px;
overflow: hidden;
}
# 文字折行
- overflow-wrap（word-wrap）通用换行控制 是否保留单词，是否换行。
- word-break 针对多字节文字 是否将一个单词看做一个单位，或者是否将一个字母看做一个单位；中文句子也是单词；
- white-space 空白处是否断行。
<style>
.c1{
border: 1px solid;
width: 8em;
/* 进行换行 */
overflow-wrap: break-word;
/* 打断所有单词，keep-all是让所有的单词都是一个单位，比如单词会换行，以及一个句子会换行 */
word-break: break-all;
/* 让文本不换行 */
white-space: nowrap;
}
</style>
<div class="c1">
This is a long and Supercalifragilisticexpialidocious sentence. 一二三四五六，七八九零一二，这是一句巨长巨长又没有空间可以换行的句子哦。
</div>
# 装饰性属性以及其他
- 字重（粗体）font-weight
- 斜体 font-style:itatic
- 下划线 text-decoration
- 指针 cursor
.weight{
/* 相当于font-weight：400 */
font-weight: normal;
/* 相当于font-weight：700 */
font-weight: bold;
/* 根据父级元素更粗 */
font-weight: bolder;
font-weight: lighter;
/* 100-900 */
font-weight: 200;
}
# 处理浏览器兼容 CSS Hack
- Hack即不合法但生效的写法
- 主要用于区分不同浏览器
- 缺点：难理解 难维护 易失效
- 替代方案：特性检测
- 替代方案：针对性加class
# 案例
美化checkbox
.checkbox {}
.checkbox input {
display: none;
}
/* +代表相邻的兄弟元素 */
.checkbox input+label {
background: url(./checkbox1.png) left center no-repeat;
background-size: 20px 20px;
padding-left: 20px;
}
/* input选中的时候 */
.checkbox input:checked+label {
background-image: url(./checkbox2.png);
}
</style>
<div class="checkbox">
<input type="checkbox" id="handsome" />
<label for="handsome">我很帅</label>
</div>
# CSS 面试真题
css样式（选择器）的优先级 计算权重、!important、内联样式、后写的优先级
雪碧图的作用 减少HTTP请求数 提高加载性能； 有一些情况下可以减少图片大小
自定义字体的使用场景 宣传、品牌、banner等固定文案 字体图标
base64 的使用 减少http请求、适用于小图片、case64的体积约为图片的四分之三
伪类与伪元素 伪类表状态、伪元素时真的有元素，前者单冒号，后者双冒号
美化checkbox label 的for指向他的id，隐藏原生input :checked + label写样式
# 其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
padding: 10px;
font-size: 10px;
}
.body {
font-size: 20px;
background-color: red;
}
#body {
background: blue;
}
.cc1 {
font-size: 12px;
}
.cc2 {
font-size: 18px;
}
.cc3 {
font-size: 24px;
}
</style>
</head>
<body class="body" id="body">
<!-- css选择器是从右往左进行解析，加快浏览器对css解析速度 -->
<!-- 属性选择器[type=radio]{} -->
<!-- 伪元素选择器::before{} 真实存在的元素-->
<!-- 伪类选择器:hover{} 一个元素的状态-->
<!-- 组合选择器:[type=checkout] + label {}-->
<!-- 否定选择器:not(.link){} 只要不是括号里面的元素都选择-->
<!-- 选择器权重：!important优先级最高、元素属性，优先级高、相同权重，后写的生效 -->
<h1>非布局样式</h1>
<ul>
<li>字体族</li>
</ul>
<div style="border:solid 1px red;">
<span style="background:blue;color:#fff;font-size:20px;line-height:60px;">
居中xfg                     
</span></div>
<div class="c1">
<span class="cc1">第一段</span>
<span class="cc2">第二段</span>
<span class="cc3">第三段</span>
</div>
<div style="background:red">
<span>文字</span>
<img src="test.png" />
</div>
<div>
<div style="float:left">
<span>第一段</span>
</div>
<div style="float:left">
<span>第二段</span>
</div>
</div>
</body>
</html>
阅读量：