HTML+CSS
注:以下下内容为观看**尚硅谷HTML5，CSS3前端教程(李立超主讲html5、css3）**笔记总结
HTML
meta标签
-
meta主要用于设置网页中的一些元数据，元数据不是给用户看
- charset 指定网页的字符集
- name 指定的数据的名称
- content 指定的数据的内容
-
使用举例：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/> <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon"> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
语义化标签
在网页中HTML专门用来负责网页的结构。所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
标签举例：
- 标题标签
<hgroup>
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
hgroup>
- 块元素与行内元素
<p>
<h1>哈哈h1>
p>
- p标签及相似标签
<p>在p标签中的内容就表示一个段落p>
<p>在p标签中的内容就表示一个段落p>
<p>你今天必须要<strong>完成作业strong>！p>
<p>鲁迅说：
<blockquote>
这句话我是从来没有说过的！
blockquote>
p>
子曰<q>学而时习之，乐呵乐呵！q>
<br>
- 布局标签
<header>header>
<main>main>
<footer>footer>
<nav>nav>
<aside>aside>
<article>article>
<section>section>
<div>div>
<span>span>
列表
- 有序列表
<ol>
<li>结构li>
<li>表现li>
<li>行为li>
ol>
- 无序列表
<ul>
<li>结构li>
<li>表现li>
<li>行为li>
ul>
- 定义列表
<dl>
<dt>结构dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落dd>
dl>
- 注：列表之前可以互相嵌套
<ul>
<li>
aa
<ul>
<li>aa-1li>
<li>aa-2
<ul>
<li>aa-1li>
<li>aa-2li>
ul>
li>
ul>
li>
ul>
超链接
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。
- 使用 a 标签来定义超链接
<a href="https://www.baidu.com">超链接a>
-
属性
- href 指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址；可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置。
- target属性，用来指定超链接打开的位置,可选值： _self 默认值 在当前页面中打开超链接; _blank 在一个新的要么中打开超链接
- id属性（唯一不重复的， 每一个标签都可以添加一个id属性； id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 。
<a id="baidu" href="https://www.baidu.com" target="_blank">超链接a>
图片标签
-
图片标签用于向当前页面中引入一个外部图片;img标签是一个自结束标签; img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）。
-
属性
- src 属性指定的是外部图片的路径（路径规则和超链接是一样的）。
- alt 图片的描述，这个描述默认情况下不会显示，有些浏览器在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。
- width 图片的宽度 (单位是像素)。
- height 图片的高度 。
- 宽度和高度中如果只修改了一个，则另一个会等比例缩放。
- 注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大； 但是在移动端，经常需要对图片进行缩放（大图缩小） 。
<img src="./img/1.gif" alt="松鼠"> -
图片的格式
- jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图；一般用来显示照片。
- gif：支持的颜色比较少，支持简单透明，支持动图；颜色单一的图片，动图。
- png：支持的颜色丰富，支持复杂透明，不支持动图；颜色丰富，复杂透明图片（专为网页而生）。
- webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式；它具备其他图片格式的所有优点，而且文件还特别的小；缺点：兼容性不好。
- base64 ：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片 ；一般都是一些需要和网页一起加载的图片才会使用base64。
内联框架
- 用于向当前页面中引入一个其他页面
- 属性：
- src 指定要引入的网页的路径.
- frameborder 指定内联框架的边框(inline)
<iframe src="https://www.qq.com" width="200" height="600" frameborder="0">iframe>
音视频
-
audio 标签用来向页面中引入一个外部的音频文件的,音视频文件引入时，默认情况下不允许用户自己控制播放停止。
-
属性：
- controls 是否允许用户控制播放。
- autoplay 音频文件是否自动播放,如果设置了autoplay 则音乐在打开页面时会自动播放;但是目前来讲大部分浏览器都不会自动对音乐进行播放 。
- loop 音乐是否循环播放 。
<audio controls> <source src="./source/audio.mp3"> <source src="./source/audio.ogg"> <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100"> audio> -
使用video标签来向网页中引入一个视频,使用方式和audio基本上是一样的。
<video controls>
<source src="https://v.qq.com/x/page/a0566a610dm.html">
video>
CSS
简介
-
网页分成三个部分：结构(HTML),表现(CSS),行为(JavaScript)
-
CSS:层叠样式表;网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式;而最终我们能看到只是网页的最上边一层;总之一句话，CSS用来设置网页中元素的样式.
-
使用CSS来修改元素的样式
- 内联样式，行内样式：在标签内部通过style属性来设置元素的样式。
- 内部样式表：将样式编写到head中的style标签里,然后通过CSS的选择器来选中元素并为其设置各种样式,可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用,内部样式表更加方便对样式进行复用。
- 外部样式表：可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件。
<p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰p> <style> p{ color: green; font-size: 50px; } style> <link rel="stylesheet" href="./style.css">
语法
- 注释：注释中的内容会自动被浏览器所忽略。
- 选择器：通过选择器可以选中页面中的指定元素，比如 p 的作用就是选中页面中所有的p元素。
- 声明块：通过声明块来指定要为元素设置的样式。
选择器
通过选择器对某一页面标签进行CSS设置。
常用选择器
- 元素选择器：根据标签名来选中指定的元素。
- id选择器：根据元素的id属性值选中一个元素。
- 类选择器：根据元素的class属性值选中一组元素。
p{
color: red;
}
#red{
color: red;
}
.abc{
font-size: 20px;
}
"red" class="abc">儿童相见不相识
复合选择器
- 交集选择器：选中同时复合多个条件的元素。
- 选择器分组：同时选择多个选择器对应的元素。
/*
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: blue
}
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
*/
h1, .red{
color: green
}
关系选择器
- 父元素：直接包含子元素的元素叫做父元素
- 子元素：直接被父元素包含的元素是子元素
- 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
- 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素是兄弟元素
"box">
我是一个div
我是div中的p元素
我是p元素中的span
我是div中的span元素
我是div中的span元素
我是div中的span元素
我是div中的span元素
我是div外的span
属性选择器
- [属性名] 选择含有指定属性的元素
- [属性名=属性值] 选择含有指定属性和属性值的元素
- [属性名^=属性值] 选择属性值以指定值开头的元素
- [属性名$=属性值] 选择属性值以指定值结尾的元素
- [属性名*=属性值] 选择属性值中含有某值的元素的元素
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
/* p[title]{ */
/* p[title=abc]{ */
/* p[title^=abc]{ */
/* p[title$=abc]{ */
p[title*=e]{
color: orange;
}
style>
head>
<body>
<p title="abc">少小离家老大回p>
<p title="abcdef">乡音无改鬓毛衰p>
<p title="helloabc">儿童相见不相识p>
<p>笑问客从何处来p>
<p>秋水共长天一色p>
<p>落霞与孤鹜齐飞p>
body>
html>
伪类选择器
-
伪类（不存在的类，特殊的类）：伪类用来描述一个元素的特殊状态。比如：第一个子元素、被点击的元素、鼠标移入的元素…
-
伪类一般情况下都是使用:开头
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> /* :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素 :only-child 特殊值： n 第n个 n的范围0到正无穷 2n 或 even 表示选中偶数位的元素 2n+1 或 odd 表示选中奇数位的元素 - 以上这些伪类都是根据所有的子元素进行排序 :first-of-type :last-of-type :nth-of-type() :only-of-type :empty - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 :not() 否定伪类 - 将符合条件的元素从选择器中去除 */ /* ul > li:first-child{ color: red; } */ /* ul > li:last-child{ color: red; } */ /* ul > li:nth-child(2n+1){ color: red; } */ /* ul > li:nth-child(even){ color: red; } */ /* ul > li:first-of-type{ color: red; } */ ul > li:not(:nth-of-type(3)){ color: yellowgreen; } style> head> <body> <ul> <span>我是一个spanspan> <li>第〇个li> <li>第一个li> <li>第二个li> <li>第三个li> <li>第四个li> <li>第五个li> ul> body> html> -
a元素的伪类
伪元素选择器
-
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
-
伪元素使用 :: 开头
样式的继承
-
我们为一个元素设置的样式同时也会应用到它的后代元素上
-
继承是发生在祖先后代之间的
-
继承的设计是为了方便我们的开发：利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式
-
注意：并不是所有的样式都会被继承：比如背景相关的，布局相关等的这些样式都不会被继承。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> p{ color: red; background-color: orange; } div{ color: yellowgreen } style> head> <body> <p> 我是一个p元素 <span>我是p元素中的spanspan> p> <span>我是p元素外的spanspan> <div> 我是div <span> 我是div中的span <em>我是span中的emem> span> div> body> html>
选择器的权重
- 样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。而发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。
- 选择器的权重：
- 内联样式 1,0,0,0
- id选择器 0,1,0,0
- 类和伪类选择器 0,0,1,0
- 元素选择器 0,0,0,1
- 通配选择器 0,0,0,0
- 继承的样式 没有优先级
- 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）, 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器，如果优先级计算后相同，此时则优先使用靠下的样式。可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
- 注意：在开发中这个玩意一定要慎用！
单位以及颜色
- 单位：
- 像素:屏幕（显示器）实际上是由一个一个的小点点构成的;不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰;所以同样的200px在不同的设备下显示效果不一样
- 百分比:也可以将属性值设置为相对于其父元素属性的百分比；设置百分比可以使子元素跟随父元素的改变而改变
- em：em是相对于元素的字体大小来计算的；1em = 1font-size；em会根据字体大小的改变而改变
- rem:rem是相对于根元素的字体大小来计算
- 颜色：*在CSS中可以直接使用颜色名来设置各种颜色,比如：red、orange、yellow、blue、green … …;但是在css中直接使用颜色名是非常的不方便.。
- RGB：
- RGB通过三种颜色的不同浓度来调配出不同的颜色
- R red，G green ，B blue
- 每一种颜色的范围在 0 - 255 (0% - 100%) 之间
- 语法：RGB(红色,绿色,蓝色)
- RGBA：
- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值，前三个和rgb一样，第四个表示不透明度
- 1表示完全不透明 0表示完全透明 .5半透明
- 十六进制的RGB值：
- 语法：#红色绿色蓝色
- 颜色浓度通过 00-ff
- 如果颜色两位两位重复可以进行简写
- HSL值 HSLA值：
- H 色相(0 - 360)
- S 饱和度，颜色的浓度 0% - 100%
- L 亮度，颜色的亮度 0% - 100%
- RGB：
文档流
-
网页是一个多层的结构，一层摞着一层,通过CSS可以分别为每一层来设置样式,作为用户来讲只能看到最顶上一层,这些层中，最底下的一层称为文档流，文档流是网页的基础,我们所创建的元素默认都是在文档流中进行排列
-
对于我们来元素主要有两个状态：在文档流中以及不在文档流中（脱离文档流）。
-
元素在文档流中有什么特点：
- 块元素
- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部（会把父元素撑满）
- 默认高度是被内容撑开（子元素）
- 行内元素
- 行内元素不会独占页面的一行，只占自身的大小
- 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）
- 行内元素的默认宽度和高度都是被内容撑开
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> .box1{ width: 100px; background-color: yellow; } .box2{ width: 100px; background-color: red; } span{ background-color: #bfa; } style> head> <body> <div class="box1">我是div1div> <div class="box2">我是div2div> <span>我是span1span> <span>我是span2span> <span>我是span2span> <span>我是span2span> <span>我是span2span> <span>我是span2span> <span>我是span2span> <span>我是span2span> <span>我是span2span> <span>我是span2span> body> html> - 块元素
盒模型
- 盒模型、盒子模型、框模型（box model）
- CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
- 每一个盒子都由一下几个部分组成：
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
内容区
元素中的所有的子元素和文本内容都在内容区中排列，内容区的大小由width 和 height两个属性来设置：width 设置内容区的宽度；height 设置内容区的高度 。
边框
边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小，要设置边框，需要至少设置三个样式：
- 边框的宽度 border-width
/*
border-width: 10px;
默认值，一般都是 3个像素
border-width可以用来指定四个方向的边框的宽度
值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度
*/
border-width: 10px;
border-top-width: 10px;
border-left-width: 30px;
color: red;
border-bottom: red solid 1px;
- 边框的颜色 border-color
/*
border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border-width一样
border-color也可以省略不写，如果省略了则自动使用color的颜色值
*/
border-color: orange red yellow green;
border-color: orange;
- 边框的样式 border-style
/*
border-style 指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border-style的默认值是none 表示没有边框
border-style: solid dotted dashed double;
border-style: solid;
*/
border-width: 10px;
border-color: orange;
border-style: solid;
- 简写属性
/*
border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
除了border以外还有四个 border-xxx
border-top
border-right
border-bottom
border-left
*/
border: solid 10px orange;
border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red;
内边距
- 内容区和边框之间的距离是内边距
- 一共有四个方向的内边距：
- padding-top
- padding-right
- padding-bottom
- padding-left
- 内边距的设置会影响到盒子的大小
- 背景颜色会延伸到内边距上
/*
一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
所以在计算盒子大小时，需要将这三个区域加到一起计算
*/
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px;
/*
padding 内边距的简写属性，可以同时指定四个方向的内边距
规则和border-width 一样
*/
外边距
- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距：
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin也可以设置负值，如果是负值则元素会向相反的方向移动
- 元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身,而设置下和右外边距会移动其他元素
/*
margin的简写属性
margin 可以同时设置四个方向的外边距 ，用法和padding一样
margin会影响到盒子实际占用空间
*/
margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px;
margin-right: 0px;
水平布局
-
元素在其父元素中水平方向的位置由以下几个属性共同决定：
- margin-left
- border-left
- padding-left
- width
- padding-right
- border-right
- margin-ringt
-
一个元素在其父元素中，水平布局必须要满足以下的等式:
- margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度
-
以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
- 调整的情况
width: auto; width: 100px; height: 200px; background-color: #bfa; margin-right: auto; margin-left: auto; margin-left: 100px; margin-right: 400px /* 1.如果以上属性依次为： 0 + 0 + 0 + 200 + 0 + 0 + 0 = 800 由于其一定要满足等式成立，浏览器会自动修改margin-rigth的值为600 0 + 0 + 0 + 200 + 0 + 0 + 600 = 800 所以：如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足 2.这七个值中有值设置为auto 如果某个值为auto，则会自动调整为auto的那个值以使等式成立 - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0 - 如果将三个值都设置为auto，则外边距都是0，宽度最大 - 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值 所以我们经常利用这个特点来使一个元素在其父元素中水平居中 示例： width:xxxpx; margin:0 auto; 3.总结： 1.如果没有设置以上七个值，则自动填充的父元素 2.如果设置了以上七个值： - 没有auto：如果设置了width且等式不成立，则自动填充margin-right使等式成立r - 有auto： > 如果只有一个auto，则如果等式不成立，则自动填充auto > 如果width设置为auto，则width自动填充 > 如果width没有设置为auto，则自动填充其他auto */
垂直布局
- 子元素是在父元素的内容区中排列的
- 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
- 使用 overflow 属性来设置父元素如何处理溢出的子元素
- 可选值：
- visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
- hidden 溢出内容将会被裁剪不会显示
- scroll 生成两个滚动条，通过滚动条来查看完整的内容
- auto 根据需要生成滚动条
- 可选值：
外边距的折叠
- 垂直外边距的重叠（折叠）
- 相邻的垂直方向外边距会发生重叠现象
- 兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
- 特殊情况：
- 如果相邻的外边距一正一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中绝对值较大的
- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
- 特殊情况：
- 父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理
- 解决办法：
- 通过对其布局中的七个属性进行修改，使其满足等式即可！
- 兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
行内元素的盒模型
- 行内元素不支持设置宽度和高度
- 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
- 行内元素可以设置border，垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
- display属性：用来设置元素显示的类型
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素，行内块，既可以设置宽度和高度又不会独占一行
- table 将元素设置为一个表格
- none 元素不在页面中显示
- visibility属性：用来设置元素的显示状态
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置
默认样式
- 通常情况，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）。
body{
margin: 0;
}
p{
margin: 0;
}
ul{
margin: 0;
padding: 0;
/* 去除项目符号 * /
list-style:none;
}
*{
margin: 0;
padding: 0;
}
盒子的尺寸
- 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
- box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
- content-box 默认值，宽度和高度用来设置内容区的大小
- border-box 宽度和高度用来设置整个盒子可见框的大小
- width 和 height 指的是内容区 和 内边距 和 边框的总大小
轮廓和圆角
-
outline：用来设置元素的轮廓线，用法和border一模一样,轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
-
box-shadow：用来设置元素的阴影效果，阴影不会影响页面布局
- 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
- 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
- 第三个值 阴影的模糊半径
- 第四个值 阴影的颜色
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; -
border-radius: 用来设置圆角 圆角设置的圆的半径大小
- 四个值 左上 右上 右下 左下
- 三个值 左上 右上/左下 右下
- 两个个值 左上/右下 右上/左下
border-radius: 20px / 40px; /* border-top-left-radius: */ /* border-top-right-radius */ /* border-bottom-left-radius: */ /* border-bottom-right-radius: */ /* border-top-left-radius:50px 100px; */
浮动
简介
- 通过浮动可以使一个元素向其父元素的左侧或右侧移动
- 使用 float 属性来设置于元素的浮动
- none 默认值 ，元素不浮动
- left 元素向左浮动
- right 元素向右浮动
- 注意，元素设置浮动以后，水平布局的等式便不需要强制成立,元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。
特点
- 浮动元素会完全脱离文档流，不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动，
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以利用浮动来设置文字环绕图片的效果
- 元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
- 脱离文档流的特点
- 块元素：
- 块元素不在独占页面的一行
- 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
- 行内元素：
- 行内元素脱离文档流以后会变成块元素，特点和块元素一样
- 块元素：
- 脱离文档流的特点
网页布局简介
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
header, main, footer{
width: 1000px;
margin: 0 auto;
}
/* 设置头部 */
header{
height: 150px;
background-color: silver;
}
/* 设置主体 */
main{
height: 500px;
background-color: #bfa;
margin: 10px auto;
}
nav, article, aside{
float: left;
height: 100%;
}
/* 设置左侧的导航 */
nav{
width: 200px;
background-color: yellow;
}
/* 设置中间的内容 */
article{
width: 580px;
background-color: orange;
margin: 0 10px;
}
/* 设置右侧的内容 */
aside{
width: 200px;
background-color: pink;
}
/* 设置底部 */
footer{
height: 150px;
background-color: tomato;
}
style>
head>
<body>
<header>header>
<main>
<nav>nav>
<article>article>
<aside>aside>
main>
<footer>footer>
body>
html>
高度塌陷的问题
- 在浮动布局中，父元素的高度默认是被子元素撑开的,当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离,将会无法撑起父元素的高度，导致父元素的高度丢失，父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
- 解决办法1：BFC
- 解决办法2：clearfix
BFC
- BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点：
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素和父元素外边距不会重叠
- 开启BFC的元素可以包含浮动的子元素
- 可以通过一些特殊方式来开启元素的BFC：
- 设置元素的浮动（不推荐）
- 将元素设置为行内块元素（不推荐）
- 将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.outer{
border: 10px red solid;
float: left;
display: inline-block;
overflow: hidden;
}
.inner{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
style>
head>
<body>
<div class="outer">
<div class="inner">div>
div>
<div style="width: 200px;height: 200px;background-color:yellow;">div>
body>
html>
- clear方法开启
- 由于box1的浮动，导致box3位置上移,也就是box3收到了box1浮动的影响，位置发生了改变,如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
- 作用：清除浮动元素对当前元素所产生的影响
- 可选值：
- left 清除左侧浮动元素对当前元素的影响
- right 清除右侧浮动元素对当前元素的影响
- both 清除两侧中最大影响的那侧
- 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响。
- 最终解决方案：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.box1{
border: 10px red solid;
/* overflow: hidden; */
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box3{
clear: both;
}
.box1::after{
content: '';
clear: both;
display: block;
}
style>
head>
<body>
<div class="box1">
<div class="box2">div>
div>
body>
html>
-
clearfix
- 个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Documenttitle> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; } /* .box1::before{ content: ''; display: table; } */ .box2{ width: 100px; height: 100px; background-color: orange; margin-top: 100px; } .clearfix::before, .clearfix::after{ content: ''; display: table; clear: both; } style> head> <body> <div class="box1 clearfix"> <div class="box2">div> div> body> html>
浮动总结：
- 通过浮动可以设置一些水平方向的布局
- 浮动可能会有高度塌陷的问题。
- 解决方法：
- 通过开启BFC来进行解决
- 设置clear
- 设置clearfix属性
- 解决方法：
定位（position）
简介
- 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置
- 使用position属性来设置定位
- static 默认值，元素是静止的没有开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
- sticky 开启元素的粘滞定位
- 偏移量：当元素开启了定位以后，可以通过偏移量来设置元素的位置
- top：定位元素和定位位置上边的距离
- bottom：定位元素和定位位置下边的距离
- left：定位元素和定位位置的左侧距离
- right：定位元素和定位位置的右侧距离
相对定位
- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 特点
- 元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
- 相对定位是参照于元素在文档流中的位置进行定位的
- 相对定位会提升元素的层级
- 相对定位不会使元素脱离文档流
- 相对定位不会改变元素的性质块还是块，行内还是行内
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 100px;
top: -200px;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
style>
head>
<body>
<div class="box1">1div>
<div class="box2">2div>
<div class="box3">3div>
body>
html>
绝对定位
- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 特点：
- 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
- 开启绝对定位后，元素会从文档流中脱离
- 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
- 绝对定位会使元素提升一个层级
- 绝对定位元素是相对于其包含块进行定位的
- 包含块
- 正常情况下：包含块就是离当前元素最近的祖先块元素
- 绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
- html（根元素、初始包含块）
- 布局
- left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
body{
font-size: 60px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
/* left: 0;
top: 0; */
bottom: 0;
right: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
position: relative;
}
.box5{
width: 300px;
height: 300px;
background-color: aliceblue;
/* position: relative; */
}
style>
head>
<body>
<div class="box1">1div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2div>
div>
div>
<div class="box3">3div>
body>
html>
固定定位
- 将元素的position属性设置为fixed则开启了元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
- 唯一不同的是固定定位永远参照于浏览器的视口进行定位,固定定位的元素不会随网页的滚动条滚动
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
body{
font-size: 60px;
height: 2000px;
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
position: fixed;
left: 0;
top: 0;
}
.box3{
width: 200px;
height: 200px;
background-color: yellow;
}
.box4{
width: 400px;
height: 400px;
background-color: tomato;
}
.box5{
width: 300px;
height: 300px;
background-color: aliceblue;
}
style>
head>
<body>
<div class="box1">1div>
<div class="box4">
4
<div class="box5">
5
<div class="box2">2div>
div>
div>
<div class="box3">3div>
body>
html>
粘滞定位
- 当元素的position属性设置为sticky时则开启了元素的粘滞定位
- 粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素到达某个位置时将其固定
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航条title>
<link rel="stylesheet" href="./css/reset.css">
<style>
body{
height: 3000px;
}
/* 设置nav的大小 */
.nav{
/* 设置宽度和高度 */
width: 1210px;
height: 48px;
/* 设置背景颜色 */
background-color: #E8E7E3;
margin:100px auto;
position: sticky;
top: 10px;
}
/* 设置nav中li */
.nav li{
/* 设置li向左浮动，已使菜单横向排列 */
float: left;
/* 设置li的高度 */
/* height: 48px; */
/* 将文字在父元素中垂直居中 */
line-height: 48px;
}
/* 设置a的样式 */
.nav a{
/* 将a转换为块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #777777;
/* 修改字体大小 */
font-size: 18px;
padding: 0 39px;
}
.nav li:last-child a{
padding: 0 42px 0 41px;
}
/* 设置鼠标移入的效果 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
style>
head>
<body>
<ul class="nav">
<li>
<a href="#">HTML/CSSa>
li>
<li>
<a href="#">Browser Sidea>
li>
<li>
<a href="#">Server Sidea>
li>
<li>
<a href="#">Programminga>
li>
<li>
<a href="#">XMLa>
li>
<li>
<a href="#">Web Buildinga>
li>
<li>
<a href="#">Referencea>
li>
ul>
body>
html>
元素的层级
- 对于开启了定位元素，可以通过z-index属性来指定元素的层级
- z-index需要一个整数作为参数，值越大元素的层级越高,元素的层级越高越优先显示
- 如果元素的层级一样，则优先显示靠下的元素,祖先的元素的层级再高也不会盖住后代元素
.box3{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}