HTML+CSS学习Day15笔记

Day15笔记

一、根选择器

root和html是一样的

:root{
	background-color:orang;
}

二、否定选择器

否定选择器（不自信选择器）：给它设置的样式，除了它自己以外没有作用，其他都有作用

语法：标记:not([属性="属性值"])
作用：会改变除了具有此属性值的此种标记
input:not([type="tel"]){
	borde:1px solid red;
}

如果想对某个结构元素使用样式，但是又想排除这个结构下的某些子结构时，否定伪类选择器就非常有用，它可以过滤掉某些内容。

三、层级（层次）选择器

1、包含（后代）选择器
2、子选择器
3、通用兄弟选择器 注意点：可以被其他类型的标记隔开

/*只要是div后面的p标记都会起作用*/
div~p{
	background-color: greenyellow;
}

4、相邻兄弟选择器 注意点：不能被其他类型的标记给隔开

/*标记+相邻标记*/
/*只有div标记后面的第一个p标记才起作用。*/
div+p{
	background-color: red;
} 

四、浏览器私有前缀

​ CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性。我们在书写CSS3代码时，需要在属性前加上浏览器的私有前缀，然后该种内核的浏览器才能识别相应的CSS3属性。
​ 一个属性刚出来时需要浏览器支持，但是没有成为标准，导致的问题是有些浏览器支持有些不支持，为了进行过渡，所以一些常用的浏览器提出了私有前缀，如果在我的浏览器执行只要加了给你的私有前缀就可以支持vip标识 — 私有前缀就是类似这种标识
​
浏览器私有前缀：
-webkit- 谷歌
-moz- 火狐
-ms- IE
-o- 欧朋

div{
	width: 200px;
	height: 200px;
	background-color: orange;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}

五、过渡属性

• 通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时添加过渡效果。
• css3 过渡就是元素从一种样式逐渐改变为另一种的效果，需要确定两点：
  1. 需要添加效果的 css 属性
  2. 效果的时长

/*过渡属性默认带有动画效果*/

/*那个属性需要参与过渡*/
/* transition-property: box-shadow, margin-top, background-color; */

/*all表示所有的属性*/
transition-property: all;

/*过渡时间*/
transition-duration: 1s;

六、弹性盒布局介绍

1、弹性布局的思想是让容器有能力去控制子元素，控制的位置、大小、顺序等等
2、怎么把容器变成弹性盒布局模式，给容器直接设置display:flex;
3、当容器变成弹性盒布局模式后，容器里面的子元素默认所有方向都是横向排列的

.container1{
/*告诉浏览器这是弹性盒布局模式，里面的元素排列需要遵循弹性盒的规则*/
display: flex;
/*控制子元素的水平对齐方式*/
justify-content: space-around;
/*控制子元素的垂直对齐方式*/
align-items: center;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YnU156Ik-1622451072200)(D:\千锋\一阶段\5月\day15\资料\弹性盒专业术语.png)]

弹性盒相关专业术语：
1、在弹性盒布局模式下，把父元素称之为容器（container），把子元素称之为子项目（items）
2、在弹性盒布局模式下，把水平方向叫做主轴方向，把垂直方式叫做侧轴方向

七、flex-direction属性

flex-direction 属性指定了弹性子元素在父容器中的位置。

语法：flex-direction: row | row-reverse | column | column-reverse

1、row：横向从左到右排列（左对齐），默认的排列方式,不需额外设置。

2、row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）。

3、column：纵向排列。

4、column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

八、justfiy-content属性

内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。

语法：justify-content: flex-start | flex-end | center | space-between | space-around

1、flex-start：弹性项目向行头紧挨着填充。这个是默认值。

2、flex-end：弹性项目向行尾紧挨着填充（平移）。

3、center：弹性项目居中紧挨着填充。

4、space-between：弹性项目平均分布在该行上。（两端没有空间）

5、space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

九、align-items属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法：align-items: flex-start | flex-end | center | baseline | stretch

1、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界

2、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

3、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。

4、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

5、stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。（弹性盒中，子项目会继承父元素的尺寸）

十、flex-wrap属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式。

语法：flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

1、nowrap：默认， 弹性容器为单行。当咱们把容器转成弹性盒布局后，当容器的宽度或者高度不够的情况，项目会自动伸缩。

2、wrap：换行 一旦伸缩项目超出伸缩容器，那么就会换行。当咱们设置了换行后，如果容器有高度的情况下，项目的行与行之间有默认的行距。

3、wrap-reverse：反转 wrap 排列。（镜像）

十一、flex-flow属性

轴向排列方向属性与换行属性缩写形式

flex-flow：换行 轴向排列方向; 两个值同时定义或者单独定义都生效，不分先后顺序

flex-flow: column wrap;

十二、align-content属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch

1、stretch：默认。各行将会伸展以占用剩余的空间。（弹性盒中子项目会继承父元素的尺寸）

2、flex-start：各行向弹性盒容器的起始位置堆叠。

3、flex-end：各行向弹性盒容器的结束位置堆叠。

4、center：各行向弹性盒容器的中间位置堆叠。

5、space-between：各行在弹性盒容器中平均分布。（两端没有空间）

6、space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

十三、align-self属性

align-self 属性用于设置弹性元素自身（子项目）在侧轴（纵轴）方向上的对齐方式。会将align-items覆盖

语法：align-self: auto | flex-start | flex-end | center | baseline | stretch

1、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

2、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

3、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

4、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

5、stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

十四、flex属性

flex（设置在子元素上） 作用：可以让元素按比例平分容器的可用空间，元素原大小失效。

注意点：当容器里面的所以项目都设置了flex属性后，项目的原有的大小会失效，会按着等比例进行缩放

flex: 0 1 auto;
值一：flex-grow;
值二：flex-shrink;
值三：flex-basis;

十五、flex-grow属性

flex（设置在子元素上） 作用：可以让元素按比例平分容器的剩余空间，元素原大小保留。

十六、flex-shrink属性

flex-shrink: 0/1 ;
1 默认值，会自动缩小；
0 保证元素原有的尺寸，不会缩小。

十七、flex-basis属性

basis英文意思是“主要成分”，把width和basis放在一起时，basis会将width覆盖。

十八、order属性

1、显示顺序 order （加在子元素上）默认状态是按照标准流的顺序排列

2、子元素没有设置order属性的默认排列在前面，如果设置了默认排列在后面

3、如果子元素都设置了order属性，会按照order的值排列，1排列在最前面

十九、三列布局

三列布局：
1、三列布局指的是容器里面有三个子元素，两边的子元素宽度固定，中间的元素宽度自适应
2、在三列布局的基础上衍生出了一种布局方式，叫做双飞翼或者圣杯布局
3、双飞翼或者圣杯布局思路：
=> 容器里面有三个子元素，两边的子元素宽度固定，中间的元素宽度自适应
=> 希望中间内容区域的元素优先渲染（让浏览器最先解析或者加载它）
=> 还需要效果呈现的时候，中间的内容区域还在中间显示

（将重要的部分先解析，加载出来，再利用order对网页布局进行排版）

二十、移动端布局

<!--meta元信息：做网页头部区域的一些配置-->
<!--网站描述信息-->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<!--网站关键字-->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>

<!--理想区域 = 可视区域（手机模拟器大小）= 网页布局区域。
视口作用：
	1、可以让网页布局区域跟随屏幕大小动态改变
	2、禁止用户缩放页面-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title></title>
<!--给网站状态栏添加快捷图标-->
<link rel="shortcut icon" href="img/xc.png"/>

二十一、字体图标iconfont

<!--引入字体图标-->
<!--从iconfont网站下载-->
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>

<i class="iconfont icon-gouwuchekong"></i>

<span class="iconfont icon-richscan_icon"></span>

<span class="iconfont icon-tianmao"></span>

e=1,user-scalable=no" />

```

二十一、字体图标iconfont

<!--引入字体图标-->
<!--从iconfont网站下载-->
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>

<i class="iconfont icon-gouwuchekong"></i>

<span class="iconfont icon-richscan_icon"></span>

<span class="iconfont icon-tianmao"></span>