css htnl笔记

块元素和行内元素

块元素中可以放任何东西（<p>内什么都不能放）

行内元素是不可以使用width和height来设置

我们可以使用display来设置元素显示的类型：

inline表示将元素设置为行内元素

block表示将元素设置为块元素

inline-block（尽量不用）表示将元素设置为行内块元素，可以设置宽高但是不会独占一行

none元素不在页面中显示

visiblity用来设置元素的显示状态

visible默认值，元素在页面中正常显示

hidden元素在页面中隐藏，不显示，但是依旧占据位置

列表

无序列表<ul>

有序列表<ol>

自定义列表<dl>

list-style:设置样式

超链接

<a>是一个行内元素，其中可以嵌套任何元素（除自身）

其中的href属性为跳转路径，如果设置为#，返回顶部。href="#"

如果设置了id属性，那么我们可以在href中设置：#目标元素id值，进行跳转

动href="javascript:;"表示一个空的跳转，也就是什么都不懂

target属性：打开超链接的方式，_self在当前页面打开,_blank新页面打开

音视频

音视频文件引入时，默认情况下不允许用户控制

<audio></audio>替换元素，src，source都是指明地址，source可以指定失败时的文字，可以多版本文件选择，兼容性更好。

表格table

tr表示一行

td表示单元格

td，可以使用vertical-align和text-align修改td中内容的位置

colspan：横向合并单元格，例如

rowspan：纵向合并单元格

表格同样可以分为三个部分：thead，tbody，tfoot

如果表格中没哟砽tbody而是直接使用了tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中

tr不是table的子元素，而是tbody的子元素。

border-spacing：指定边框之间的距离

border-collapse：设置边框的合并

表单form

属性：action：需要提交的地址

input：text文本框，submit提交按钮，password密码框

提交必须要有一个name

单选按钮type=“radio”，必须是相同的name属性，checked默认选中

多选框type=“checkbox”，

下拉选项：select，option

自动补全：autocomplate=“off”

只读数据会提交：readonly 禁止数据不会提交  disabled

自动获取焦点：autofocus

   

选择器：

单个选择器：

元素选择器：直接把元素名写下来即可

id选择器：语法：#id属性值 { }

class选择器：语法：.class属性值{ }，多个class可以使用空格隔开

通配选择器：* { }

复合选择器：

交集选择器：语法：选择器1选择器2选择器3 { }

如果有元素选择器，必须使用其开头

并集选择器：选多个选择器

语法：选择器1，选择器2，选择器3 { }

父子兄弟选择器：

子元素选择器：语法：父元素>子元素

注意只能隔一代，孙子元素不行

后代元素选择器：语法：祖先 （空格）后代

既可以隔一代也可以多代，选择的是全部

兄弟元素选择器

选下一个兄弟 语法：前一个+后一个

选下边所有的兄弟 语法：前一个~后面所有

属性选择器

语法：【属性名】选择含有指定属性的元素

   【属性名=属性值】选择含有指定属性和属性值的元素

   【属性名^=属性值】选择属性值和指定值开头的元素

   【属性名$=属性值】选择属性值和指定值开头的结尾

   【属性名*=属性值】选择属性值中含有指定值的

伪类选择器：

不固定的元素可以使用伪类标签添加样式

开头第一个元素：     ：first-child      例如：ul>li:first-child{}

最后一个元素：         ：last-child

第n个子元素：           ：nth-child(n)   如果写n表示全选，2n表示选中偶数，2n+1为基数

     odd表示奇数，even表示偶数

伪元素选择器：

表示页面中特殊的位置。使用：：例如选择第一个字母：p：：first-letter{}

：：first-letter    第一个字母

：：first-line       第一行

：：selection      表示选中的内容（鼠标选中内容）

：：before          元素的开始

：：after             元素的结束，这两个必须结合content属性使用，并且鼠标无法选中

单位

字体：

px：像素

em：相对于当前字体大小

rem：相对于当前html字体大小

   

content：内容区 ，使用height，width设置长宽

padding：内边距，会影响到盒子大小，背景颜色会延伸到内边距上

border：边框：要设置边框，需要至少设置三个样式

border-width:其中还有border-xxx-width可以设定上下左右，缺省3px

border-color:同上，缺省黑色

border-style:缺省为none

margin：外边距，可以写负值，影响到盒子的实际占地大小

水平方向布局

width,,margin-left,margin-right可以设置为auto，auto的值会自动调整auto使等式成立

如果没有设置auto就自动调整margin-right来使等式满足

如果将一个宽度和一个外面距设置为auto，则宽度会调整到最大

如果三个值都设置为auto，则外边距都是0，宽度最大

如果将两个外边距设置为auto，跨度固定那么居中

垂直方向布局

如果子元素大小超过了父元素，那么子元素会从父元素中移除

我们可以使用overflow属性来设置父元素如何处理溢出的子元素

overflow：visible，缺省，hidden，scroll，auto

同时还有overflow-x,overflow-y

同时这个还可以用来设置BFC

外边距的折叠问题

相邻的垂直方向外边距会发生重叠现象

兄弟元素：兄弟元素之间的响铃外边距会取两者之间绝对值较大的

父子元素：父子之间的相邻外边距，子元素的会传递给父元素（上外边距）

   会影响到布局，需要处理

   

border样式

border：会影响格式

outline：不会影响布局，设置轮廓线

我们可以设置阴影：不会影响布局使用box-shadow

box-shadow：左偏移量 右偏移量 模糊半径 颜色；

我们可以设置圆角，使用border-radius,参数是设置半径大小

同样可以设置椭圆，设置两个参数，第一个为x轴，第二个为y轴

这个时候需要使用/来设置椭圆

设置圆形：border-radius：50%；

浮动

通过浮动可以使一个元素向父元素的左右移动使用float设置

none：缺省，元素不浮动

left：元素向左移动

right：右浮动

这个时候我们的元素已经脱离了文档流，我们之前的等式不需要绝对成立。

浮动元素不会覆盖文字，文字会自动环绕在浮动元素周围，可以用作文字环绕图片的效果 。

元素脱离文档流之后元素的特点会发生变化。

元素脱离文档流之后元素的特点会发生变化。

块元素：

1.块元素不再独占一行

2.脱离文档流之后，块元素的宽高和高度默认都被内容撑开

行内元素：

1.行内元素脱离文档流之后变成块元素，特点同上

高度塌陷：

父元素的高度默认被子元素撑开，当子元素浮动之后，脱离文档流，无法撑起父元素的高度，导致父元素高度丢失。

解决方法（BFC）：Block Formatting Context 块级格式化环境

是css中的一个隐含属性，可以为一个元素开启BFC,开启BFC钙元素会变成一个独立的布局区域。和其他块不同。

我们在box1和box2中设置一个东西撑开接口实现我们想要的效果，这个时候我们需要使用到的就是before伪类选择器，我们display设置为table可以避免出现设置为inline-block（直接当成一个字）时会出现的跳出一段距离的问题。

  

Clear

用过clear属性来去除浮动元素对当前元素的影响，left：清除左边浮动元素对当前元素的一下昂，right：清除右边的影响，both：清除两侧中最大影响的那侧。设置需要清除影响的元素，而不是浮动的元素。

原理：设置清除之后，浏览器会自动为元素设置一个上外边距，一遍其位置不受其他元素影响

定位

是一种更高级的布局方式，可以把元素摆到任意位置，使用position属性来定位

可选值：  static缺省，元素是静止的没有开启定位

relative相对定位

absolute绝对定位

fixed固定定位

sticky粘滞定位

偏移量（只有开启定位了才可以使用偏移量）：

top：定位元素和定位位置上边的距离

bottom：定位元素和定位位置下边的距离

left：定位元素距离定位位置左侧的距离

right：定位元素距离定位位置右侧的距离

相对定位

开启相对定位之后如果不设置偏移量，元素不会发生任何变化。

相对定位是参照于文档流中元素本身的位置，这个操作不会使元素脱离文档流，同样也不会改变元素性质，块开始块，行内还是行内。

相对定位会提升元素的层级

绝对定位

开启绝对定位之后，如果不设置偏移量元素位置不会改变。

元素会从文档流中脱离，绝对定位会改变元素的性质。行内编程块，块的宽高被内容撑开。

绝对定位会提高元素层级。

绝对定位元素是相对于其包含块进行定位的。也就是最近的开启了定位的祖先元素。

水平方向上的布局等式需要添加left和right两个值规则和之前一样。

当出现了过度约束，如果没有auto则自动调整right，如果有auto则自动调整auto元素。left和right默认值是auto。

垂直方向上的布局等式同样要满足。

所以我们可以通过绝对定位设置正中心

  

包含块（containing clock）

正常情况下：就是当前元素的最近的祖先元素，没有脱离文档流的情况下

开启绝对定位情况下：包含块就是离他最近的开启了定位的祖先元素。

html，根元素，初始包含块。

固定定位

也是一种绝对定位。

唯一不同的是，固定定位永远参考与浏览器的视口（不论浏览器是否有滚动都不动）

粘滞定位（兼容性差）

和相对定位特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

字体

color：用来设置字体颜色

font-size：字体大小

font-family：字体族（字体格式）可选值：serif衬线字体 sans-serif非衬线字体 monospace等宽字体

可以指定多个字体，使用逗号隔开，优先前面的字体生效。

文本

text-align：文本的水平对齐

left，right，center，justify两端对齐

vertical-align：文本的垂直对齐

baseline，top，bottom，middle，直接设置值

text-decoration：设置文本修饰

none，underline，line-through，overline

white-space：设置网页如何处理空白

normal，nowrap不换行，pre保留空白，就是保留格式

背景

background-image：url("");

background-repeat：repeat，repeat-x，repeat-y，no-repeat

background-position：top，left，right，bottom，center，需要指定两个值，不然第二个值默认center

同样可以通过偏移量设定背景图片，水平方向，垂直方向

background-clip：border-box：默认值，背景会出现在边框下面

padding-box：背景不会出现在边框，只出现在内容区和内边距

content-box：只出现在内容区

background-origin：边距图片的偏移量计算的原点

padding-box：默认值，background-position从内边距开始计算

ventent-box：背景图片的偏移量从内容区处计算

border-box：偏移量从边框处开始计算

background-size：向这样写可以设置原来尺寸的缩小，如果只写一个，第二个默认值是auto

cover:图片比例不变，将元素铺满

contain：图片比例不变，将图片在元素中完整显示

background-attachment：背景图片是否跟随元素移动

scroll：默认值，背景元素会跟随元素移动

fixed：背景会固定在页面中，将元素在元素中完整显示

background：背景相关的间歇，没有顺序要求，使用/隔开，background-position/background-size

注意，background-origin background-clip，origin要写在clip前面

渐变

渐变是图片，需要通过background-image实现

linear-gradient（）线性渐变，颜色沿着一条直线发生变化

可以指定渐变方向： to left,to right, to bottom,to top

也可以使用度数来渐变：XXXdeg

用圈来渐变：Xturn

渐变如果是定多个颜色，多个颜色默认情况下是平均分布，也可以手动指定渐变情况，数字指的是从哪开始渐变。

repeating-linear-gradient（）平铺的线性渐变，这个时候指定渐变情况表示的是一个渐变的范围

radial-gradient（）径向渐变（放射性效果）

默认情况下，圆心是根据元素形状来计算，同样可以指定径向渐变大小

过渡transition

通过过渡我们可以指定一个属性发生变化时的切换方式。

transition-preperty：指定要执行的过渡的属性，width，height，颜色，all等大部分都支持过渡。只要值可以计算就可以过渡。注意过渡的时候过渡前后的数值必须要有效。

transition-duration：指定过渡效果的持续时间，s，ms。注意可以分别指定时间。

transition-timing-function：过渡的时序函数，也就是动画的过渡方式

ease：缺省，慢速开始，先加速，后减速

linear：匀速运动

ease-in：加速，ease-out：减速

ase-in-out：先加速后减速

cubic-bezier：贝塞尔曲线，参数是两个点坐标，使用工具

steps：分步执行过渡效果，steps（n），表示分n步执行。

end，start表示在某个时间点的开始还是结束启动。

transition-delay：过渡效果的延迟，就是等待一段时间后执行

动画

自动触发动态效果，设置动画效果，必须要设置一个关键帧，关键帧设置了动画的每一个执行步骤。

animation-name：要对当前元素生效的关键帧名字

animation-duration：动画的执行时间

animation-delay：动画延时

animation-iteration-count：动画执行次数。infinite无限执行

animation-direction：指定动画运行的方向

normal：默认从from到to

reverse：从to到from

alternate：从frome到to，重复执行动画时反向

alternate-reverse：和上面相反

animation-play-state：设置动画的执行状态

running：默认值，执行动画

paused：动画暂停

animation--fill-mode动画的填充方式

none：动画播放完毕，回到原来位置

forwards：动画播放完毕，停止在结束位置

backwards：动画延时等待的时候，元素就会处于from的开始位置

both：结合forwards和backwards

弹性盒flex

是css中的另一种布局手段，主要用来替代浮动完成页面的布局

可以使元素具有弹性，让元素随着页面大小改变而改变

弹性容器：

要使用弹性盒，必须要先将一个元素设置为弹性容器

通过display设置

display：flex 设置为块级弹性容器

display：inline-flex 设置为行内弹性容器

弹性容器样式：

flex-direction：指定容器中弹性元素的排列方式

row：缺省，水平排列，同时确定主轴方向，自左向右

row-reverse：反向排列，同时确定主轴方向， 自右向左

column：纵向排列，同时确定主轴方向，自上向下

column-reverse：反向纵向排列，同时确定主轴方向，自下向上

主轴：弹性元素的排列方向成为主轴

侧轴：和主轴垂直方向的成为

flex-wrap：设置弹性元素是否在弹性容器中自动换行

nowrap：缺省，不会自动换行

wrap：沿着侧轴自动换行

wrap-reverse：元素沿着侧轴反向换行

flex-flow：是flex-direction和flex-wrap的简写属性

justify-content：如何分配主轴上的空白空间，就是主轴上的元素如何排列。

flex-start：元素沿着主轴起边排列

flex-end：元素沿着主轴终边排列

center：居中

space-around：空白分布在所有元素的两侧

space-between：空白均匀分布到元素间

space-evenly：空白分布到元素的单侧

元素双方向居中

align-items：元素在侧轴上如何对齐

stretch：缺省，将元素长度设置为相同值。指的是同一行的元素长度相同，如果是不同行会有不同

flex-start：元素不会拉伸，而是侧轴起边对齐

flex-end：沿着福州的终边对齐

center：居中对齐

align-centent：侧轴空白空间分布

center：空白在两边

flex-start：空白在下边

flex-end：空白在上边

space-around：元素两边都有空白

space-between：空白在中间

align-self：用来覆盖当前弹性元素上的align-items

媒体查询

媒体查询语法：@media 查询规则{}

all：所有设备

print：打印设备

screen：带屏幕设备

speech：屏幕阅读器

only：唯一作用就是兼容老版本浏览器

媒体特性：

width：视口宽度

height：视口高度

min-width：视口的最小宽度，大于这个宽度生效

max-width：视口的最大宽度，小于这个宽度生效

如下例子：在宽度500的时候这样配置