css进阶

css进阶

美化表单元素

新的伪类

1. focus
   元素聚焦时的样式

   按tab键会切换到其他元素聚焦
   想按顺序切换，可用tabindex属性，设置为数字

   outline-offset表示偏移量，当outline不是auto时，该偏移量生效。

   outline：none；
   outline-offset：0；
   color：；

2. checked
   表示单选或者多选框被选中的样式
   是一个可替换元素，可控制样式不多

   ：checked+lable
   表示选中这元素和下一个元素lable
   此时设置样式时lable元素的样式改变

常见用法

1. 重置表单元素样式

2. 设置textarea是否允许调整尺寸
   css属性：
   resize：none表示再textarea这个元素里面上下左右都不能调整边框大小
   both表示俩个方向都可以
   horizontal表示水平方向
   vertical表示垂直方向

3. 文本框边缘到内容的距离

padding：0 10px；
text-indent:1em;表示首行缩进

4. 控制单选和多选的样式

<div class="radio"></div>

.radio{ width:12px; height:12px; border:1px solid #999; border-radius:50%; cursor:pointer; }

.radio:checked{ border-color:#444; } .radi0:checked::after{ content:""; <!-- position:absolute; --> display:block; width:5px; height:5px; background:#008c8c; margin-left:; margin-top:; border-radius:%50; }

切换选中效果
令原本的input元素不显示，即：display：none；重新设置一个span元素，用checked选中input元素的下一个元素水平span，span元素设置成一个想要的样式，并用~选中input元素后面的所有元素，使color为想要的颜色；

@规则

at-rule：@规则，@语句，css语句，css指令

在css文件里面的开头@添加一些@规则

1. import

@import“路径”

导入另外一个css文件

2. charset

@charset “utf-8”

告诉css文件，这个地方使用的字符编码集是utf-8

这个指令必须写到第一行

web字体与图标

web字体

解决用户电脑上没有安装相应字体的问题

强制让用户下载该字体

@font-face表示制作一个新字体

在@规则下，里面的font-family设置成需要的字体

src属性里面加url（）指定字体的路径

字体图标

iconfont.cn字体图标库

习惯上来说i元素可用作图标

可设置字体的颜色和大小

注：这个图标不是图片，而是文字，文字有的css属性他都有

用link链接到该文件。可以直接离线，下载好之后用或者用绝对路径

unicode的方式：

&单词

&#数字

块级格式上下文

全称block formatting content 简称bfc

这是一块独立的渲染区域，他规定了在该区域中常规流块盒的布局

1. 常规流块盒在水平方向上，必须撑满包含块
2. 常规流块盒在包含块的垂直方向上依次摆放
3. 常规流块盒若外边距无缝相邻，则进行外边距合并
4. 常规流块盒的自动高度和摆放位置，无视浮动元素

BFS的渲染区域：

这个区域是由某个html元素创建，以下元素会在其内部创建bfs区域

1. 根元素 意味者，元素创建的BFS区域，覆盖率网页中的所有元素
2. 浮动和绝对定位元素
3. overflow不等于visible的块盒

不同的bfc区域，他们进行渲染的时候互不干扰

创建BFC的元素，他们隔绝了它内部和外部的联系，内部的渲染不会影响到外部

具体规则：

创建BFC的元素，它的自动高度需要计算浮动元素

解决高度坍塌：

1. clearfix::after
2. 让该元素为绝对定位创建BFC区域，里面会计算浮动元素的高度，不会造成高度坍塌
   或让该匀速为浮动元素，也会造成bfc
3. 副作用最小的方式，让overflow值不等于visibal，auto或者其他的都会创建BFS区域
   最好用hidden溢出隐藏

创建BFC的元素，他的边框盒子不会和浮动元素重叠

创捷BFC的元素，不会和他的子元素进行外边距合并
（所以解决外边距合并的问题可以用overflow等于hidden）

注：绝对定位和固定定位是完全脱离常规流的，而浮动还是有一点联系的

布局

排列页面中的区域

多栏布局

俩栏布局

1. 用左右浮动，分别设置主区，左右的宽
2. 左浮动，右盒子用overflow：hidden创建一个bfc区域，避开浮动盒子
   中间的间隔可以设置浮动盒子的margin-right

三栏布局

原理同上，用第二种方法设置overflow：hidden、
中间的间隔可以设置margin-right和margin-left

解决俩栏等高问题：

1. css3的弹性盒

2. js控制

3. 伪等高

让height等于10000px，margin-bottom为9990px，给外层容器设置overflow：hidden此时底下的多余背景颜色隐藏

元素书写顺序

浮动元素先写,再写主区域

当必须先写主区域时，设置左右margin为左右盒子宽度
左右盒子设置为绝对定位，左边设置为top 0，bottom 0

后台页面的布局

整体撑满窗口，局部可以滚动

整体用固定定位fixed，，宽高设置为100%
header绝对定位
其他元素布局时忽略header
下面这个元素设置padding-top为header的高

浮动的细节规则

盒子位置：

左浮动向上想左排列
右浮动盒子向下向右排列
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左向右移动
浮动盒子的顶边不得高于上一个盒子的顶边

行高的取值

line-height

1. px 像素值

2. 无单位的数字

先继承再计算

3. em单位

先计算再继承

4. 百分比

所以多行文本的行高不要加单位，可以根据字体大小调整相对于字体的行高

body的背景

画布 canva

不是html5里面的那个元素

一块区域：

特点：

1. 最小宽度为视口宽度
2. 最小高度为视口高度

html元素的背景

覆盖画布

body元素背景

html元素有背景，该元素的背景正常

html元素无背景，该元素的背景覆盖画布

背景图片

和背景是一样的

但是

画布的背景图

1. 背景图的横向宽度，百分比相对于视口

2. 高度相对于html的元素，相对于网页高度

3. 背景图的横向位置百分比或者预设值都相对于视口

4. 背景图的纵向位置百分比相对于网页高度

行盒的垂直对齐

多个行盒再垂直方向上的对齐

给没有对齐的元素设置vertical-align属性

预设值：数值和百分比

图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白

解决方法：

1. 设置图片父元素字体大小为0
2. 将图片设置为块盒

参考线——深入理解字体

文字

文字是通过一些文字制作软件制作的：fontforge

制作文字时会有几根参考线，不同的文字类型参考线不一样，相同的文字参考线一样

堆叠上下文

堆叠上下文：stack context

它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上的排列顺序
例：z-index（注意该属性只存在于定位元素里面）

创建对接上下文的元素

1. html元素（根元素）
2. 设置了z-index为数值的定位元素

同一个堆叠上下文中元素在z轴上的排列

1. 创建堆叠上下文的元素的背景和边框
2. 堆叠级别为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何z-index是auto的定位子元素，以及z-index是0的堆叠上下文
7. 堆叠级别为正值的堆叠上下文

值相同时，后面的覆盖前面的

svg

svg：scalable vector graphics，可缩放的矢量图

1. 该图片使用代码书写完成
2. 缩放不会失真
3. 内容轻量

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

数据链接

data url

怎么书写

将目标文件的数据直接书写到路径位置

不光是图片，其他书写路径的位置都可以书写

语法：data：MIME，数据

意义

优点：

1. 减少了浏览器中的请求
   请求
   响应

缺点：

1. 增加了资源的体积
   导致传输内容增加，从而增加了单个资源的传输时间
2. 不利于浏览器的缓存
   浏览器通常会缓存图片文件，css文件，js文件

应用场景：

1. 请求单个图片体积较小，并且该图片因为各种原因不适合制作雪碧图，可以使用数据链接
2. 图片有其他代码动态生成，并且图片较小，可以使用数据链接

base64

表示一种编码方式
通常用于将一些二进制数据，用一个可书写的字符串表示

居中总结

盒子在包含块中居中

行盒或者行块盒居中

直接设置行盒父元素text-align：center

常规流块盒

定宽，设置左右margin为auto

绝对定位元素的水平居中

定宽，设置左右坐标为0（left：0，right：0），将左右margin设置为auto

固定定位时绝对定位的特殊情况

单行文本的垂直居中

设置文本所在位置的行高为整个区域的高度

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子上下的padding内边距相同，达到类似效果

绝对定位的垂直居中

定高，设置上下坐标为0（left，right），将上下margin设置为auto

样式补充

display：list-item

设置为该属性的盒子，本质上是一个块盒，但同时该盒子附带另外一个盒子

该元素本身的盒子叫做主盒子，附带的盒子被叫做次盒子，次盒子和主盒子水平排列

此时调整的宽高为主盒子的宽高

涉及到的css属性：

1. list-style-type

设置次盒子的中内容的类型，该属性可以继承，可以设置到body属性里面，统一设置

例如在ul属性里面设置该属性，li继承

2. list-style-position

设置次盒子相对于主盒子的位置

3. 速写属性 list-style

俩个一起写

还可以在里面加图片

清空次盒子

在list-style设置为none

图片失效时的宽高问题

img元素图片链接失效，这种情况下，该元素的特性和普通行盒一样，无法设置宽高

要使失效之后宽高任然有效，用display属性设置为块盒或者行块盒

行盒中包含行块盒或可替换元素

行盒的高度和它内部的行块盒或可替换元素的高度无关

text-align：justify

-left：左对齐
-right：右对齐
-center：居中
-justify：除最后一行外，分散对齐，如果想要都分散对齐，可以在里面加一个after空内容

制作一个三角形

width height都设置为0，border设置为10px solid transparent（透明）

direction和writing-mode

开始 start -> 结束 end
左 left -> 右 end

开始和结束是相对的，不同国家有不同的习惯

左右是绝对的

direction设置的是开始到结束的方向，即从左到右或者从右到左

默认ltr：从左到右
rtl从右到左

writing-mode设置的是文字的书写方向

设置为vertical-l/r，即垂直从右向左或者从左向右

utf-8字符