下 html外边距如何归零,CSS教程：CSS( 二 ) _宽度

传统做法：通过
标签来进行换行
新的思路：可以通过:或:after伪类选择器中的设置为“A”来进行换行，因为字符中代表换行符的为“”，在CSS中可以写为“000A”或者简化为“A”
div::after {
: "\A";
white-space: pre; // 能够保留源代码中空白和换行符，否则中的换行符将被忽略。
原理：利用条纹背景实现条纹，再利用背景em值作为条纹大小
tab-size属性
原理：通过CSS3新增文本属性tab-size:2;来设置每个tab占2个字符宽度
在需要展示代码的网页上时，通过设置tab-size属性能够指定一个tab缩进几个字符。
为某些字符单独设置字体(华丽的&符号)
传统做法：为需要单独设置字体的字符设置class，通过class为它们设置独特的字体。
新的思路：@font-face中的-range属性可以设置字体的适用于哪些字符。
@font-face {
font-: ;
src: local('-'), local('-'); /* 应用于指定字符的字体 */
-range: U+26; /* 设置生效字符，'&'的码位，可以通过'&'.(0).(16)获取'&'的十六进制码位'26'，然后前面加上'U+'前缀 */
p {
font-: , ; /* 字体只应用于'&'字符，其他字符会适用后续的字体'' */
自定义文本下划线
传统做法：通过text-:;
新的思路：
1、通过与-size设置一条自定义格式的下划线；
2、通过text-可以让字符周围出现一圈白边，使的显示为下划线遇到字母的降部自动断开避让。
3、文本最好放置在行内元素内，这样下划线才能随这文本的换行也进行换行。
span {
: -(gray, gray) no-;
-size: 100% 1px;
-: 0 1.2em;
text-: .05em 0 white, -.05em 0 white;
空心字效果/文字外发光效果/文字凸起效果
通过text-为文本添加效果来实现。
文字发光效果
环形文字
1、通过SVG的path画出一个圆形。
2、通过text与添加文本，并通过xlink:href属性将文本链接到路径上。
dfds
.demo {
width:300px;
:300px;
: 4em auto 0;
svg{
:block;
: ;
path {
fill:none;
注：这种方法不但适用于环形文字还适用于所有需要特殊路径排序的文字。
用户体验
选用合适的鼠标指针
原理：在不同场景下选用不同的鼠标指针。属性设置
隐藏光标：:none,对于老版本浏览器可以通过:url(.gif)来传入一张1*1的透明gif模拟隐藏
扩大可点击区域
原理：通过伪元素扩大按钮范围
自定义复选框
原理：利用的:属性区分选中状态，再结合相邻label元素控制，通过伪元素实现想要的效果，再隐藏掉原复选框
开关式按钮
CSS遮罩层
原理：通过box-实现。缺陷：遮罩层下还是可以操作
原生modal遮罩层
原理：通过 ::伪类实现遮罩
模糊背景弱化
原理：通过滤镜模糊:blur()模糊背景
自定义滚动条样式
结构布局
原理：通过CSS3新增属性min-让元素宽度最大宽度为其内部不可断行的元素宽度
Let’swe have some text here. Bacon ipsum dolor sit amet, culpa short ribs kevin t-bone .
这个小猫特别可爱，她的名字叫做镜心。按时发发发发发生发发的方法发发发
We also have some more text here. Et, utsint.
如果没有设置任何样式时，效果如下：
如何让文字去自适应图片的宽度呢？这就是问题的关键点了，如何让元素去自适应内部元素？而不是去自适应它的父元素呢？答案就是width: min-: 表示该元素的宽度将被解析为它内部最大的不可断行的元素的宽度(例如：最宽的单词，图片，或者具有固定宽度的盒元素)