摘要：英语为了防止用户电脑里面，没有微软雅黑这个字体。因为绝对定位脱离标准流，影响页面的布局。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动盒子居中title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
height: 300px;
background-color: red;
}
.main{
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.child{
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 0 auto;
float: left;
}
style>
head>
<body>
<div class="father">
<div class="main">
<div class="child">
div>
div>
div>
body>
html>
浮动盒子居中
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
字体设置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
text-decoration: underline;
}
div{
width: 200px;
height: 240px;
/*line-height: 200px;*/
background-color:red;
/*text-align: right;*/
/*两端对齐*/
/*text-align: justify;*/
/*首行缩进*/
/*text-indent: 2em;*/
/*font-size: 14px;*/
/*text-decoration: inherit;*/
/*font-weight: 800;*/
/*font-family: "Microsoft Yahei"*/
/*font-family: 华文行楷*/
font: 12px/240px 华文行楷;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: line-through;
}
style>
head>
<body>
<div>
武小猪武小猪
div>
<a href="#">百度一下a>
body>
html>
文本属性和字体属性
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分
CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示多带带的小图标呢？
其实就是 截取 大图一部分显示，而这部分就是一个小图标。
使用雪碧图的好处：
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
不足：
1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div{
height: 100px;
width: 200px;
/*background-color: rgb(0,255,255);*/
/*background-color: rgba(0,0,0,.6);*/
background: #999;
}
style>
head>
<body>
<div>div>
body>
html>
background
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对定位title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 20px;
left: 100px;
/*设置元素的堆叠顺序*/
z-index: 5;
}
.box3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
html>
相对定位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top:40px;
left:0;
}
.box3{
width: 250px;
height: 200px;
background-color: blue;
}
style>
head>
<body style="height: 2000px;">
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
html>
绝对定位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 992px;
height: 460px;
background-color: red;
float: right;
/*相对定位*/
position: relative;
}
.prev{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
/*绝对位置*/
position: absolute;
background-color: #000;
color: #fff;
top: 50%;
left: 0px;
}
.next{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
/*绝对位置*/
position: absolute;
background-color: #000;
color: #fff;
top: 50%;
right: 0;
}
style>
head>
<body>
<div class="father">
<span class="next">>span>
<span class="prev"><>
div>
body>
html>
父相子绝
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: 0;
}
.father{
width: 100%;
height: 200px;
background-color: red;
position: relative
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1779.html
摘要：一丶盒模型的属性重要是标准文档流父子之间调整位置上下左右上下左右上左右下顺时针上右下左三要素线性的宽度线性的样式颜色实线小圆点一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 DOCTYPE html> padding *{ ...
摘要：固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。字体及其他博文链接利用制作精美的卡片源码链接利用制作精美的卡片原文链接翻译墨丶水瓶 本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。 第一步：确定 HTML 代码结构 在创建 HTML 代码前，你...
摘要：固定块元素的大小，其中包含我们的图片，这使我们能够在满足尺寸要求的情况下，任何图片都可用于制作成卡片。字体及其他博文链接利用制作精美的卡片源码链接利用制作精美的卡片原文链接翻译墨丶水瓶 本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。 第一步：确定 HTML 代码结构 在创建 HTML 代码前，你...
摘要：本文参照深入了解虚拟机周志明，纯粹做做笔记，写写自己觉得较为重要的内容方便理解虚拟机运行时数据区如下程序计数器程序计数器寄存器是一块较小的内存空间，看做是当前线程所执行的字节码的行指示器。异常情况也与虚拟机栈一致。 本文参照深入了解Java虚拟机-周志明，纯粹做做笔记，写写自己觉得较为重要的内容方便理解 Java虚拟机运行时数据区如下： showImg(https://segmentf...
摘要：功能数据绑定的双向数据绑定，一方面可以做到变化驱动了中元素变化，另一方面也可以做到元素的变化也会影响到。其次告诉，对页面上的这个进行双向数据绑定。第三告诉，在这个指令模版上显示这个的数据。作用域是一个把一个元素连结到上的对象。 功能 数据绑定 AngularJS的双向数据绑定，一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。 ...
阅读 681·2023-04-25 19:43
阅读 3854·2021-11-30 14:52
阅读 3727·2021-11-30 14:52
阅读 3794·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3812·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6007·2021-11-29 11:00
