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-height
3\给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-
在书写代码上,如果先写的是带前缀的,后写没有带前缀的,这个思想是从小到大,就是渐进增强
在书写代码上,如果先写的是不带前缀的,后写带前缀的,这个思想是从大到小,就是优雅降级