文章目录
- 前言
- 一、html--初识标签
- 二、CSS基础学习
- 1.基本选择器与引入方式＜style＞,＜link＞
- 2.盒子模型
- 3.常用元素样式
- 4.变量命名规范
- 5.标准流布局与非标准流布局
- 6.影响盒子大小的因素
- 7.前端布局-定位 position
- 8.css-常用基础文本样式
前言
前端有三宝：html,css,javascript;
我对html+css的基础学习主要是学习常用html标签和常用css样式及一些样式规则；
标签大体构成了我们网页的主要元素；
样式对标签的属性调节让我们的网页看起来井井有条，看起来舒服；
如果说html是创造了一个网页上的物体,那么css标签可以说就是这个物体的一个形容词,来形容这个物体的形状、颜色、大小、位置种种特征；
提示：以下是本篇文章正文内容，下面案例可供参考
一、html–初识标签
1.< img src=“” > （导入图片）
使用方式：src=“ok/two.jpg” /放入文件位置即可/
html文件位置和图片位置在同一级位置就直接输入文件名.文件类型
图片比html存放位置多一级就要加路径比如图片two.jpg放在与我的html文件同一级位置的ok文件夹里就应在""里输入ok/two.jpg.
少几级就用几个两点来倒退级数。
一般都会直接把要用的图片放在与你写的html位置相同处。
width （宽度） 与height （高度）用来调节图片大小。
DIV默认列向排版
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插图</title>
</head>
<body>
<div>
<img src='R-C.jpg' width="100" height="100">
</div>
<div>
<img src="ok/two.jpg" width="100" height="100">
</div>
<div>
<img src="../three.jpg" width="100" height="100">
</div>
</body>
</html>
2.input(type=“” value=“”) （输入标签） (按钮标签）
input我学的有四种type:
“text” 输出文本输入框
“password" 密码输入框 (输入文本不可见）
”button" 按钮
”image" 输入图片
“value"在里就是用来添加内容文本。
button:可以弄一个按钮。（可以注意到input也行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
<div>
账号:<input type="text">
</div>
<div>
密码:<input type="password">
</div>
-->
账号:<input type="text"><br>
密码:<input type="password"><br>
<input type="button" value="上号！">
<!-- <button> 上号</button> -->
<input type="image" src="dl/川.jpg" width="50" height="50">
</body>
</html>
3.a (插入链接）
< a href=“输入网址也可以输入另一个html文件位置” target=‘-blank’ > < /a >
不输入target='-blank’则不会打开新网页直接在原网页进行跳转。
4.＜ul＞与＜ol＞以及 < dl >
< ul > < /ul > 必须与< li > < /li >一起使用 （< ol > < /ol >也是一样)
直接上图看< ol> 与 < ul > 的区别
< ol>:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>csc
</li>
<li>cdc
</li>
<li>cqc
</li>
</ol>
</body>
</html>
< ul>:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>csc
</li>
<li>cdc
</li>
<li>cqc
</li>
</ul>
</body>
</html>
< dl >:带有项目和描述的描述列表 其实就是給你放在htm文件里的东西加个标签说明
< dl >
< dd >kunkun< /dd >
< dt > < img src=“坤.jpg”>< /dt >
< /dl >
< dd >里放项目描述
< dt >里放项目
< dl >相当于一个画框
结合所学可做一个用于跳转网页html文件
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div>
网址导航
</div>
<ol>
<li> 购物网站
<ul>
<li>
<a href="https://www.taobao.com/" target='_blank'>
<img src="img 插图/ok/taobao.jpg" width="50" height="50"/>
</a>
</li>
<li>
<a href="https://www.jd.com/" target='_blank'>
<img src="img 插图/ok/JD.jpg" width="50" height="50"/>
</a>
</li>
</ul>
</li>
<li> 学习网站
<ul>
<li>
<a href="https://www.bilibili.com/" target='_blank'>
<img src="img 插图/ok/bilibili.jpg" width="70" height="50"/>
</a>
</li>
<li>
<a href="https://www.icourse163.org/" target='_blank'>
<img src="img 插图/ok/mocc.jpg" width="100" height="50"/>
</a>
</li>
</ul>
</li>
</ol>
</body>
</html>
二、CSS基础学习
1.基本选择器与引入方式＜style＞,＜link＞
基本选择器: style英语为风格,样式的意思，写在< style type=“text/css” > < /style> 内部的就是各种选择器。
选择器：全选符：（选中页面所有的内容，但是级别很低。）
{width: 100px;height: 100px;background: red;}
标签选择器：（选中所有标签为div的内容）
div{width: 200px;height: 200px;background: blue;}
class选择器： (选中所有标签类别为abc的内容）
.abc{width: 300px;height: 200px;background:yellow;}
id选择器： (选中所有标签id为lec的内容）
#lec{width: 300px;height: 200px;background: red;}
专业写法，一个id名只对应一个html标签。但是一个html标签可以有多个class,如果说两个class都被选择器用来进行调整属性那么优先级高的生效。
html,css和很多编程语言一样标签读取从上至下。（所以说优先级一般下一行比上一行高）
就权重而言id和class相较标签和全选符都要高；
.abc .表示类 #lec #表示id；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
*{background: black;}
#abc{width: 300px;height: 200px;background:blue;}
.abc{width: 300px;height: 200px;background:yellow;}
.lec{width: 300px;height: 200px;background: red;}
div{width: 200px;height: 200px;background: blue;}
p{width: 300px;height: 200px;background: pink;}
</style>
</head>
<body>
<div id="abc"></div>
<div class="abc"></div>
<p class="lec"></p>
</body>
<!doctype html>
</html>
引入方式：給标签引入style；
级别最高的行间式：
< div style="width:500px; height: 500px;background:blue;">< /div>
写style就是有时候会不方便修改，特别是在代码巨多的时候。
较低级的内嵌式：内嵌式会让文件更便于阅读缺点就是影响html文件的大小。
< style type="text/css">
div{width:100px;height:100px;background:yellow;}
< /style>
外链式：（引入外部css文件来设计style)
< link rel="stylesheet" type="text/css" href="one.css">
link(链接）
one.css(文件名）
div {width:100px;height: 200px;background: black;} （文件内容）
<!doctype html>
<html>
<head>
<meta chartype="utf-8">
<title> 引入方式</title>
<link rel="stylesheet" type="text/css" href="1.css">
<style type="text/css">
div{width:100px;height:100px;background:yellow;}
</style>
</head>
<body>
<div style="width:500px; height: 500px;background:blue;"></div>
</body>
</html>
2.盒子模型
盒子：就是我们平时在网页上看到的各种元素。（比如淘宝网上的商品图像，评论，淘宝logo…)
但在现实生活中我们所看到的盒子是一个3D图像，而在网页中我们所看到的图像都是2D的，那为啥要说我们在网页中所看到的各个元素都是一个个的盒子呢？因为其实我们平时在看到网页中的一个个元素相当于我们在现实生活中对摆放在地上的盒子进行俯视，看到的只是盒子的一个面而已，而且如果我们将网页中的一个个元素比作盒子，那么在对页面的布局时就相当于对盒子的摆放，对于页面元素的设计就相当于对盒子的样式内容进行设计，其实是很形象的。
盒子模型：简而言之，就是一个元素在页面中所占的大小。（值得注意的是一个盒子的大小会受到多种因素的影响).
3.常用元素样式
3.1.浮动样式 (float)
float:left 横向排版元素 从左至右
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮点样式</title>
<style type="text/css"> /*注意像素大小*/
.abc{width: 400px;height: 200px;background:red;}
.abc>#绿{width: 100px;height: 200px;background:green;float: left}
.abc>#黄{width: 100px;height: 200px;background:yellow;float: left}
.abc>#蓝{width: 100px;height: 200px;background:blue;float: left}
</style>
</head>
<body>
<div class='abc'>
<div id=绿></div>
<div id=黄></div>
<div id=蓝></div>
</div>
</body>
</html>
3.2.外边距样式（盒子的外边距-margin）
margin英语有边缘的意思，简而言之，就是給盒子加一个结界，在这个结界的范围内你只能看到这个盒子内你想要别人看到的东西。
margin-right:元素右边划出多少空间。(其他方向同理）
注意：1.一个盒子的margin-right 与 另一个盒子的margin-left会叠加；
2. 一个盒子的margin-top 与 另一个盒子的margin-bottom会取最大值；
3. margin可以取负数；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外边距样式</title>
<style type="text/css">
*{background: black;}
.abc>#绿{float: left; margin-top: 200px;margin-right:100px; margin-bottom:200px;margin-left:100px;}
.abc>#黄{float: left;margin:200px 100px 200px 100px; } /*上:200px 右:100px 下:200px 左:100p*/x
.abc>#蓝{float: left; margin:200px 100px } /*上下:200px 左右:100px*/
.abc>#紫{float: left; margin:200px 100px 100px; } /*上:200px 左右:100px 下:100px*/
</style>
</head>
<body>
<div class='abc'>
<div id=绿>
<img src='../图片素材/药.jpg' width="100" height="200">
</div>
<div id=黄>
<img src='../图片素材/小川.jpg' width="100" height="200">
</div>
<div id=蓝>
<img src='../图片素材/卢本伟.jpg' width="100" height="200">
</div>
<div id=紫>
<img src='../图片素材/大漠.jpg' width="100" height="200">
</div>
</div>
</body>
</html>
一个盒子的margin-top 与 另一个盒子的margin-bottom会取最大值
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>外边距样式</title>
<style type="text/css">
*{background: black;}
.abc>#绿{margin-top: 200px;margin-right:100px; margin-bottom:50px;margin-left:100px;}
.abc>#黄{margin:100px 100px 200px 100px;}
</style>
</head>
<body>
<div class='abc'>
<div id=绿>
<img src='../图片素材/药.jpg' width="100" height="200">
</div>
<div id=黄>
<img src='../图片素材/小川.jpg' width="100" height="200">
</div>
</div>
</body>
</html>
margin-bottom:50px; < margin-top:100px; 两张图片上下间隔100px;
3.3.内边距样式padding(给元素内部填充像素）
使用padding能将元素像吹气球一样将其吹大。
用法上和margin区别就是不支持负数，其他都一样；
<!doctype html>
<head>
<html>
<meta charset="utf-8">
<title>内边距样式</title>
<style type="text/css"> /*注意像素大小*/
.abc{width: 400px;height: 200px;background:red; padding: 100px 100px 100px 100px;}
</style>
</head>
<body>
<div class='abc'> </div>
</body>
</html>
使用padding前
使用padding扩大内边距后
3.4.边框样式(border)
边框样式即把元素像画一样给其加个画框，设计好画框的宽度，颜色，类型即可；
border: black 10px dashed;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<style type="text/css">
.abc{width: 400px;height: 200px;background:red;
/*border: black 10px dashed; 等效于以下代码*/
border-left-color: black;
border-left-style:dashed ;
border-left-width: 10px;
border-right-color: black;
border-right-style:dashed ;
border-right-width: 10px;
border-top-color: black;
border-top-style:dashed ;
border-top-width: 10px;
border-bottom-color: black;
border-bottom-style:dashed ;
border-bottom-width: 10px;}
</style>
</head>
<body>
<div class='abc'> </div>
</body>
</html>
3.5.css继承模式
类似继承遗产一样，因为包含关系，上一级的某些属性可以直接继承给下一级。比如color.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承</title>
<style type="text/css">
/*.abc{color:red;} 和用body效果一样*/
body{color: red;}
</style>
</head>
<body>
<div class='abc'>
路飞
<div>鸣人</div>
</div>
</body>
</html>
3.6.背景色样式(background-color)
获取图片上的颜色：用ps打开一张图，用拾色器获取颜色的rgb或16进制颜色编号。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景色样式</title>
<style type="text/css">
.abc{width: 200px;height: 100px; background-color:#0e001a;}
/*.abc{width: 200px;height: 100px; background-color:rgb(14,2214,219);} 用rgb或者#都一样的效果*/
</style>
</head>
<body>
<div class='abc'>
</div>
</body>
</html>
3.7.透明度样式（opacity)
opacity:在老牌浏览器里透明度取值范围在0到100；在我们一般用的浏览器里取值范围在0到1；
1为完全不透明,0为透明。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style type="text/css">
body{background-color: black;}
.abc{width: 200px;height: 100px; background-color:red;}
.abcd{width: 200px;height: 100px; background-color:red;opacity:0.5;}
/*.abcd{width: 200px;height: 100px; background-color:red;opacity:0.5;filter: alpha(opacity: 0);} 老牌浏览器使用filter打开alpha通道调节透明度。*/
/*.abcd{width: 200px;height: 100px; background-color:rgba(233,324,543,0.5);} rgba可以和pacity有相同作用*/
.abcde{opacity:0.3;}
</style>
</head>
<body>
<div class='abc'>
</div>
<div class='abcd'>
</div>
<div class='abcde'>
<img src='../图片素材/药.jpg' width="100" height="200">
</div>
</body>
</html>
3.8.背景图片样式
url:统一资源定位符我们也叫网址；
1.背景图片插入：background-image:url(); （）里放网址或者本地文件地址
如果插入的图片尺寸大于划定的元素区域大小图片会被裁剪 若小于图片则以平铺展示。
2.背景图片重复：如果插入的图片尺寸小于元素区域则以重复平铺展示，使用background-repeat可以设定背景图片是否重复平铺；默认为repeat,而且repeat属性默认不继承，要继承需要打开继承属性 background-repeat: inherit; repeat还可以规定图片只根据x轴重复或者y轴重复。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景</title>
<style type="text/css">
body{background: green;}
.amg{width: 400px;height: 400px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);opacity:0.5;} /*裁剪*/
.amg1{width: 1000px;height: 1000px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);opacity: 1;} /*平铺*/
.amg2{width: 2000px;height: 2000px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);opacity: 1;background-repeat: no-repeat;} /*no 平铺*/
.amg3{width: 2000px;height: 2000px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);opacity: 1;background-repeat: repeat-X;}
.amg4{width: 2000px;height: 2000px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);opacity: 1;background-repeat: repeat-Y;}
.amg5{width: 2000px;height: 2000px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);opacity: 1;background-repeat: repeat-Y;}
.amg5>.amg6{width: 1000px;height: 1000px;border:red 10px dashed ;background-image: url(https://msn-img-nos.yiyouliao.com/inforec-20221014-c00b720a30951413e0c3c455beff64eb.jpg?time=1665886015&signature=05B990DFB648EFB6B51E4C5F97281E6B);margin: 500px;opacity: 1;
background-repeat: inherit;} /*继承*/
</style>
</head>
<body>
<div class='amg'></div>
<div class='amg1'></div>
<div class='amg2'> </div>
<div class='amg3'> </div>
<div class='amg4'> </div>
<div class='amg5'>
<div class='amg6'> </div>
</div>
</body>
</html>
3.图片大小样式设计：background-size:100px 100px; 先宽后高；
background-size:100px; 等比例缩放 ；等价于100px auto;图片变为width:100px; 时缩小一倍那么高height也缩小一倍； background-size: auto 100px；同理；
background-size: cover; (自动计算好合适的比例来覆盖元素空白区）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片大小调节</title>
<style type="text/css">
.abc{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); }
.abc1{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px 100px;}
.abc2{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px;} /*等价于100px auto;等比例缩放*/
.abc3{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: atuo 100px;}
.abc4{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: cover;}
</style>
</head>
<body>
<div class='abc'> </div>
<div class='abc1'> </div>
<div class='abc2'> </div>
<div class='abc3'> </div>
<div class='abc4'> </div>
</body>
</html>
4.背景图片位置样式
background-position:默认值为0% 0%,即图片横纵坐标占整个元素区域横纵坐标位置的比例；
也可以使用英文字符的位置样式 比如：center center ,center left…
还可以用像素值来调整图片的位置比如 ：100px 100px 表示图片左边际放在X轴上100px的位置，图片顶部边际在Y轴100px的位置；（px可以取负值）
background-position会影响background-repeat的呈现效果；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片大小调节</title>
<style type="text/css">
.abc4{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px 100px;}
.abc1{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px 100px;background-position:center center }
.abc2{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px 100px;background-position:50% 50%}
.abc3{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px 100px;background-position:50px 50px }
.abc5{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat: no-repeat; background-size: 100px 100px;background-position: -50px 50px;}
.abc6{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat:repeat-X; background-size: 100px 100px;background-position: -50px 50px;}
.abc7{width: 200px;height: 200px;border:10px red dashed;background-image: url('../图片素材/药.jpg'); background-repeat:repeat-X; background-size: 100px 100px;background-position: 0px 50px;}
</style>
</head>
<body>
<div class='abc4'> </div>
<div class='abc1'> </div>
<div class='abc2'> </div>
<div class='abc3'> </div>
<div class='abc5'> </div>
<div class='abc6'> </div>
<div class='abc7'> </div>
</body>
</html>
3.9.background 简写
background-color:red;
background-image:url('../图片素材/小川.jpg') ;
background-position: right bottom;
background-repeat: no-repeat;
background-size: 100px 100px;
**这一坨是不是看起来就烦？觉得烦那就这样写**
.abc1{width: 400px;height: 400px; border: black dashed 10px;
background:red right bottom/100px 100px no-repeat url('../图片素材/小川.jpg') ; }
其中背景颜色，导入图片，重复方式是没有编写顺序要求的，只有position和size要注意要用/将两者隔开，前面写position后面写size;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"> /*注意像素大小*/
.abc{width: 400px;height: 400px;
border: black dashed 10px;
background-color:red;
background-image:url('../图片素材/小川.jpg') ;
background-position: right bottom;
background-repeat: no-repeat;
background-size: 100px 100px; }
.abc1{width: 400px;height: 400px; border: black dashed 10px;background:red right bottom/100px 100px no-repeat url('../图片素材/小川.jpg') ; }
.abc3{width: 400px;height: 400px;background-color:red; background-image:url('../图片素材/小川.jpg') ; background-position: 30px 50px; border: black dashed 10px;background-repeat:repeat-y; background-size: 20px 66px; margin-right: 20px ; float: left}
.abc4{width: 400px;height: 400px; border: black dashed 10px;background:red 30px 50px/20px 66px repeat-y url('../图片素材/小川.jpg') ; float: left}
</style>
</head>
<body>
<div class='abc'> </div> <br>
<div class='abc1'> </div> <br>
<div class='abc2'>
<div class='abc3'> </div>
<div class='abc4'> </div>
</div>
</body>
</html>
3.10. 元素样式-display
3.10.1.元素消失样式-display:none
让元素在浏览器页面中消失，但仍保留在html结构中；
后辈元素会占据消失元素的位置；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.l{background: red;float: left;width: 300px;height: 300px;display: none;}
.l1{background: yellow;float: left;width: 300px;height: 300px;}
</style>
</head>
<body>
<div class="l"> </div>
<div class="l1"></div>
</body>
</html>
3.10.2.元素变块样式-display:block
元素属性可有块状，行内块状就比如我们常见的div，支持宽高，内外边距，按列堆积；
行内就比如span， a ，不支持宽高，只支持部分边距，按行堆积；元素宽度可被元素内容撑大；
行内元素又有如img,input,属性是块状与行内特性的结合，既可以像行内一样按行排列，也可以支持宽高，内外边距的设置；
display:block：可以将非块状元素转为块状；块状元素默认宽度为浏览器窗口宽度大小；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:block</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.leo{background: red;display: block;width: 100px;height: 100px;margin-left: 200px;}
.leo1{background: yellow;display: block;}
.leo3{background: red;}
.leo4{background: yellow;}
</style>
</head>
<body>
<span class="leo">leo </span>
<span class="leo1">leo1</span>
<span class="leo3">leo3 </span>
<span class="leo4">leo4</span>
</body>
</html>
3.10.3.元素变行内样式-display:inline
块状元素要是通过display:inline变为了行内样式那么原本的块状属性就会失效；只支持部分边距，按行堆积；元素宽度可被元素内容撑大；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:inline</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
div{margin-top: 200px;display: inline;color: red;width: 200px;height: 200px;}
.leo{color: red;}
.leo1{color: yellow;}
</style>
</head>
<body>
<div>leo</div>
<span class="leo">leo </span>
<a href="http://baidu.com" target=blank class="leo1">leo</a>
<br>
<span class="leo">leoiiiiiii</span>
</body>
</html>
3.10.4.元素变行内块样式-display:inline-block
使用display:inline-block，使元素变为行内块的状态，按行内样式排列，支持内外边距，行高等样式，支持宽高(设定宽高后元素大小不会被内容在撑大），支持内容撑大元素大小；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:inline-block</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
div{margin-top: 100px;display: inline-block;background-color: red;height: 200px;}
.leo1{margin-top: 100px;display: inline-block;background-color: red;height: 200px;width: 10px;}
span{display: inline-block;background-color: yellow;height: 200px;width: 111px;}
img{width: 100px;height: 100px;margin-top: 50px;}
</style>
</head>
<body>
<div class="leo">123456</div>
<div class="leo1">7891011121314</div>
<div class="leo">151617181920</div>
<span>kkluv</span>
<br>
<input type="" name="">
<img src='../图片素材/冲浪.jpg'>
</body>
</html>
3.11. 元素溢出隐藏样式-overflow:hidden
overflow:hidden控制元素内容超过宽高的部分，将其隐藏，不占位置；
overflow-x:hidden;隐藏横向元素溢出部分；（至少IE8浏览器以上才兼容）
overflow-y:hidden;隐藏纵向元素溢出部分；（至少IE8浏览器以上才兼容）
overflow:auto以滚动条的形式展示溢出部分内容；
overflow-x:auto或者overflow-y:auto(使用其中之一即可让另一个自动变成auto)以滚动条的形式展示溢出部分内容；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.l{background: red;width: 300px;height: 300px;overflow: hidden;}
.l1{background: yellow;}
.lk{background: red;width: 300px;height: 300px;overflow: hidden;position: relative;}
.lk1{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk2{background: red;width: 300px;height: 300px;position: relative;}
.lk3{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk21{background: red;width: 300px;height: 300px;position: relative;overflow-x: hidden;}
.lk31{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk22{background: red;width: 300px;height: 300px;position: relative;overflow-y: hidden;}
.lk32{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
</style>
</head>
<body>
<div class="l"> <div class="l1">555555555555555555555555555555555555</div>
</div>
<br>
<div class="lk"> <div class="lk1"></div></div>
<br>
<div class="lk2"> <div class="lk3"></div></div>
<div style="height: 90px;"></div>
<div class="lk21"> <div class="lk31"></div></div>
<br>
<div class="lk22"> <div class="lk32"></div></div>
</body>
</html>
overflow:auto以滚动条的形式展示溢出部分内容；
overflow-x:auto或者overflow-y:auto(使用其中之一即可让另一个自动变成auto)以滚动条的形式展示溢出部分内容；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.lk22{background: red;width: 300px;height: 300px;position: relative;overflow: auto;}
.lk32{width: 200px;height: 200px;background: yellow;position: absolute;left: 150px;top: 150px;}
.lk2{background: red;width: 170px;height: 300px;position: relative;overflow-x: auto;}
.lk3{width: 200px;height: 200px;position: absolute;}
</style>
</head>
<body>
<div class="lk22"> <div class="lk32"></div></div>
<div class="lk2"> <div class="lk3">河南新郑市第三中学一名女教师近日在家中上完网课后意外离世，她的女儿在一段母亲给学生上网课的视频中发现，母亲生前上最后一堂课时疑似遭遇过“网课入侵”，有人进入网课直播间播放音乐、说脏话。
11月2日，新郑市委宣传部官方微博通报称，10月28日，该市第三中学教师刘某某在家上完网课后意外离世，该市教育局第一时间向公安机关报案，并成立善后工作专班。经公安机关调查反馈，排除刑事案件可能。针对网传刘老师遭遇网暴事件，公安机关已立案侦查。
在某社交平台上，不少网友称曾在网课时遇到过“网课入侵”
一时间，“网课入侵”“网课爆破”等网络违法行为再度引发关注。澎湃新闻（www.thepaper.cn）了解到，有不少学生在上网课时遇到过同类情况。有截图显示，有人在社交平台发布“爆破群”及相关内容，有平台已开展巡查和治理，清理相关违规内容、处置严重违规账号。</div></div>
</body>
</html>
3.12. 鼠标浮动伪类样式-hover
hover：可以使用其伪类控制单个或多个子元素的状态；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hover</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
a:hover{
color: red;
text-decoration: none;
}
ul > li{width: 100px;height: 30px;text-align: center;line-height: 30px;background: black;color: white;float: left;position: relative;top: 100px;}
ul > li div{position: absolute;width: 30px;height: 30px;background-color: pink;left: 50%;margin-left: -15px;top: -30px;display: none;}
ul > li:hover{color: black;background: orange;}
ul > li:hover>div{display: block;}
</style>
</head>
<body>
<a href="#">YBM</a>
<ul>
<li>
A
<div></div>
</li>
<li>
B
<div></div>
</li>
<li>
C
<div></div>
</li>
<li>
D
<div></div>
</li>
</ul>
</body>
</html>
3.13. 控制鼠标光标样式-cursor
使用cursor让光标（鼠标）样式在进入某些元素区域时发生改变；
常用pointer. 光标指向时变为手指
none 光标指向时消失。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>display:none</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.leo{ cursor: pointer;}
.leo1{display: block;margin-top:70px;cursor: none;}
a{display: block;margin-bottom: 20px;}
</style>
</head>
<body>
<a href="#">234</a>
<span class="leo">111 </span>
<span class="leo1">222</span>
</body>
</html>
4.变量命名规范
在正常的项目中，一般不会給变量起一些没有意义的名字，而且一般一个严谨的程序员給变量命名都有一定的规范。
1.匈牙利命名法 变量名=属性+类型+描述对象
列如一个浮动(float)属性的(button)类型元素排在最外层给它取名为fbtonther;
2.驼峰命名法：float-button-top (属性-类型 -描述)
3.大驼峰法：floatButtonTop
5.标准流布局与非标准流布局
1.标准流布局：html文档中写在前面的元素在前面显示写在后面的在后面显示
2.非标准流布局：与标准流不同的都是非标准流布局。
tips:标准流子集margin-top会带动父集；
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>subsetmargintop</title>
<style type="text/css">
.parentset{width: 200px;height: 200px;background: red;}
.subset{width: 100px;height: 100px;background: blue;margin-top: 50px;}
</style>
</head>
<body>
<div class='parentset'>
<div class='subset'> </div>
</div>
</body>
</html>
3.标准流与非标准流混用可能会发生元素重叠。（尽量不要混用）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>mix</title>
<style type="text/css">
.set02{width: 200px;height: 200px;background: blue;float: left;}
.set03{width: 100px;height: 100px;background: blue; float: left;} /*非标准流*/
.set0{width: 200px;height: 200px;background: red;border:red solid 10px;}
.set01{width: 200px;height: 200px;background: red;border:red solid 10px;} /*标准流*/
</style>
</head>
<body>
<div class='set02'> </div>
<div class='set03'> </div>
<div class='set0'></div> <!-- 先放非标准元素再放非标准元素时 -->
<div class='set01'> </div>
</body>
</html>
6.影响盒子大小的因素
7.前端布局-定位 position
7.1.固定定位 （position:fixed)
固定定位：根据窗口进行固定位置；我们在网站中经常可以看到带有这种属性的元素，有兴趣可以打开淘宝或者京东的网页往下翻看是不是有东西一直固定在窗口不动。
tips:定位级别比标准流级别更高。
固定定位是根据浏览器窗口进行的定位。
只有定位才能使用z-index索引值。默认是0；越高的显示越优先。
可以使用left,right,top,bottom来进行具体位置定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定位置</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.l{width: 200px;height: 200px;background: red;position: fixed;left: 200px;}
/* body{height: 3000px;}*/
.l1{width: 200px;height: 200px;background: green;}
.l2{background: yellow;position: fixed;width: 200px;height: 200px;left: 0px;z-index: 1;}
.l21{background:pink ;position: fixed;width: 200px;height: 200px;left: 200px;z-index: 1;}
.l3{background: blue;position: fixed;height: 200px;left: 100px;right: 100px;}
</style>
</head>
<body style='height:3000px'>
<div class='l'> </div>
<div class='l1'> </div>
<div class='l2'> </div>
<div class='l21'> </div>
<div class='l3'> </div>
</body>
</html>
下拉窗口
7.2.绝对定位 （position:absolute)
1.使用方法与fixed类似；但是它是根据上一级有定位的父级进行的定位，如果没有使用了position定位的父级，那么就根据body也就是窗口进行定位；
2.同时使用float与absolute的话，float会失效；
3.百分比根据相对定位元素来算；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.l{width: 200px;height: 200px;background: red;position: fixed;left: 200px;top: 200px;}
/* body{height: 3000px;}*/
.l1{width: 100px;height: 100px;background: green; margin: 50px;}
.l2{background: yellow;position: absolute;width: 50px;height: 50px;left: 100%;top: 100%;}
.l3{background: yellow;position: absolute;width: 50px;height: 50px;right: 100%;top: 100%;float: left;}
.l4{background: yellow;position: absolute;width: 50px;height: 50px;left: 100%;bottom: 100%;float: left;}
.l5{background: yellow;position: absolute;width: 50px;height: 50px;right: 100%;bottom: 100%;float: left;}
</style>
</head>
<body style='height:3000px'>
<div class='l'>
<div class='l1'> </div>
<div class='l2'> </div>
<div class='l3'> </div>
<div class='l4'> </div>
<div class='l5'> </div>
</div>
</body>
</html>
7.3.相对定位 （position:relative)
1.使用方法与绝对定位类似；但它是根据自己原来元素的位置进行的定位,但实际上它的位置只是表面上被调到了一个相对位置，实际上并没有变。
2.使用relative不会破坏原有的元素布局，可以和float并用；
3.若在某个元素内使用绝对定位则可以给这个元素使用相对定位让内部元素根据父级定位；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对位置</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.l{width: 200px;height: 200px;background: green;float: left;}
.l3{background: yellow;width: 100px;height: 100px;position: relative;float: left;}
.l4{background: red;width: 100px;height: 100px;float: left;}
.l5{background: blue;position: absolute;width: 50px;height: 50px;left: 0;top: 0;}
</style>
</head>
<body style='height:3000px'>
<div class='l'> </div>
<div class='l3'> <div class='l5'> </div> </div>
<div class='l4'> </div>
</body>
</html>
7.4.定位继承 （position:inherit)
1.定位本身是不继承的；
2.定位根据上一级的定位来进行继承，如果元素的上一级没有设定定位那么就继承body的默认定位static；如果上层定位也是继承定位那么就继续向上看；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.l{width: 200px;height: 200px;background: green;position:absolute;left:100px;top:100px; }
.l4{background: red;width: 100px;height: 100px;position: inherit;left: 50px;top: 50px;}
.l3{background: yellow;width: 100px;height: 100px;}
.l5{background: blue;position: inherit;width: 50px;height: 50px;left: 50px;top: 50px;}
</style>
</head>
<body style='height:3000px'>
<div class='l3'> <div class='l5'> </div> </div>
<div class='l'> <div class='l4'> </div> </div>
</body>
</html>
8.css-常用基础文本样式
8.1.文本大小粗细样式-font-size/font-weight
font-size:用于控制网页字体的大小，默认是16px;
也可以用英语或者数字来调节字体大小；google浏览器有最小文字大小限制。它的x-small和xx-small字体大小是显示为一样大的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字大小与粗细</title>
<style type="text/css">
*{margin: 0 ;padding: 0;}
.xxx-one{color: red;font-size: 1px;}
.xxx-two{color: red;font-size: 16px;}
.xxx-three{color: red;font-size: 18px;}
.xxx-five{color: green;font-size: small;}
.xxx-four{color: green;font-size: medium;}
.xxx-six{color: green;font-size: large;}
.u{color: pink;font-size: small;}
.xxx-seven{color: pink;font-size: x-small;}
.xxx-eight{color: pink;font-size: xx-small;}
.k{color: green;font-size: large;}
.xxx-nine{color: green;font-size: x-large;}
.xxx-ten{color: green;font-size: xx-large;}
</style>
</head>
<body>
<p class="xxx-one">watch and learn</p>
<p class="xxx-two">watch and learn</p>
<p class="xxx-three">watch and learn</p>
<p class="xxx-five">watch and learn</p>
<p class="xxx-four">watch and learn</p>
<p class="xxx-six">watch and learn</p>
<p class='u'>你好</p>
<p class='xxx-seven'>你好</p>
<p class='xxx-eight'>你好</p>
<p class='k'>watch and learn</p>
<p class="xxx-nine">watch and learn</p>
<p class="xxx-ten">watch and learn</p>
</body>
</html>
在html文件中插入正常的屏幕截图需要注意电脑的缩放大小与浏览器的缩放大小，如果电脑的缩放大小为125%，浏览器的缩放大小为100%，那么截图时可把浏览器的缩放大小调成80%，（1.25*0.8=1）。而英文在量取后还需要考虑在每行的占比，如果占比3/4那么就要将量取的尺寸再除以3/4得到真实的像素值；
font-weight:调节文字粗细取值范围为1-1000，实际有区别范围为51-949；可以用英语或者数字来调节；本身不具备继承样式；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字大小与粗细</title>
<style type="text/css">
*{margin: 0 ;padding: 0;}
.xxx-one{color: red;font-weight: 1000;}
.xxx-two{color: red;font-weight: 51;}
.xxx-three{color: red;font-weight: 949;}
.xxx-three1{color: red;font-weight: normal;}
.xxx-three2{color: red;font-weight: lighter;}
.xxx-three3{color: red;font-weight: bolder;} /* /bold/*/
</style>
</head>
<body>
<p class="xxx-one">watch and learn</p>
<p class="xxx-two">watch and learn</p>
<p class="xxx-three">watch and learn</p>
<p class="xxx-three1">watch and learn</p>
<p class="xxx-three2">watch and learn</p>
<p class="xxx-three3">watch and learn
<p class="xxx-three4">watch and learn</p>
</p>
</body>
</html>
8.2.字体样式 -font-family
font-family:直接输入与字体样式对应的样式值即可；
常用的字体样式有"宋体”,“微软雅黑”,“Arial”;如果没有输入的字体样式就会自动列为默认样式；多重选择：font-family:“宋体”,“Arial”; 如果没有宋体样式就切换使用arial样式，arial也没有就为默认样式； 可以去网上下载你需要的字体；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体样式</title>
<style type="text/css">
.xxx-one{color: red;font-family:"宋体";}
.xxx-two{color: red;font-family: "Microsoft Yahei"}
.xxx-three{color: red;}
.xxx-three1{color: red;font-family: "苹方","宋体";}
</style>
</head>
<body>
<p class="xxx-one">watch and learn</p>
<p class="xxx-two">watch and learn</p>
<p class="xxx-three">watch and learn</p>
<p class="xxx-three1">watch and learn</p>
</body>
</html>
win系统字体默认为微软黑体；mac系统字体默认为Arial。
8.3.风格样式-font-style
斜体：1.输入属性值；font-style:italic或者font-style:oblique; 都能让字体变为斜体
2.使用< i >标签； i为italic的缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>斜体</title>
<style type="text/css">
.xxx-one{color: red;font-style:italic;}
.xxx-two{color: red;}
.xxx-three{color: red;font-style:oblique;}
.xxx-three1>span{color: red;font-weight: bolder;font-style: italic;}
</style>
</head>
<body>
<p class="xxx-one">watch and learn</p>
<p class="xxx-two"><i>watch and learn</i></p>
<p class="xxx-three">watch and learn</p>
<p class="xxx-three1">watch <span>and</span> learn</p>
</body>
</html>
8.4.文字对齐样式（text-align)
text-align:只能用英文属性值，默认为left；
h1-h6：标题标签；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本对齐样式</title>
<style type="text/css">
h1{background-color: pink;text-align:center ;}
h2{background-color:pink;text-align: left;}
h3{background-color: pink;text-align: right;}
</style>
</head>
<body>
<h1>watch and learn</h1>
<h2>watch and learn</h2>
<h3>watch and learn</h3>
</body>
</html>
8.5.文本行高样式-line-height
line-height:如果给予元素高度值的话，行高会被调至元素内部位置上下中心处显示；
调节指定行高位置，可以用ps创建一个与元素尺寸一致的画布,测量字体在画布中上方的高度*2+文本高度的值作为样式值；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>linegheight</title>
<style type="text/css">
.xxx-one{width: 400px;height: 400px;color: red;line-height: 400px;background: blue;text-align: center;}
</style>
</head>
<body>
<div class="xxx-one">watch and learn</div>
</body>
</html>
8.6.小写字母改小型大写-font-variant
font-variant:small-caps :只影响小写字母，将小写字母变成大写，但不改变其文本大小；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-variant</title>
<style type="text/css">
.xxx-one{font-variant: small-caps;}
</style>
</head>
<body>
<div class="xxx-one">aabbccHHHH</div>
</body>
</html>
8.7.文本换行样式-word-wrap:break-word
因为在元素内的英文文本不会自动换行，中文可以；
所以使用word-wrap:break-word来給英文文本换行；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-variant</title>
<style type="text/css">
.xxx-one{width: 200px;height: 200px;background: red;word-wrap:break-word ;}
.xxx-two{width: 200px;height: 200px;background:blue;}
</style>
</head>
<body>
<div class="xxx-one">todayistodayigotomorrwfjwioefjiwefjioawuejfuieruiergjuiergjeruiuijhnfawuidjfiowefj</div>
<div class="xxx-two">（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）（￣▽￣）</div>
</body>
</html>
8.8.文本缩进样式-word-indent
使用word-indent給文本缩进，可往左（正数）也可往右（负数）；
word-indent遇到text-align:right会失效；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>word-indent</title>
<style type="text/css">
.xxx-two{width: 200px;height: 200px;background:blue;text-indent: 20px;}
.xxx-two1{width: 200px;height: 200px;background:pink;text-indent: 20px;text-align: center;}
.xxx-two2{width: 200px;height: 200px;background:blue;text-indent: 20px;text-align: right;}
</style>
</head>
<body>
<div class="xxx-two">（￣▽￣）（￣▽￣）</div>
<div class="xxx-two1">（￣▽￣）（￣▽￣）</div>
<div class="xxx-two2">（￣▽￣）（￣▽￣）</div>
</body>
</html>
8.9.font缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<style type="text/css">
.xxx-two{background-color: red;width: 300px;height: 200px;font-style:italic ;
font-variant: small-caps;
font-weight: bold;
font-size: 100px;
line-height: 100px;
font-family: "宋体";
text-indent: 30px;}
/*xxx.two的font顺序为标准的书写顺序*/
.xxx-three{background-color: red;width: 300px;height: 200px;margin-top: 20px;font: italic small-caps bold 100px/100px "宋体" ;text-indent: 30px;}
/*使用font缩写可以快速六个文本样式时要注意编排顺序 size/height family顺序固定，size和height必须用/隔开，字体和字体大小必须要有。*/
</style>
</head>
<body>
<div class="xxx-two">"hello world"</div>
<div class="xxx-three">"hello world"</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
