HTML5和CSS3笔记
2024-04-18 11:54:42
网页概况
W3C 万维网联盟 制定网页开发标准
现在一般使用W3C标准
网页结构，表现，行为
网页结构，表现，行为
- 结构
HTML用于描述页面结构
- 表现
CSS用于控制页面中元素的样式
- 行为
JavaScript用于相应用户操作
HTML
HTML(Hypertext Markup Language) 超文本标记语言
负责结构
使用标签 <>
超文本指超链接
<!-- 文档声明-->
<!doctype html>
<!-- html的根标签（根元素）-->
<html><!--网页的头部，用户看不见，给浏览器看解析网页--><head><!-- meat用来设置网页的元数据，这里通过meta标签设置网页字符集，避免乱码问题--><meta charset="utf-8"><title>网页的基本结构</title></head><body><h1>静夜思</h1>李白<br><p>举头望明月，</p><!--段落-->低头思故乡。</body><!--网页主体--></body>
</html>
自结束标签
例如 等属于自结束标签，两种写法
标签属性
<html><head><title></title></head><body><!--属性 在标签中（开始标签或自结束标签）还可以设置属性属性是一个名值对（x=y）属性是对标签的修饰属性和标签名和其他属性空格隔开属性不能瞎写，应当按规定来写有些属性有属性名，有些没有.属性值用引号引起来，单引号双引号都可以--><h1>这是<font color="red" size="1">第二个</font>网页</h1><!-- 自结束标签 --><!-- <img><img /><input><input />--></body>
</html>
文档声明
<!doctype html>
<html><head><title>网页的基本结构</title></head><body><!-- 迭代网页版本HTML4XHTML2.0HTML5··· 文档声明（doctype）-告诉浏览器当前网页版本- html5文档声明<!doctype html><!Doctype HTML>--></body>
</html>
字符编码
编码：将字符转化为二进制的过程
解码：将二进制转化为字符的过程
字符集（charset）：编码和解码所采用的规则
乱码问题：如果编码和解码采用字符集不同会出现乱码
常见字符集：
ASCII 美国
ISO88591欧洲
GBK 中国
UTF-8
<!doctype html>
<html><head><!-- 通过meta标签设置网页字符集，避免乱码问题--><meta charset="utf-8"><title>网页的基本结构</title></head><body></body>
</html>
实体
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>entity</title></head><body><!-- 在网页中多个空格默认情况下会被解析为一个空格在html中一些情况不能书写一些特殊符号比如多个空格，字母两侧大于小于号:<b>如果要书写需要用到实体（转义字符）实体的语法：&实体的名字;空格 大于号 >小于号 <···--><p>今天 天气不错</p><p>a<b>c</p></body>
</html>
meat标签
<!DOCTYPE html>
<html><head><!-- meta标签主要用于设置网页的一些元数据 charset 指定网页的字符集name 指定数据的名称content 指定数据的内容--><meta charset="utf-8"><!-- keywords表示网站的关键字，可以同时使用多个关键字descrip网站描述 在搜索页面显示···title标签的内容可以作为搜索结果的超链接显示--><meta name="keywords" content="HTML5,前端,css3"/><meta name="description" content="这是一个不错的网站"/><!-- 将页面重定向另一个网站 --><meta http-equiv="refresh" content="3,url=https://www.baidu.com/"/><title>entity</title></head><body></body>
</html>
语义化标签（块，内联元素）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>entity</title></head><body><!--块元素（block element）在页面中独占一行的元素-主要对页面进行布局内联元素（行内元素）（inline element）不会独占一行-->-主要用来包裹文字<!-- 在使用html标签时，应该关注标签的语义，而不是他的样式 标题标签 h1~h6重要性递减，h1最重要，在网页重要性仅次于title，一般一个页面只有一个h1--><h1>一级标题</h1><h2>二级标题</h2><!-- p标签表示一个段落 -p元素内不能放任何块元素！！！！em标签表示语音语调的加重 strong表示强调重要内容···--><p><strong>今天天气<em>真</em>不错</strong></p><!-- hgroup 用来标题分组 将一组相关的标题放在一起--><!-- 浏览器在解析网页时会自动将不符合规范的内容进行修正比如 在html外写元素p元素中有块元素--></body>
</html>
语义化标签（布局标签）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>entity</title></head><body><!-- 布局标签 --><!-- header 网页头部main 网页主体 一个网页只有一个footer 网页底部nav 表示网页的导航aside 和主体相关的内容(侧边栏)article 表示一个独立的文章section 表示一个独立的区块 上面的标签不能使用时使用sectiondiv没有语义,表示一个区块span 行内元素,没有任何语义,一般用于在网页中选中文字--></body>
</html>
列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><body><!-- 列表list在html中也可以创建列表，有三种列表1，有序列表2，无序列表3，定义列表 列表间可以互相嵌套--><!-- 有序列表 ol标签创建y序列表使用li表示列表项--><!-- 无序列表 ul标签创建无序列表使用li表示列表项--><!-- 定义列表 使用dl创建定义列表dt表示定义的内容dd对内容进行解释说明--></body>
</html>
超链接和相对路径
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><body><!-- 超链接超链接是一个行内元素，a标签内可以嵌套除它以外的任何元素使用a标签定义超链接href指定跳转目标路径-可以是一个外部网址-也可以是内部网址--><!-- 跳转内部页面时，一般时用相对路径相对路径一般用./或../表示./一般不用写。但默认补上-./相当于当前目录-../相当于上一级目录--><a href="https://www.baidu.com/">百度</a><a href="练习.html">练习</a><a href="path/超链接测试.html">测试</a></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><body><a href="https://www.baidu.com/" target="_blank">百度</a><a href="练习.html">练习</a><a href="path/超链接测试.html">测试</a><!-- 可以跳转到任意标签位置使href="#id"就可以了--><a href="#bottom" >直达底部</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- id 唯一不重复，同一个页面不能出现同一个每一个标签都可以添加一个id属性回到顶部 --><a href="#" id="bottom">回到顶部</a><!-- 可以使用javascript:;(js:;)属性当href点击声明都不会发生 --><a href="js:;">广告位招租</a></body>
</html>
图片标签和图片类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><body><!-- 图片标签用于向当前页面引入一个外部图片 --><!-- alt对图片的描述，图片不能显示时会显示alt描述搜索引擎会更具alt内容识别图片width 图片宽度height图片高度宽度和高度如果只修改一个另一个会等比例缩放一般在pc端 不建议修改 放大图片失真，缩小多占内存但在移动端，经常将图片缩小--><img width="200" src="../img/1.jpg" alt="清华园" ><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" ><!-- 图片格式jpeg(jpg)支持颜色丰富,不支持透明,不支持动图gif颜色少,支持简单透明,支持动图png颜色丰富,支持复杂透明,不支持动图webp谷歌新推出的专门用来表示网页图片的一种格式具备其他图片格式的所有优点,文件也小缺点:兼容性太低base64使用base64将图片编码,将图片转化为字符,通过字符引入图片跟随网页一起加载,但一般之用在要求较高的地方(如背景等)--></body>
</html>
内联框架
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><body><!-- 内联框架用于当前页面引入一个其他页面src指定引入网页的路径--><iframe src="https://www.bilibili.com/" width="800px" height="1000px" frameborder="0"></iframe></body>
</html>
音视频
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><body><!-- audio引入一个音频文件 默认情况下不允许用户操作 属性：controls 允许用户控制播放（写上就有，不写就没有）autopaly 自动播放，大部分浏览器禁用loop 循环播放--><audio src="../source/音频.mp3" controls="" autoplay="" loop="">当前浏览器不支持audio</audio><!-- 使用video引入视频 --><video width="800" height="" controls=""><source src="myvideo.mp4" type="video/mp4"></source><source src="../source/movie.ogv" type="video/ogg" con></source><source src="myvideo.webm" type="video/webm"></source>当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a></video></body>
</html>
CSS
编写位置
内联方式
在标签内通过style属性设置元素样式
问题：
内联样式只能对一个标签生效，样式要改变时，需要单个修改非常麻烦，开发勿用！！！
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>practice</title></head><body><p style="color: blue; font-size: 60px;">1234567</p></body> </html>写到head里的style里(内部样式表)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>practice</title></head><!-- 内部样式表可以为多个标签设置样式但是只能对一个页面使用，不能跨页面使用--><style type="text/css">/* 对所有的p标签修饰 */p{color: red;font-size: 50px;}</style><body><p>1234567</p><p>adgks</p></body> </html>外部样式表
可以将CSS样式编写到一个外部CSS文件中（最佳使用方式）
通过link标签引入外部CSS文件
可以使用到浏览器的缓存机制，加快加载速度，提高体验
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><link rel="stylesheet" type="text/css" href="style.css"/><body><p>1234567</p><p>adgks</p></body>
</html>
p{color: #00FFFF;font-size: 50px;
}
CSS基本语法
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><style type="text/css">/* css基本语法选择器 声明块选择器：选择页面中的指定元素声明块：为指定元素设置样式声明块由一个个声明组成声明是一个名值对样式一个样式名对应一个样式值，名和值之间用:隔开，结尾用;结束*/p{color: #00FFFF;font-size: 50px;}</style><body><p>1234567</p><p>adgks</p></body>
</html>
选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title></head><style type="text/css">/* 将所有段落设置为红色(字体)元素选择器:作品:根据标签名选定指定的元素语法:标签名{}例子p{} h1{} div{}*//* 将特定元素设置 id选择器作用:根据元素id选择一个元素语法:#id属性值{}例子:#num{}*//* #num{color: #00FFFF;} *//* 对adc和ap设置 类选择器:作用:根据class属性选择一组元素语法:.class属性值{}例子:.lol{}*//* .lol{color: #00FFFF;} *//* 通配选择器作用:选中页面中所有元素语法:*{}*/</style><body><p id="num lol">1234567</p><!-- class 是一个标签属性,和id类似,不同的时可以重复使用可以通过class为元素分组可以对一个元素指定多个class属性值--><p class="lol">adc</p><p class="lol">ap</p></body>
</html>
复合选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* 将class为red的设置为红色（字体） */.red{color:red;}/* 将class的red的div设置字体为50px *//* 交集选择器作用：选择同时符合多个条件的元素语法：选择器1选择器2···选择器n{}注意：交集选择器中如果有元素选择器，必须以元素选择器开头*/div.red{font-size: 50px;}/* 并集选择器（选择器分组）作用：同时选择多个选择器对应的元素语法：选择器1,选择器2···选择器3{}*/h1,span{color: #00FFFF;}</style></head><body><div id="" class="red">我是div</div><p class="red">我是p标签</p><h1>标题一</h1><span id="">文字</span></body>
</html>
关系选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* 为div子元素span设置字体红色 *//* 子元素选择器作用：选中父元素指定的子元素语法：父元素>子元素*//* div>span{color: red;} *//* 后代元素选择器作用:选中指定元素的指定后代元素语法：祖先 后代*//* div span{color: #00FFFF;}*//* 选择下一个兄弟语法：前一个 + 下一个只会选择下“一”个*//* p + span{color: #00FFFF;} *//* 选择所有兄弟元素语法：兄 ~ 弟*//* p ~ span{color: #00FFFF;} */</style></head><body><!-- 父元素子元素祖先元素-父元素同时也是祖先元素后代元素兄弟元素-拥有相同父元素的元素--><div id="" class=""><p>我是div中的p元素<br><span id="">我是p元素中的span元素</span></p><span id="">我是div中的span元素</span><span id="">我是div中的span元素</span></div><div id=""><span id="">我是div中的span2元素</span></div></body>
</html>
属性选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* [属性名]选择含有指定属性的元素[属性名=属性值]选择含有指定属性和属性值的元素[属性名^=属性值]选择以指定值开头的元素[属性名$=属性值]选择以指定值结尾的元素[属性名*=属性值]选择含有指定值的元素*//* p[title] *//* p[title=a] *//* p[title^=a] *//* p[title$=d]*/p[title*=b]{color: #00FFFF;}</style></head><body><p title="a">1</p><p title="bd">2</p><p title="acbd">3</p><p>4</p></body>
</html>
伪类选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* 将ul中第一个li设置为红色伪类（不存在的类。特殊的类）伪类用来描述一个元素的特殊状态比如：第一个元素，被点击的元素，鼠标移入的元素伪类一般情况下都是使用:开头:first-child(第一个子元素):last-child(最后一个子元素):nth-child(3)(第3个子元素)······:nth-child(n)(全部子元素):nth-child(2n)(第偶数个):nth-child(even)(第偶数个):nth-child(2n+1)(第奇数个):nth-child(odd)(第奇数个)n= 0 1 3 4 ···· n2n 2*0=0 2*1=2···3n 3*0=0 3*1=3···2n+1 2*0+1=1 2*1+1=3···3n+1 3*0+1=1 3*1+1=4······！！！注意：以上伪类是根据所有的子元素排序的！！！例如下面这个例子ul > li:first-child{}ul中的li fisrst-child是span 所以不可以但ul中 last-child是li所以生效:first-of-type:last-of-type:nth-of-type()功能和上面类似，不同点是对同类型的子元素排序*//* :not() 否定伪类 *//* 除了li中的第三个不变色 *//* ul > :not(:nth-of-type(3)){color: #00FFFF;} */ul > li:nth-of-type(1){color: #2f66ff; }</style></head><body><ul><span>asd</span><li>123</li><li>234</li><li>345</li><li>456</li><li>567</li><li>567</li><li>567</li></ul></body>
</html>
超链接的伪类
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* link 用来表示没访问过的链接（正常的链接） */a:link{color:#00FFFF;}/* 访问过的链接 由于隐私的原因，因此visited只能更改颜色*/a:visited{color: black;}/* 上面只能这俩用于超链接 *//* 下面这俩不止超链接使用 */ /* 表示鼠标移入的状态 */a:hover{color: brown;}/* 鼠标点击时的状态 */a:active{color: coral;}</style></head><body><!-- 超链接的状态1. 没有访问过的链接2.访问过的链接--><a href="https://www.baidu.com">百度</a><br><br><a href="http://www.dadagui.com/">dadagui</a></body>
</html>
伪元素选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* 伪元素表示一些特殊的并不真实存在的元素(特殊的位置)伪元素的语法 ::开头::first-letter{} 第一个字母::first-line{} 第一行::selection 选中的内容::before 元素开始的位置::after 元素结束的位置before和after必须结合content属性(插入内容)来使用*/p::after{color: #00FFFF;}div::before{content:'abcd' ;color: #00FFFF;}</style></head><body><p>Lasdasdasd</p><div id="">hello hello</div></body>
</html>
继承
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* 样式的继承 为一个元素设置样式时后代元素也会应用并不是所有样式都会被继承常见的如背景，布局相关的*/div{color: #00FFFF;}</style></head><body><div id="">1<p>2</p></div></body>
</html>
选择器权重
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">div{color: yellow;}.red{color: red;}/* 样式冲突当通过不同的选择器选中同一个元素，并且为相同样式设置不同的值时，此时发生样式冲突发生样式冲突时，由选择器的优先级决定选择器权重（由高到低）：内联样式id选择器 1，0，0，0类和伪类选择器 0，1，0，0元素选择器 0，0，0，1通配选择器 0，0，0，0继承的样式 没有优先级比较优先级时，要将所有选择器优先级相加。（并集选择器时单独计算的）优先级相加不会进位如果优先级相等，则优先使用靠下的选择器`3z4rd\\\可以在摸一个样式后面添加 ！important，此时此样式优先级最高，超过内联样式（开发慎用！）*/</style></head><body><div id="box1" class="red">1 div</div></body>
</html>
em和rem
- em是型对于元素的字体大小计算的
1em = 1font-size
em会根据字体大小改变而改变
- rem是相对于根元素的字体大小来计算
RGB，RGBA和HSL,HSLA
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">/* RGB值R red ，G green， B blue每一种颜色在0-255（0%-100%）之间语法rgb（红色值，绿色值，蓝色值）十六进制RGB值语法：#红色绿色蓝色如果两位重复可以简写如：#ffff00 = #ff0RGBA在RGB的基础上增加了一个a表示不透明度a=1不透明 a=0完全透明HSL和HSLAH hue 色相 （0-360）S saturation 饱和度 颜色的浓度 0%-100%L lightness 亮度 0%-100%*/div{width: 50px;height: 50px;background-color: rgb(255,255,0);background-color: rgba(255,255,0,.3);background-color: hsl();}</style></head><body><div class=""></div></body>
</html>
文档流
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.box1{}.box2{}</style></head><body><!-- 文档流（normal flow）网页是一个多层结构通过css可以分别为每一层设置样式用户只能看到最上层最底层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中排列元素主要有两个状态 1在文档流中 2不在文档流中（脱离文档流）元素在文档流中特点：块元素独占一行默认宽度是父元素的全部默认高度是子元素的全部行内元素不会独占一行。只占自身大小默认高度和宽度总是子元素的全部--><div id="" class="box1">我是div1</div><div id="" class="box2">我是div2</div><span>我是span1</span><span>我是span2</span></body>
</html>
盒子模型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.box1{/* 内容区content，元素中的所有子元素和内容都在内容去中排列内容去大小由width和height设置*/width: 200px;height: 200px;background-color: #bfa;/* 边框（border）设置边框至少设置三个样式宽度border-width 颜色border-color样式border-style*/border-width: 5px;border-color: #00FFFF;border-style: solid;}</style></head><body><!-- 盒子模型（盒模型，框模型）（box model） CSS将页面中所有元素都设置成了一个矩形的盒子盒子组成：内容区（content）内边距(padding)边框（border）外边距（margin）--><div id="" class="box1">我是div1</div><div id="" class="box2">我是div2</div></body>
</html>
盒子边框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.box1{/* 内容区content，元素中的所有子元素和内容都在内容去中排列内容去大小由width和height设置*/width: 200px;height: 200px;background-color: #bfa;/* 边框（border）设置边框至少设置三个样式宽度border-width 颜色border-color样式border-style*//* 四个值： 上 右 下 左 三个值： 上 左右 下两个值： 上下 左右*/ /* border-width: 10px 20px 30px 40px; *//* 颜色也可以指定多个值 *//* border-color: #00FFFF; *//* 边框样式solid 实线dotted 点状虚线dashed 虚线double 双线样式也可以指定多个值*//* border-style: solid; *//* border简写属性，通过该属性可以设置相关顺序，并且没有顺序要求 */border: #00FFFF 10px solid;/* 去掉右边 */border-right: none;}</style></head><body><div id="" class="box1">我是div1</div><div id="" class="box2">我是div2</div></body>
</html>
盒子内边距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.box1{/* 内容区content，元素中的所有子元素和内容都在内容去中排列内容去大小由width和height设置*/width: 200px;height: 200px;background-color: #bfa;border: #00FFFF 10px solid;/* 内边距padding内容区和边框之间的距离内边距会影响到盒子大小，背景颜色会延伸到内边距里盒子模型大小由 边框，内边距和内容区*/padding:10px;}.inner{width: 100%;height: 100%;background-color: blue;}</style></head><body><div id="" class="box1"><div id="" class="inner">我是box1的内容区域</div></div><div id="" class="box2">我是div2</div></body>
</html>
盒子外边距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.box1{width: 200px;height: 200px;background-color: red;border: #00FFFF solid 10px;/* 外边距margin外边距不会影响可见框大小影响的是盒子的位置*/margin: 10px 10px -5px 10px;;}.box2{width: 200px;height: 200px;background-color: blanchedalmond;border: #BBFFAA solid 10px;/* margin 可以的指定负值兄弟元素： margin重叠区域都是正数或负数取数值大值正负数 相加父子元素: 父子元素间子元素外边距会传递给父元素影响布局，必须要处理margin: -5px 10px 10px 10px;}</style></head><body><div id="" class="box1">我是box1</div><div id="" class="box2">我是box2</div></body>
</html>
水平方向布局
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.outer{width: 800px;height: 200px;border: #FF0000 solid 10px;} /* 元素在父元素中水平方向影响因素margin-leftborder-leftpadding-leftwidthmargin-rightborder-rightpadding-right相加必须！！！等于父元素内容区宽度相加不相等成为过度约束，调整右外边距使其成立如果某个值为auto（默认）则auto自动调整常用这个特点是子元素在父元素中水平居中width: xxxmargin: 0 auto*/.box1{width: 200px;height: 200px;background-color: #00FFFF;margin-left: 100px;}</style></head><body><div id="" class="outer"><div id="" class="box1">我是box1</div></div><div id="" class="box2">我是box2</div></body>
</html>
垂直方向布局
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.outer{width: 500px;height: auto;background-color: beige;} /* 默认情况(auto)下父元素的高度会被子元素撑开父元素设置则不会被撑开,子元素会溢出使用overflow属性设置父元素如何处理一处的子元素overflow: visible 默认值 子元素会从父元素中溢出overflow: hidden 溢出内容被裁剪不会显示(内容也会被裁减)overflow: scroll 生成两个滚动条overflow: auto 根据需要生成滚动条*/.box1{width: 300px;height: 500px;background-color: #00FFFF;overflow: auto;}</style></head><body><div id="" class="outer"><div id="" class="box1">我是box1</div></div><div id="" class="box2">我是box2</div></body>
</html>
行内元素盒模型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title><style type="text/css">.s1{/* 行内元素不支设置宽度高度行内元素可以设置padding，但垂直方向的padding（padding无法生效可能是因为行内元素没有上空间）不会影响布局行内元素可以设置border ，但垂直方向的border（border无法生效可能是因为行内元素没有上空间）不会影响布局行内元素可以设置margin ，但垂直方向的margin（margin无法生效可能是因为行内元素没有上空间）不会影响布局并且水平方向margin要取和*/display: none;visibility:hidden;width: 100px;height: 100px;background-color: #00FFFF;/* display 用来设置元素显示类型 display: inline 行内元素display: block 块元素display: inline-block 行内块 既可以调整也不会独占一行display: table 表格display: none 元素不在页面中显示,不在占据位置visibility(可见度)用来显示元素的显示状态visibility:visible 可见的visibility:hidden 隐藏但依然占据位置*/}</style></head><body><span class="s1">span</span></body>
</html>
默认样式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>practice</title>/* 重置样式表reset.css 直接去除浏览器的默认样式normalize.css 对 默认样式进行统一*/<!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><!-- <link rel="stylesheet" type="text/css" href="../css/normalize.css"/> --><style type="text/css">div{width: 200px;height: 200px;border: #00FFFF solid 1px;}/* 默认样式通常情况下,默认样式会为元素设置一些默认样式会影响到页面的布局通常情况下要消除默认样式*/body{/* 默认为8px */margin: 0;}p{/* 默认16px */margin: 0;}ul{/* 默认16px */margin: 0;/* 默认40px */padding: 0;/* 去除项目符号 */list-style: none;}</style></head><body><div id=""></div><p>1</p><ul><li>列表1</li><li>列表2</li><li>列表3</li></ul></body>
</html>
盒子大小
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title>3<style type="text/css">.box1{width: 100px;height: 100px;background-color: #bfa;padding: 10px;border: #00FFFF 10px solid;/* 设置盒子尺寸大小计算方式可选值：content-box 默认值，宽度和高度设置内容区大小边长=边框宽度+padding+内容区宽度（width）border-box 宽度和高度用来设置整个盒子可见框大小边长=width（width定义里包括 边框宽度+padding+width）*/box-sizing:content-box;}</style></head><body><div id=""></div><p>1</p><ul><div id="" class="box1"></div></ul></body>
</html>
轮廓 阴影 圆角
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><style type="text/css">.box1{width: 200px;height: 200px;background-color: #bfa;padding: 10px;/* outline用来设置元素的轮廓线用法和border一样轮廓和边框不同，时轮廓不会影响到可见框的大小*//* outline: #00FFFF 10px solid; *//* 用来设置阴影效果，阴影不会影响布局 第一个值 左侧偏移量（类似于margin-left） 向右偏移 第二个值 垂直偏移量 （类似于margin-top） 向下偏移第三个值 模糊半径*//* box-shadow: 10px 10px 10px #333333; *//* 可以设置两个值 这样可以做出椭圆效果 先后顺序不一样，切出效果不一样*//* border-top-left-radius: 50px 20px ; *//* border-radius:; 用来设置圆角 每个角的圆的半径大小顺序： 四个值 左上 右上 右下 左下三个值 左上 右上/左下 右下两个值 左上/右下 右上/左下要设置多个值时（椭圆）值用/隔开*//* border-radius: 10px 20px 30px 40px; *//* 如果想要将元素设为圆形 */border-radius: 50%;}</style></head><body><div id="" class="box1"></div></body>
</html>
浮动
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><style type="text/css">.box1 {width: 200px;height: 200px;background-color: #bfa;/* 通过浮动可以使一个元素向其父元素的左侧或右侧移动使用float属性用来设置元素浮动float: none; 默认值，元素不浮动float: left; 元素向左浮动float: right; 元素向右浮动元素设置浮动，水平布局等式不需要强制成立元素设置浮动后，会完全脱离文档流，不在占用文档流位置所以元素下面在文档流中的元素会自动向上移动浮动特点：浮动元素会完全脱离文档流，不在占据文档里中的位置设置浮动以后元素会向父元素的左侧或右侧移动，无法脱离到父元素外后面的浮动元素不会盖住前面的浮动元素浮动元素上面的元素是一个没有浮动的块元素，浮动元素无法上移浮动元素不会超过前面的兄弟元素，最高和他一样高*/float: left;}.box2 {width: 300px;height: 300px;background-color: #00FFFF;float: left;}.box3 {width: 400px;height: 400px;background-color: #333333;}</style></head><body><div id="" class="box1"></div><div id="" class="box2"></div><div id="" class="box3"></div></body>
</html>浮动其他特点（文字环绕,脱离文档流）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1{width: 100px;height: 100px;background-color: #bfa;/* 浮动元素不会盖住文字，文字会自动环绕在浮动元素周围可以利用浮动设置文字环绕图片*/float: left;}.box2{background-color: #00FFFF;/* 元素设置浮动会脱离文档流，所以元素性质会发生变化 块元素不会在独占一行脱离文档流后，块元素的宽度和高度默认都被撑开行内元素 特点会变得和块元素一样脱离文档流不在区分块和行内了*/float: left;}.box3{background-color: orange;}.s1{width: 100px;height: 100px;background-color: blue;float: left;}</style></head><body><div id="" class="box1"></div><div id="" class="box2">hello</div><div id="" class="box3"><hello></hello></div><p>我外婆家有个院子，它不像西湖那样如诗如画，不像黄山那样高耸入云，不像桂林那样云遮雾绕，但它有自己别具一格的风采。远处，成片成片开着的紫色小花，那是扁豆花，搭起的几条扁豆藤构造了一个“井”字，这是我第一次见生长中的扁豆，我迫不及待地走过去。一棵棵秆壮叶旺，月牙形的豆壳里面蕴育着一颗颗饱满的果实。有些紫豆荚被胖小孩似的豆豆撑得鼓鼓得，都变了形，不过有些却很稀疏，这也许是冬天的召唤……风一吹，成串的扁豆像风铃一样摆动，阳光从紫藤的缝隙中穿透而下，星星点点的阳光跟着移动，我的目光也跟着移动。突然，一阵鸣叫把我吸引过去。一只鸡在藤下注视着什么一动不动，我跟随鸡的目光到了旁边的猫身上，它懒洋洋地依靠着一个粗壮的藤，悠闲地眯着眼睛，睡得正香。鸡似乎不服气地在说，你可真幸福！这时清香四溢的柚子让我转移了目光，柚子有黄色，金黄色，上窄下宽，像一个个不苟言笑的不倒翁。有些布满褐色的裂纹，有些长着细小的黑点。我把鼻子凑到柚子边，闻了闻，清香味让我馋得口水直流“三千尺”。阿婆二话没说拧下一个，熟练地开了口让我尝尝，吞咽着口水的我，麻利地咬了下去。好酸！我硬着头皮吃了一块。脚边的绿叶植物又吸引了我，我以为是薄荷，但铲子一铲，扒开泥土仔细一看，一个个番薯挨在一起，真神奇！</p><span class="s1">1234567</span></body>
</html>高度塌陷和BFC
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.outer {border: #00FFFF solid 10px;overflow: hidden;w}/* BFC （block Formatting Context） 块级格式化环境BFC时CSS中隐藏的一个属性，可以给元素开启BFC开启BFC会变成一个独立的布局区域元素开启BFC的特点1.开启BFC的元素不会被浮动元素所覆盖2.开启BFC的元素子元素和父元素的外边距不会重叠3.开启BFC的元素可以包含浮动的子元素可以通过一些特殊方式开启BFC1.设置元素浮动2.将元素设置为行内块元素3.将元素的overflow设置为一个非visible（非默认）值*/.inner {width: 100px;height: 100px;background-color: red;float: left;/* 高度塌陷问题 在浮动布局中，父元素默认被子元素撑开的子元素浮动时，子元素会从文档流中脱离无法撑起父元素，造成高度丢失父元素丢失后，其下的元素会向上跟进，导致网页混乱，所以必须处理高度塌陷问题！*/}</style></head><body><div class="outer"><div class="inner"></div></div></body>
</html>
BFC具体演示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1{width: 200px;height: 200px;background-color: #bfa;/* 开启BFC box3 外边距不会被子元素影响*/float: left;}.box2{width: 100px;height: 100px;background-color: #00FFFF;/* 开启BFC 元素不会被浮动元素覆盖 */overflow: hidden;}.box3{width: 100px;height: 100px;background-color: yellow;margin-top: 100px;}</style></head><body><div class="box1"><div class="box3"></div></div><div class="box2"></div></body>
</html>clear(清除高度塌陷影响)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1{width: 200px;height: 200px;background-color: #bfa;float: left; }.box2{width: 400px;height: 400px;background-color: slateblue;float: left; }.box3{width: 200px;height: 200px;background-color: aqua;/* clear作用：清除浮动元素对当前元素的影响可选值：left 清除左侧浮动元素对当前元素的影响right 清除右侧浮动元素对当前元素的影响both 清除两侧中最大影响的一侧原理：设置清除浮动浏览器自动添加一个上外边距（不会显示）*//* clear: left; *//* clear: right; */clear: both;}</style></head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body>
</html>利用::after伪类解决高度塌陷
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1{border: red solid 10px;/* overflow: hidden; */}.box2{width: 400px;height: 400px;background-color: slateblue;float: left; }/* 原理与box3一样 但比使用box3好这个使用表现css来解决表现问题 */.box1::after{content: "";display: block;clear: both;}/* 利用box3clear消除高度塌陷 不好 因为这是用结构html来消除表现问题*//* .box3{clear: both;} */</style></head><body><div class="box1"><div class="box2"></div><!-- <div class="box3"></div> --></div></body>
</html>clearfix(解决高度塌陷和外边距重合)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 100px;height: 100px;background-color: slateblue;margin-top: 100px;}/* clearfix可以同时解决高度塌陷和外边距重叠的一个样式类 *//* .clearfix::before,.clearfix::after{content: "";display: table; 解决外边距重合clear: both; 解决高度塌陷} **//* 具体实现 */.box1::before{/* 不能content东西，会多出一行content空无法隔开父子元素 所以要改变样式*/content: "";/* inline-block会多出一行table 不会占地方 */display: table;}</style>
</head><body><div class="box1"><div class="box2"></div></div></body></html>
相对定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: slateblue;/* 定位（position）使用position属性设置值定位*//* 默认值 *//* position: static; *//* 相对定位 不设置偏移量元素不发生任何变化相对定位是相对于元素自身在文档流中的位置相对定位会改变元素的层级相对定位不会改变元素的性质（文档流）偏移量（offset）开启定位后，可以通过偏移量设置元素的位置top bottomleftright*/position: relative;/* top: 100px; *//* bottom: 100px; */}.box3 {width: 200px;height: 200px;background-color: orange;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
绝对定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: slateblue;/* 定位（position）使用position属性设置值定位*//* 默认值 *//* position: static; *//* 绝对定位 绝对定位是相对于是相对于包含块进行定位的不设置偏移量不会发生变化脱离文档流提升一个层级*/ /* 包含块（containing block）正常情况下包含块是最近的祖先块元素绝对定位的包含块包含块是最近的开启定位的祖先块元素没有开启定位的祖先块元素，则根元素就是他的包含块*//* position: absolute; */}.box3 {width: 200px;height: 200px;background-color: orange;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
固定定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: slateblue;/* 定位（position）使用position属性设置值定位*//* 默认值 *//* position: static; *//* 固定定位 也是一种绝对定位，大部分特点和绝对定位一样唯一不同的是永远参考与浏览器的视口定位*//* position: fixed; */}.box3 {width: 200px;height: 200px;background-color: orange;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
粘滞定位
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>study</title><!-- <link rel="stylesheet" type="text/css" href="../css/reset.css"/> --><style type="text/css">body{height: 2000px;}.box1 {width: 200px;height: 200px;background-color: red;}.box2 {width: 200px;height: 200px;background-color: slateblue;/* 定位（position）使用position属性设置值定位*//* 默认值 *//* position: static; *//* 粘滞定位特点和相对定位基本一直粘滞定位会在元素视口移动时到达设置的位置固定 *//* position: sticky; */}.box3 {width: 200px;height: 200px;background-color: orange;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="box3"></div></body></html>
绝对定位元素的位置
元素的层级
HTML5和CSS3笔记相关推荐
- 学习前端html5和css3笔记六
1-案例练习.html <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
- 最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 ...
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
写在前面 书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)来进行相应的响应和调整. 我的简评:响 ...
- HTML5与CSS3实现动态网页（笔记）
打开新页 HTML5与CSS3实现动态网页(学习笔记) 结构标签 article:标记定义一篇文章 header:标记定义一个页面后者一个区域的头部 nav:标记定义导航链接 section:标记定义 ...
- 响应式Web设计：HTML5和CSS3实战 读书笔记
响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao pandao####vip.qq.com ...
- 《iOS应用开发指南——使用HTML5、CSS3和JavaScript》——第1章 变小的巨大影响1.1 移动魔力和掌上电脑...
本节书摘来自异步社区<iOS应用开发指南--使用HTML5.CSS3和JavaScript>一书中的第1章,第1.1节,作者: [美]Kristofer Layon 更多章节内容可以访问云 ...
- 慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...
- HTML5和CSS3 WEB技术开发
HTML5和CSS3 WEB技术开发 B站视频参考:https://www.bilibili.com/video/BV1H44y1k7ze/ 课程目标: 使用HTML5进行网站布局 使用CSS3进行网 ...
最新文章
- wireshark抓取https并解密方法一
- python怎么重复程序_python怎么让程序重复运行
- 分布式下服务注册的地位和原理
- python中exchange函数使用_python基于exchange函数发送邮件过程详解
- 荐书：《PostgreSQL指南：内幕探索》| 留言送书
- 继爱奇艺之后，腾讯视频、优酷宣布：取消剧集超前点播服务
- 扩展欧几里得，解线性同余方程 逆元 poj1845
- localStorage存储数组以及取数组方法。
- 测视力距离5米还是3米_装B冷知识 | 小孔镜为什么可以提高视力？
- 允许局域网内其他主机访问本地MySql数据库
- 阿里java工具包_阿里开源的Java诊断工具Arthas(阿尔萨斯)
- CWM(Common warehouse metamodel)
- 直接在Google Chrome浏览器中查看文档和PDF
- 【github】论怎么去写一个高大上的ReadMe
- Unity 之 代码获取IOS设备型号 -- 做分辨率适配
- HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本，因而将无法由静态文件处理程序来处理
- 统计假设检验中的P值及置信区间理解
- 自由地思考——保护思想环境
- 沙猫群优化算法(Sand Cat Swarm Optimization,SCSO) -- 笔记
- 6、阿里云OSS对象存储手把手学习及企业使用方案
热门文章
- 黑马全新软件测试学习教程，100G免费学~~
- Audacity分析浊音清音爆破音的时域和频域波形图
- 大数据发现了厕所越干净城市越发达，但永远无法解释这背后的原因
- python自动化--如何用10行Python代码调一个闹钟 #电脑调闹钟
- 【Python爬虫实战】爬取彼岸图库高清图片
- Font Awesome html源码,CSS 中Font Awesome 图标（附码表）
- python线上培训考级
- python读取csv数据画直方图_用python绘制直方图
- easyquant股票量化框架，支持行情获取以及交易(Python)
- 集合例题1:已知数组存放一批QQ号码，QQ号码最长为11位，最短为5位String[] strs = {“12345“,“67891“,“12347809933“,“98765432102“,“678