css写法
css语法规则：css写在<style></style>标签里，<style>标签一般在<head></head>里，<title></title>标签下面。
css引入方式
内嵌式： css写在<style></style>标签里
外联式： css写在一个单独的 .css文件中（可以用 link 引入html中）
行内样式： 可以在标签里加入 style="css"
基础选择器
1，标签选择器，也可以叫做元素选择器（以标签名命名的选择器，选中所有同名标签）
2，类选择器 （在标签里加入 class="自定义类名"） .自定义类名:{}
3，id选择器（一个标签上只能有一个id属性值，id="自定义名"） #自定义名:{}
4，通配符选择器（给页面中所有元素都添加css样式） *{}
文字样式
font-weight:400px; （正常粗细）
font-weight:normal; （正常粗细）
font-weight:bold; （加粗）
font-weight:700px; （数字加粗）
font-style:italic （倾斜状态）
font-family: （字体样式）
font-size:1px; （字体大小）
css的单位
px 是固定单位，像素
em 是相对单位,相当于当前文字的大小,如果没有就找父元素
rem 也是相对单位,相对于html的fontsize的大小
文本对齐方式
text-indent （文本缩进）
text-align:left; （左对齐）
text-align:center; （居中对齐）
text-align:right; （右对齐）
文本修饰线
text-decoration:underline; （下划线）
text-decoration:line-through; （删除线）
text-decoration:overline; （上划线）
text-decoration:none; （无装饰线）
line-height:10px; （行高，单位px）
line-height:10px; （垂直居中，设置自身高度=行高，文字只有一行生效）
css选择器
后代选择器：空格隔开
子代选择器：>
并集选择器：使用逗号隔开，作用是选择多组标签，设置相同的样式
交集选择器：选择器1紧挨着选择器2
伪类选择器： :hover 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停
css选择器优先级，不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的样式
!important > 行内样式 > id选择器 > 类/属性/伪类选择器 > 伪元素/标签选择器 > 通配符* > 继承
背景-背景图位置
background-image （背景图）
background-repeat （水平垂直平铺）
no-repeat （不平铺）
repeat-x （沿着水平方向平铺）
repeat-y （沿着垂直方向平铺）
属性名： background-position（bgp）
属性值： background-position：水平方向位置+空格+垂直方向位置；
取值为正数：向右或者向下移动，负数则向左向上移动
元素显示模式
块级元素
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的100%宽度，高度和宽度都可以设置
代表标签：div \ p \ h1-h6 \ ul \ li \ dl \ dt \ dd等
行内元素
1.一行可以显示多个
2.宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：
a、span 、b 、u、i、s、strong、ins、em、del....
行内块元素
1.一行可以显示多个
2.可以设置宽高
代表标签：
input、textarea、button、select........
特殊情况：img标签有行内块元素特点，但是chrome调试工具中显示结果是inline。
显示模式-转换
目的：改变元素默认的显示特点，让元素符合布局要求！
语法：
display：block 转换成块级元素（较多）
display：inline-block 转换成行内块元素（较多）
display：inline 转换成行内元素（较少）
标签嵌套的原则与生活类似，以大标签来套小标签
css特性
1.继承性
特性：子元素有默认继承父元素样式的特点
可以继承的常见属性:
文字控制属性都可以继承
height:100%;
width:100%;
2.层叠性
特性：
1.给同一个标签设置不同的样式→此时样式会层叠叠加→会共同作用在标签上
2.给同一个标签设置相同的样式→此时样式会层叠覆盖→最终写在最后的样式会生效
注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果,
盒子模型
css中盒子由：content（内容区） padding（内边距） border（边框区） margin（外边距区）
border线类型：solid（实心线）dashed（虚线） dotted（点线）
border-left,border-right,border-top,border-bottom,（给盒子的边单独设置）
盒子模型-内减方法，内边距和外边距一样
解决方法1：手动减去撑大内容像素
解决方法2：给盒子设置属性box-sizing：border-box；即可
浏览器会自动计算多余大小，自动在内容中减去
清除默认样式
*{
margin：0；
padding：0；
}
版心居中
margin：0 auto；（自动水平居中）
写css的技巧
1.找它 ：选择器
2.摆它 ：盒子模型，宽度，高度，背景色；
3.改它：调位置，文字样式。
ul属性去掉列表的原点代码是：list-style：none；
外边距合并
垂直布局的块级元素，上下的margin（外边距）会合并。
最终两者距离为margin的最大值边距。
解决方法：（只给其中一个盒子设置margin即可）
外边距-塌陷现象
互相嵌套的块级元素，子元素的margin-top会作用在父元素上
解决方法：
1.给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
2.给父元素设置overflow：hidden ※
3.转换成行内块元素（display：inline-block；）
4.设置浮动
伪类选择器
E:first-child { } (匹配父元素中第一个子元素，并且是E元素)
E:last-child { } (匹配父元素中最后一个元素，并且是E元素)
E:nth-child（n） { } (匹配父元素中第n个子元素，并且是E元素)
E:nth-last-child（n） { } (匹配父元素中倒数第n个子元素元素，并且是E元素)
：nth-child（N）公式写法中，N的值从0开始
奇数、偶数、5的倍数对应的公式（n为）
1，奇数：2n+1或者2n-1
2，偶数：2n \ even
3，5的倍数：5n
伪元素
::before 在父元素内容的最前面加一个伪元素
::after 在父元素内容的最后添加一个伪元素
浮动
float：left；（最左边浮动）float：right；（最右边浮动）
浮动-特点（浮动的标签是顶对齐）浮动后的标签具备行内块儿特点
1.浮动元素会脱离标准流，在标准流中不占位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高
注意：浮动的元素不能通过text-align：center；或者margin：0 auto； 居中
overflow:hidden; 属性添加给浮动的父元素
定位
定位的使用步骤，先设置定位方式
属性名：position
static（静态定位 ） （不定位）
relative（相对定位）
1.占有原来的位置
2.仍然具备标签原有的显示模式特点
3.改变位置参照自己原来的位置
4.如果left和right都有，以left为准；top和bottom都有，以top为准
absolute（绝对定位）
1.先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位。
2.如果有父级，但是父级没有定位，以浏览器窗口为参照进行定位
3.脱标 不占位
4.改变标签的显示模式特点：具备了行内块儿特点（在一行共存，宽高生效）
fixed（固定定位）
1.脱标，不占位置
2.改变位置参考浏览器窗口
3.具备行内块特点
定位-子绝父相
1.父级相对定位；子级绝对定位-- 子绝父相
2.绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器为参考
定位-居中
1.绝对定位的盒子不能使用左右margin：0 auto居中
2.如果是水平居中 left：50%，整个盒子移动到浏览器中间偏右的位置，取值为margin为宽度的负一半宽度就可以中心水平居中，垂直也是同理
位移居中
第一个百分之50是水平，第二个是垂直
transform：translate（-50%，-50%）
位移：自己宽度高度的一半，如果写了定位，会转换为行内块元素，具有宽高生效，一行显示，如果不加宽度，宽度就是内容的大小，所以宽度一定要加，与父级的宽度一样，width：父级的宽度，或者width：100%
定位-显示层级
1.在默认情况下，定位的盒子，后来者居上
2.z-index:整数；取值越大，显示顺序越考上，z-index的默认值是0
3.2. 注意：z-index必须配合定位来使用
光标类型，属性名：cursor
设置鼠标光标在元素上显示的样式
default （默认值，通常是箭头）
pointer （小手效果，提示用户可以点击）
text （工字型，提示用户可以选择文字）
move （十字光标，提示用户可以移动）
装饰-圆角
border-radius:10px/10%
四个值：左上 右上 右下 左下 --从左上顺时针转一圈
取盒子尺寸的一半为圆形
圆角形式：border-radius: 50%;
设置一个长方形 ，border-radius：盒子取高度的一半为胶囊样式
溢出显示效果-overflow（超出父级的内容）
属性名：overflow
visible（默认值，溢出部分可见）
hidden（溢出部分隐藏）
scroll（无论是否溢出，都显示滚动条）
auto（根据是否溢出，自动显示或隐藏滚动条）
显示隐藏-基本使用（标签的隐藏）
占为隐藏：visibility：hidden；
不占位隐藏：display：none
盒子阴影
属性名：box-shadow
过渡
让元素的样式慢慢的变化，配合hover使用，增强网页交互体验
属性名：transition
谁变化谁加过渡属性
如果变化属性多，直接写all，表示所有
标签：
1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签
溢出显示效果，属性名：overflow（超出父级的内容）
visible （默认值，溢出部分可见）
hidden （溢出部分隐藏）
scroll （无论是否溢出，都显示滚动条）
auto （根据是否溢出，自动显示或隐藏滚动条）
显示隐藏-基本使用（标签的隐藏）
占为隐藏：visibility：hidden；
不占位隐藏：display：none
盒子阴影，属性名：box-shadow
背景颜色设置
渐变背景
background-image：linear-gradient（颜色）
透明度
background:transparent （背景完全透明，不能设置透明度）
background:rgba(0,0,0,0) （让背景出现透明效果，但上面的文字不透明，可以调整透明度）
opacity: 0; 指定不透明度，从0.0（完全透明）到1.0（完全不透明）
该属性具有继承性，会使容器中的所有元素都具有透明度
平面转换（transform）
位移（translate) ，translateX() translateY()，向下是正数，默认值是 0px
旋转（rotate) ，旋转一半（180deg）
缩放（scale) 也是x和y
过渡，属性名：transition transition:1s （动作的执行时间）
:hover（鼠标悬停触发）
让元素的样式慢慢的变化，配合hover使用，增强网页交互体验谁变化谁加过渡属性，
如果变化属性多，直接写all，表示所有
多重转换：旋转放到最后，旋转会改变坐标轴的轴向
透视效果：perspective: 1000px; （取值范围800px-1200px）这个加到父元素上
transform: translateZ(400px);
flex弹性盒子布局
解决元素居中问题，自动弹性伸缩，合适适配不同大小的屏幕，和移动端。
1. flex-direction （主轴方向）
row（默认值）： 主轴为水平方向，起点在左端。
row-reverse： 主轴为水平方向，起点在右端。
column： 主轴为垂直方向，起点在上沿。
column-reverse： 主轴为垂直方向，起点在下沿。
2. flex-wrap （主轴一行满了换行）
nowrap (默认值) 不换行压缩宽度
wrap 换行
wrap-reverses 反向换行
3. flex-flow （1和2的组合）
4. justify-content （主轴元素对齐方式）
flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end 靠着main-end对齐//参考常见术语(一般是右方向)
center 靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly 平均对齐，不靠着容器壁，剩余空间平分
5. align-items （交叉轴元素对齐方式//单行）
flex-start： 交叉轴的起点对齐。
flex-end： 交叉轴的终点对齐。
center： 交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch： （默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
6. align-content （交叉轴行对齐方式//多行）
flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch (每一行)伸缩，占满整个高度
1338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
