DAY08伪类选择器和垂直对齐

一、动态伪类选择器

：link 设置链接未点击时的状态注意点：需要清除浏览器缓存，主要给a标签

：visted 设置访问过后的样式主要给a

：hover 鼠标悬停时的状态

：active 点击过后的状态

注：如果都给a需要注意顺序问题，权重是0010

二、垂直对齐属性

注：只能用于行内块元素

回顾：水平居中方法：

1.margin：0 auto；对象：谁居中给谁；前提条件，有宽度，得是一个块元素

2. text-align：center；对象：谁居中给谁的父亲添加;可以让盒子里面的文字实现文本水平居中，让行内和行内块元素

案例实操：

Q：实现一个未知宽度盒子水平居中

利用text-align：center；实现一个未知盒子水平居中

Q：实现盒子里的内容，单行的时候水平居中显示，多行的时候靠左显示，怎么操作？（弹窗应用）

1.先给父盒子text-align-center；

2.里面子元素转换为行内块元素，display：inlin-block text-align：left（文本）

三、隐藏一个盒子

1.彻底隐藏：display：none；显示：只要不是none其他都是可以的，常用block

2.只隐藏内容，但空间还在：opcity：0；（设置透明度）显示:只要属性值不是0就可以,常用于1

四、透明效果

1.opacity可以实现透明效果,取值范围是0-1 透明是让某个盒子所有透明

2.rgba()可以透明,但是只能颜色透明：背景颜色边框颜色字体颜色

五、元素类型的分类

1、按照CSS的显示:块元素/行内元素 /行内块元素

2.按照CSS的显示和HTML的配合分类
a.置换元素(替换元素)
       特点:
           CSS显示上,默认情况下,有固定宽高或者带有边框
           在最终的网页功能上,想要最终有结果,需要HTML标签或者属性配合才可
       例如:
           img, img显示之后不用设置就有宽高,符合特点1,其次图片想要最终在页面中显示,必须依赖src这个HTML属性,符合特点2
           input,input写完之后在页面上有固定宽高也有边框,具体的框的类型确定,必须依赖type属性
           select 下拉菜单 textarea也是
b. 非置换元素(非替换元素)
       除了置换就是非置换元素

DAY09定位

一、定位的使用场景

1、移动位置的时候用

2、想要实现覆盖效果的时候用覆盖的时候,有相对于窗口的覆盖的时候,有不相对于窗口的,一般都是相对于父元素的

二、绝对定位absolute

特点：

1.脱离标准文档流也就是一个盒子给了绝对定位之后，该盒子也是悬空在在页面纸上的，不占位。

2.一个盒子绝对定位了，后面的盒子如果没有定位，那么后面的盒子会上去，且内容也会被定为的盒子覆盖

3.默认情况下，当多个盒子给了绝对定位之后，HTMl结构字啊后定位盒子在上

想要以上的层叠关系，可以通过新属性Z-index改变，这个属性只能给定义的盒子，不然没有效果，改属性的默认数值为0，数值越大层越靠上，没有最大值也没有最小值，不带单位

Z-index给负数是在所有的最下面

4.一个盒子定位之后，想要移动位置，可以通过margin属性也可以通过top，bottom，left right属性移动位置，当时用top left 等属性移动位置的时候，参照物默认情况下是浏览器视口的第一屏或者就是定位（此时的父元素可以是绝对，相对，固定，粘性，常用是相对定位）设置的父元素（子绝父相）

绝对定位和浮动的区别：浮动是半脱离文档

三、相对定位relative

1.不脱离文档流，也就是一个盒子给了相对定位之后，该盒子不悬空，占据页面的空间

2.默认情况下，当多个盒子给了相对定位之后，如果没有位置移动，那么盒子默认怎么排列还是怎么排列，没有覆盖效果，如果移动位置也会发生层叠，HTML结构在后，定位盒子在上，想要改变以上的层叠关系，可以通过新属性Z-index改变，这个属性只能给定位的盒子，不然没有效果，默认值为0，数大往上，，给负数最下面

3.给了相对定位后，该盒子占据位置，即使移动，原有的空间还在，切再用top bottom left right移动位置（常用作网页导航的吸顶效果）

4.相对定位可以用，也可以实现覆盖效果，但尽量不要移动位置，移动的话就有空白空间站位，

四、固定定位 fixed

1、脱离文档流,也就是一个盒子给了固定定位之后,该盒子悬空,不占据页面的空间

2、默认情况下,当多个盒子给了固定对定位之后,会发生层叠,HTML结构在后的定位盒子层在上想要改变以上的层叠关系,可以通过新属性z-index改变,这个属性只能给定位的盒子,不然没有效果,该属性的默认数字值是0,数值越大层越靠上,没有最大值也没有最小值,不带单位 z-index给负数是在所有的最下面

3、一个盒子给了固定定位之后,使用top left right bottom移动位置的时候,参照物是浏览器的当前窗口(视口)

五、默认定位 static

六、定位实现水平垂直居中效果（面试题）
   1.给想要居中的盒子添加定位(绝对定位/固定定位)
       top:calc(50% - 盒子的高度的一半)
       left:calc(50% - 盒子的宽度的一半)
2.给想要居中的盒子添加定位(绝对定位/固定定位)
       top:50%;left:50%;
       margin-top:-盒子高度的一半; margin-left:-盒子宽度的一半;
3.给想要居中的盒子添加定位(绝对定位/固定定位)
       margin:auto; top:0;right:0; bottom:0;left:0;

DAY10 锚点定位透明自适应

一、锚点定位

1.定义：是网页制作中超级链接的一种，又叫命名锚记。

2.命名锚点的作用：在同一页面内的不同位置进行跳转。（百度百科）

3.制作锚标记：

1)给元素定义命名锚记名语法：<标记 id="命名锚记名"> </标记>

2)命名锚记连接语法：<a href="#命名锚记名称"></a>

二、透明效果

1.opacity实现：取值范围是0-1 IE9以下浏览器不支持该效果

2.兼容写法：filter:alpha(opacity=0-100); 兼做了解

三、宽高自适应

1.概念：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应

2.优点：它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

3.想要实现自适应的方法：

1）宽度自适应：

a宽度不写 b.宽度的单位不用px，用相对单位比如%； c.用min-width、max-width设置。用在响应式布局上

2)高度自适应：

1、高度不写，存在问题：如果子元素浮动，父元素会高度塌陷。(高度塌陷)

2、高度的单位不用px，用相对单位比如%；如果希望相对于窗口的话，默认情况下，height用%是不生效的，需要给 body,html{height:100%;}

3、用min-height、max-height设置。

四、行内框架

1.含义：可以在一个html中，链接另外一个html页面显示

2.方式：<iframe src="路径 " scrolling="no"></iframe>

注：1.行内块元素，2.默认有边框，可以去除border：0；

3.默认跟图片一样,会向下撑大3像素添加display:block; 添加vertical-align

DAY11高度塌陷伪元素表格

一、高度塌陷

1.触发条件：所有的子元素浮动，父元素没有设置高度，最近的父元素会高度塌陷。

2.解决方法：

hack1：给父元素添加声明overflow:hidden; 缺点:不适合和定位定出去的页面布局使用

hack2：在浮动元素下方添加空div,并给该元素添加声明：div{clear:both;} 缺点：代码冗余

hack3:万能清除浮动法给父元素父元素:after{content:".";clear:both;display:block; visibility:hidden;}

hark4：给父元素添加固定高度缺点:不适合高度自适应的布局

二、伪对象伪元素选择器

引入的图片大小设置不了，不同的图片距离顶部有缝隙且缝隙不一致,可以用margin-top负数来测试有多少间距

三、表格

1.使用场景：展示数据的时候用

2.创建

3. 表格相关的html标签

4.html的相关属性

5.表格相关的CSS属性

DAY12表单和BFC

一、表单

回顾：

1.表单的作用：用来收集用户信息的

2.表单的组成：

a.表单域： <form name="" method="get/post" action=""></form>

b.表单控件： <input type="text" value=""/>

c.提示信息

3.表单相关的

CSS相关—伪类选择器权重是10 ：checked{}可以设置input选中之后的样式

二、BFC

1.什么是BFC?

BFC是一个特殊的块元素，只有块才可以成为BFC，但是不是所有的块是BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

2.触发条件：

1.根元素html默认就是一个BFC

2.float的值不为none 单纯的div不是BFC，

3.overflow的值不为visible，单纯的div不是bfc，如果添加了 overflow：hidden、auto、scorll等

4.display的值为inline-block/table-cell/table-caption/flex/inline-flex

5.position的值为绝对定位或固定定位

3.BFC的特性及应用

1.Box垂直方向的距离是由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠

原因：书写两个相邻的盒子，给上面的盒子margin-bottom，给下面的盒子添加margin-top，此时应该是两个间距之和，但是上下间距发生重叠，只显示数值大的间距，原因是因为此时两个div都在html里面，html是一个bfc，属于同一个bfc里面的2个相邻的盒子margin必然会发生重叠

解决方法：只要两个div，不属于同一个bfc，也就不会上下发生重叠(传递)

给下面的bottom添加一个父元素且触发bfc即可：浮动，display、overflow、定位

2.BFC的区域不会与float box 发生重叠，这句话得意思是：如果不是bfc，那么就会与浮动盒子发生重叠（应用：自适应两栏/三栏布局）

解决方法：

1.盒子给浮动

2.overflow

3.display

4.position（此时是上下两层，覆盖，并未重叠）

特性二存在意义：可以多种方法书写自适应两栏效果（6种）

3.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动，可以有很多解决高度塌陷的方法）

4、BFC内部的Box会在垂直方向，一个接一个的放置。

5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

DAY13浏览器兼容，图片整合与H5新增加标签

一、浏览器兼容

1.为什么会出现浏览器兼容问题？

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

2.浏览器兼容相关的专业术语：

CSS BUG：一些问题

CSS hark: 自己研究的一些解决问题的方法

CSS filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

!important 对于IE6不识别,其他浏览器识别，对于其他浏览器来说添加了该过滤器之后,该声明的权重到最大

+或者* \9 \0 _

 其他兼容问题和针对IE的过滤器其他兼容1\字体兼容  统一字体,给body设置font-family:"微软雅黑";2\ type="text"文本框里面的内容垂直不居中,在IE8以下低版本垂直靠上对齐hack:给input添加line-height3\给input用placeholder做提示信息的时候,IE9以下识别hack:想要解决,可以用value书写提示信息,但是就没有了placeholder的效果了4\ 在IE7和以下低版本上,有的标签有默认高度,常见标签里面是li有默认高度 hack:设置height:0;,不仅要给li设置也要给ul设置IE的过滤器,过滤器的目的是希望在执行某个css代码的时候,
只让符合规则的浏览器执行该代码,其他浏览器不解析该代码!important过滤器  对于IE6来说是不识别的,对于其他浏览器是识别的,
对于其他浏览器来说该过滤器可以加大执行属性的权重,且是最大权重,
比行内样式权重都大,是最大权重的表现  语法  div{width:200px   !important;}_过滤器  对于IE6识别 语法  div{_width:200px;}+或者*过滤器 对于IE7以及以下识别  语法  div{+width:200px;}+或者*过滤器 对于IE7以及以下识别  语法  div{*width:200px;}\9 对于IE10以及以下的浏览器识别  语法  div{width:200px\9;}\0 对于IE8以下的浏览器不识别且其他的浏览器也不识别(IE11-IE8识别) 语法  div{width:200px\0;}

二、浏览器内核

浏览器兼容的调整之后的缺点：降低代码的可读性,增加代码负担

2.常见的兼容问题

三、图片整合(整合好的大图名字叫做雪碧图或者精灵图)

1. 什么是图片整合？把一些小图片合并在一个大图上,这过程就是图片整合

2.为什么要进行图片整合？
a.可以减少向服务器请求的次数,从而提高浏览器的加载速度
b.减少图片体积

3. 整合的过程注意点
a.一定是要把小图片进行整合
b.图片和图片中间需要有缝隙
4.使用精灵图的使用
       方法1:用img
           img外面需要包一个盒子,盒子的大小要跟想要显示的图片大小一样
           img移动的时候需要配合margin-top负数移动
           需要overflow:hidden;配合
       方法2:用background背景图
           存放背景图的盒子大小要跟想要显示的图片大小一样
           背景图的位置移动需要配合background-position移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}/* 方法1: */.box1{width: 66px;height: 20px;display: block;/* border:2px solid red; */margin: 30px;overflow: hidden;}.box1 img{margin-left: -218px;margin-top: -9px;}/* 方法2 */.box2{width: 66px;height: 20px;display: block;/* border:2px solid red; */margin: 30px;background: url(bg.png) no-repeat -218px -9px;}.pic{width: 130px;height: 130px;border: 2px solid blue;margin: 20px;background: url(img01.png) no-repeat;}.pic2{background-position:left center;}.pic3{background-position:left bottom;}</style>
</head>
<body><a href="#" class="box1"><img src="bg.png"></a><a href="#" class="box2"></a><div class="pic"></div><div class="pic pic2"></div><div class="pic pic3"></div>
</body>
</html>

四、H5相关标签

一、新增标签

二、新增加的表单type属性

DAY14CSS选择器和CSS3属性

一、CSS选择器

1.属性选择器权重0010

2.伪类选择器权重0010

二、CSS属性
1. 阴影
       文本阴影
           text-shadow:水平阴影的距离垂直阴影的距离模糊度颜色;
           注意点
               参数至少2个,且是前2个
               水平和垂直阴影的距离可以给负数
               默认情况下,阴影的颜色是字体颜色
               多个阴影的时候,中间用逗号隔开
       盒子阴影
           box-shadow:水平阴影的距离垂直阴影的距离模糊度延伸半径颜色内阴影;
           注意点
               参数至少2个,且是前2个
               水平和垂直阴影的距离可以给负数
               默认情况下,阴影的颜色是黑色
               多个阴影的时候,中间用逗号隔开
               内阴影 inset
2. 换行
       word-break
           默认值 normal
           中文不换行 keep-all
           强制换行 break-all
               会强行截断英文单词
       word-wrap
           默认值 normal
           换行 break-word
               会换行但是不会强行截断英文单词
3.中英文大小写转换
       text-transform
           默认值 none
           首字母大写 capitalize
           全部大写 uppercase
           全部小写 lowercase
       font-variant
           默认值 normal
           小型大写字母 small-caps

三、理论
1. 针对CSS3添加到浏览器前缀
       针对谷歌相关的
           -webkit-
       针对火狐相关的
           -moz-
       针对IE的
           -ms-
       针对欧朋的
           -o-
   在书写代码上,如果先写的是带前缀的,后写没有带前缀的,这个思想是从小到大,就是渐进增强
   在书写代码上,如果先写的是不带前缀的,后写带前缀的,这个思想是从大到小,就是优雅降级

HTML5+CSS3知识点总结（二）相关推荐

尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p1-p8】
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p1(22:55) 一.软件的分类: 1.系统软件 -wind ...
HTML5+CSS3的学习(二)
HTML5+CSS3的学习(二) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3知识点-周5.md
HTML5 一.HTML5简介 HTML5是html的最新的标准(版本) 浏览器支持:ie9+对html5新特性部分支持,新的主流浏览器(chrome.火狐\safari) 向前向后兼容,语法变化: ...
html5 css3知识点,HTML5和CSS3知识点总结
1. 首先要分别创建html,img和css3的文件夹.css 2. html和css3的首页放在文件夹外面.还能够创建一个公共css,好比导航和页脚能够放在公共css里面,在每一个页面加上公共css ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
HTML5+CSS3实战（二）——照片墙效果
现在的前端做的越来越炫酷了,各种特效让人眼花缭乱. 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看. 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大: 鼠标离开照 ...
html照片墙实验报告,HTML5+CSS3实战（二）——照片墙效果
现在的前端做的越来越炫酷了,各种特效让人眼花缭乱. 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看. 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大: 鼠标离开照 ...
HTML5+CSS3的学习(一)
HTML5+CSS3的学习(一) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...
HTML5+CSS3的学习(五)
HTML5+CSS3的学习(五) 2018版李立超html+css基础 103集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1sW411T78k?spm_id ...

HTML5+CSS3知识点总结（二）