web笔记3,4

字体样式

font-size--------字体大小-----默认16px

font-family:"宋体"-------字体

font-weight：数字/bold----------字体粗细--------400是正常大小-----bold是直接加粗

font-style------字体显示的样子-------默认为normal------italic为倾斜

font：intalic 400 20px "宋体"-------一起设置（style weight size family)-------自豪和字体必须同时存在------不推荐

css层叠性-------属性名相同时，后边的样式会将前面的样式覆盖掉

文本样式

<style>p{text-indent:32px;-------两字符------当放大字体时会出问题

Text-indent:2em-------不出问题

</style>

文本对齐方式

text-align：center--------居中对齐-----居中的时内容不是元素

文本修饰

text-decoration：none；---------去下划线----------a链接自代下划线，需要去掉

text-decoration：overline;---------加上划线

text-decoration：underline------默认下划线

text-decoration：line-through------------字的中间加一条横线

text-transform：uppercase---------字母转大写

text-transform：lowercase--------字母转小写

行高

line-height--------单行文本借助行高y方向平分设置居中，水平text-align：center

文本溢出

文字溢出背景色用overflow:auto/scroll(有拉条）

  overflow:hidden-------将溢出部分隐藏掉

背景相关

baxkground-image;url(./背景)

baxkground-repeat：no-repeat-----去除重复

baxkground-attachment：fixed--------向下滑不动

baxkground-position:right bottom---------将背景图片定位

baxkground：pink url() no-repeat------即可以用复合属性

列表样式

Li{list-style:none;------去除默认样式

list-style:circle--------空心

list-style:disc --------默认

List-style:decimal------设置为数字}

元素显示

Display:bolck----------块元素显示的样式--------有宽高不在同一行

Display:inline-block-------又有宽高又在同一行-----转化为行内块设置宽高

轮廓线

Input{outline-style：none----去除点击之后的轮廓线

outline-style：dotted----------点状轮廓

outline-style：double----------双划线轮廓

outline-color:颜色---------设置轮廓线的颜色

outline-width:80px---------轮廓线的粗细

有符合属性

边框

Border-width：8px------设置边框粗细

Border-style:solid------实线边框

Border-top/bottom-right/left-radius:30px/%--------设置边框转角的弧度大小

合并相邻边框

border-collapse

颜色

Color:  ;r

Color:rgb(55,23,34)----范围0-255

color：rgba( rgb(55,23,34) rgb(55,23,34) rgb(55,23,34) 0.4)------0.4时设置透明度的，范围0-1

隐藏方式(内容还在）

opacity：0-1-----1和0设置元素显示或隐藏-----保留原来位置

Display:none--------不保留原来位置

visibility：hidden-----------保留原来位置

鼠标样式以及防拖拽

<textarea cols="30" rows="10"></textarea>--可拖拽头部

加上resize:none则不能拖拽了

框外是箭头，框内变小手cursor:pointer

绝对定位

子-----绝对路径

夫------相对路径----子绝父相

position：absolute--------绝对定位------会放弃原来的位置

position：relation-------绝对路径

逐级查找父级元素是否有相对路径，如果有，以父亲为定位参考，如果没有，继续向上查找

相对定位和绝对定位在一起不影响

区域1与区域2部分重合时，如果重合的那部分是区域1把区域2覆盖了可以通过z-index：2改为区域2将区域1覆盖--------z-index即显示优先级

固定定位

position：fixed---不随页面的变化而变化-------相对与可是窗口定位，放弃原来的位置

黏性定位

position：sticky

盒子模型

content内容区+padding(内边距）+border（边框）-----影响盒子大小      margin（外边距）--------不影响盒子大小

内边距

padding-top/left:20px-----------文字距边框的距离n

padding：20px------上下左右都是20px

padding；10px 50px----------上下10px,左右50px

padding；10px 50px 40px------上10px,左右50px,下40px

Padding:10px 20px 30px 40px-------上右下左

margin用法和padding一样

Margin:0 auto-------实现元素的水平居中

父盒子里，第一个子盒子的margin-top值会被父盒子抢掉

1、给父元素加边框------border:1px solid pink

2、给父元素加内边距

3、隐藏

避免padding将盒子撑大

box-sizing：border-box

flex布局

Display:flex-------在父元素中加，子元素成一排显示

Flex-direction:row-reverse------从后往前排列

Flex-direction:column----从上往下排列

Flex-direction:column-reverse------排列顺序交换

justify-content：Space-between--------两边贴紧边框，中间平分

justify-content：Space-around--------平分在子项两边

justify-content：space-evenly-------平分所有

justify-content：center------放在中间

Align-item:center---------侧轴单行------位于父级中部-------默认单行排列，如果元素太多则挤在一起

flex-wrap:wrap-------一行排不下，则换行继续排列

Align-content:center--------设置多行的对齐方式

Align-content:Space-between

Align-content:Space-aroud

Align-content:space-evenly

.box div:nth-of-type(3){order:-1;}-------将盒子3往前移动2个单位-----默认为0

去除标签默认外/内边距

Margin:0;

padding：0

设置字体

@font-face{

Font-famliy:名字；

Src:url(./字体文件）；}

Div{

Font-family:名字；}

渐变

Background-color:linear-gradient(to right,颜色 颜色 颜色 颜色……）------渐变

Background-color:linear-gradient(颜色 颜色 颜色 颜色……）

css继承性

会继承------字体属性、文本属性、文字颜色

不会继承------边框、背景、内外边距、宽高

Body---<div class="father">father<div>son></div></div>

Head----.father{color:pink;}----------把父亲的字体颜色设为粉色，儿子的颜色也变为粉色

布局练习

浮动---------解决文字环绕图片问题

float:left/right

浮动后的影响：

1、高度塌陷（脱离文档流）

父亲的兄弟顶上去

2、子元素有浮动，其后边兄弟有影响，对其前边的兄弟没有影响

Clear:both----清除浮动

Grid-template-columns:repeat(列数，列宽）

Grid-template-rows:repeat(行数，行宽）

grid-row：1/2-----从第一条线到第二条线-----4行有五条线

grid-columns：1/3

css动画2d变化

transform：translateX(200px)-----X轴移动200px

transform：translateY(200px)-----Y轴移动200px----单独写会覆盖

transform：translateX(200px) translateY(200px)-----X轴Y轴同时移动--------有复合属性-------translate(200px 200px)

transform：rotateZ(200deg)-------平面

transform：rotateX(200deg)

transform：rotateY(200deg)-------空间旋转200度-----3d-------按中间那条线旋转

transform-origin:top left---------设置为按左上那一点旋转------对移动无影响，对旋转和缩放有影响

Transform:scaleX(1.5)  scaleY(2)----------缩放

旋转后XY轴也要旋转

3d转换

transform：translateZ(200px)-------朝Z轴方向平移200px--------看不出有什么变化，要加上transform-style:preserve-3d----开启3d空间-----perspective:220px-----改变视觉效果

过度----transition-property:width;

Transition-duration:5s----------两个结合后像进度条，即看宽度变为设置的宽度的过程

Transition：all 5s steps(12)--------复合----steps(12表示逐帧-帧越大越丝滑