标签选择器
<code>p{}</code>
类选择器
<code>.class1{}</code>
id选择器
<code>#class1{}</code>
通配符 *
后代选择器 匹配标签下所有元素//
<code>ul li a{}</code>
<code>.className li a{}</code>
子元素选择器 仅匹配子元素/
<code>.className > a{}</code>
并集选择器|
<code>div,ul {}</code>
伪类选择器
链接伪类选择器
<code>a:link /*选择所有未被访问过的链接*/</code>
<code>a:visited /*选择所有已被访问过的链接*/</code>
<code>a:hover /*选择鼠标悬停的链接*/</code>
<code><!-- - .classA:hover .classB {}//鼠标经过classA时，对classB操作 --></code>
<code>a:active /*选择活动链接(鼠标按下未弹起的链接)*/</code>
focus 伪类选择器 选取获得焦点（光标）的表单元素
一般情况 <code><input></code> 类表单元素才能获取，因此这个选择器主要针对表单元素
<code>input: focus{}</code>
font-style//字体样式（italic斜体,normal正常）
font-weight//字体粗细（700加粗，400正常）
font-size/line-height//字体大小（px）// 12px/1.5（1.5：行高为当前文字大小1.5倍）
font-family//字体系列，取首位有效字体
字体复合属性顺序， font-style font-weight 可省略
body{
font: font-style font-weight font-size/line-height font-family
}
color red/ #FFFFFF// rgb(0,0,0)
text-align 文本对齐
left(默认)
right
center
text-decoration 下划线
underline
line-through
overline
none
text-indent 缩进
text-indent: 3em;//3个当前文字距离
text-indent: 30px;
line-height 行间距
line-height: 25px
垂直居中：行高==盒高//c3盒子模型内容高度为减去边框padding后的内容height
css 引入
内部样式表
行内样式表
<code><p style = "color: red;">风雨过后</p></code>
外部样式表
<code><link rel="stylesheet" href="style.css"></code>
padding 属性是以下各内边距属性的简写属性：
padding-top
padding-right
padding-bottom
padding-left
块元素
<code><h1>-<h5> <p> <div> <ul> <li>等</code>
可以控制宽度高度内边距
宽度默认是父级宽度100%
独占一行
容器
文字类元素内不能使用块级元素<code><p> <h1>-<h6></code>
行内元素
<code><a> <span> <em> <b></code>
一行可以显示多个行内元素
高宽度设置无效
默认宽度是它本身的宽度
行内元素只能容纳文本或其他行内元素
链接内不能放标签
特殊情况<code><a></code>里面可以放块级元素，//<code><a></code> 转换块级模式
行内块元素
<code><img> <input> <td></code>
和相邻行内元素（行内块）在一行上，但是他们之间会有空白间隙，一行可以显示多个
默认宽度就是它本身内容的宽度
高度行高外边距可控制
元素显示模式转换
行内元素a转换为块级元素
<code>a{height: 10px; display: block;} //设置点击区域</code>
转换为行内元素（不能设置宽高）
<code>display: inline</code>
转换为行内块
<code>display: inline-block</code>
背景颜色
<code>background-color :transparent; //默认透明</code>
背景图片
<code>background-image: (url)</code>
默认水平和垂直方向平铺
<code>background-repeat: repeat | no-repeat | repeat-x | repeat-y</code>
位置
<code>background-position: x y;background-position: left top;</code>
<code>background-position: top|center|bottom|left|center|right</code>
使用方位名词与顺序无关,省略时居中
是否滚动
<code>background-attachment: fixed|scroll...</code>
复合属性 background :颜色 地址 平铺 滚动 位置
<code>background: transparent url(x.png) no-repeat fixed top</code>
背景色半透明
<code>background: rgba(0,0,0,0.3)//a 不透明度 仅背景颜色</code>
<code>background: rgba(0, 0, 0, 0.6) url(./pic/bgi.png) no-repeat fixed top;</code>
<code>opacity: 0.3;//所有子元素继承相同透明度</code>
层叠性 //就近
继承性 //子继承父
优先级
继承或* < 元素选择器< 类选择器 < id选择器 < 行内style < important // color: xxx!important 权重((0,0,0,0) (0,0,0,1) 0010,0100,1000,无穷大)
权重的叠加,不进位
继承：0
不继承:
-li: .nav li(10+1=0011)
<code>border边框 (border/border-top/border-left...)</code>
<code>border-width//边框的粗细px</code>
<code>border-style//边框样式//实线 solid 虚线dashed 点线dotted...</code>
<code>boeder-color</code>
<code>border-collapse//表格细线边框</code>
<code>border 复合写法 border: 1px solid transparent</code>
<code>边框影响盒子大小（边框width独立于盒子宽高）</code>
<code>border-radius: 5px;</code>
-<code>border-radius: 50%;//长度50%</code>
<code>border-radius: 10px 20px 30px 40px;//左上-顺时针</code>
<code>border-top-left-radius: 10px;//左上</code>
content 内容px
padding 内边距
边框与内容之间的距离
复合写法
一个值:padding: 2px;上下左右
两个值:padding: 2px 5px;上下2，左右5
三个值:padding: 1px 2px 3px;上1 左右2 下3
四个值padding:1px 2px 3px 4px;上1 右2 下3 左4 (顺时针)
影响盒子大小
<code>盒子本身没有指定width/height属性，则此时padding不会撑开盒子宽/高</code>
marjin 外边距 盒子之间距离
marjin-botton/top/
复合同padding
水平居中块级盒子
盒子必须指定宽度
左右外边距设置为auto
<code>marjin-left: auto;marjin-right: auto;</code>
<code>marjin: 0 auto</code>
水平居中行内元素
父元素添加 text-aline: center
水平居中行内块元素
外边距合并-嵌套块元素塌陷
清除内外边距
行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距(可以转换成行内块元素 display:inline-block)
阴影
box-shadow: h-shadow v-shadow blur spread color inset;
水平位置 允许负值
垂直位置的阴影
(可选)模糊距离//虚实
(可选)尺寸
(可选)颜色
(可选)将外阴影(outset)改为内阴影inset
文字阴影 text-shadow: 1px 1px rgba()
多个块级元素纵向排列-标准流
多个块级元素横向排列-浮动（ - 行内块空隙）
块级，行内元素
浮动元素会脱离标准流(脱标)
不保留原先的位置，（浮动图层）
浮动元素会一行内显示并且元素顶部对齐
浮动元素会具有行内块元素的特性
行内元素/块元素添加浮动->行内块元素(width,height)
与标准流父级一起使用；一浮全浮
浮动只影响后面的标准流，不影响前面的标准流
元素浮动，后面的标准流占据浮动元素（重叠），
不影响浮动元素前面的标准流（浮动元素前面的标准流独占一行，浮动元素另起一行，上限为标准流底部）
清除浮动
清除浮动元素脱离标准流造成的影响
闭合浮动 只让浮动在父盒子内部影响不影响父盒子外面的其他盒子
父级盒子不方便给高度，浮动盒子不占有位置，导致父级盒子高度为0
额外标签法（隔墙法）
在浮动元素末尾添加一个空的块级标签
div{clear: both;}
父级元素添加overflow: //hidden
:after伪元素 父级添加clearfix类
双伪元素
静态定位 static
相对定位 relative
相对原来的位置
不脱标，保留原来位置
宽度默认变为100%
绝对定位 absolute
没有父元素或父元素未定位，以浏览器为基准(Document)
父元素有定位（相对，绝对，固定定位），则以最近一级有定位的父元素为参看点(子绝父相)
脱标，不占有位置
水平/垂直居中
left: 0%
margin-left: -1/2width px;
宽度默认变为0
固定定位 fixed
固定于浏览器可视区的位置（浏览器页面滚动时元素位置不会改变）
不占有原来位置
粘性定位 sticky
以浏览器可视窗口为参照点（fixed）
占有原先的位置（relative）
必须添加top/left/right/bottom之一才有效
不兼容ie
定位叠放次序 z-index
只有定位的盒子有z-index
数值越大越靠上
z-index: 1;
定位特殊特性
行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
块级元素添加绝对定位或固定定位，如果不给高度或宽度，默认大小是内容的大小
浮动元素只会压住下面标准流的盒子，不会压住文字或图片（文字环绕）
绝对定位或固定定位会压住所有内容
display
display: none;//隐藏，位置不保留
display: block;//显示/块
visibility
visibility: visible;
visibility: hidden;//隐藏后继续保留原来位置
overflow
溢出
visible(默认)
hidden
scroll//显示滚动条（溢出and不溢出）
auto//溢出显示滚动条
可能隐藏有溢出的定位元素
精灵图
将多个小背景图整合到一个大图片 减少请求次数
background-img
background-position:x y;//左上移动为负
background: url() no-repeat -1px -2px;
将盒子width height 设为零
width: 0;
height: 0;
cursor: default//pointer/move/text/not-allowed
表单边框(input textarea..)
outline // 取消外边框 outline: none;
防止文本域移动
resize: none
vertical-align 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片
：
行内元素 行内块元素
<./p/Snipaste_2021-08-19_08-24-45.png>
由于图片默认(行内块元素)与文字基线对齐(base-line)
产生 图片底侧空白缝隙
1.更改vertical-align: bottom...
display: block
单行文本溢出省略号显示
条件:
强制一行内显示文本
white-space: nowrap (默认normal 自动换行)
超出部分隐藏
overflow: hidden
文字用省略号代替超出的部分
text-overflow: ellipsis
多行文本溢出省略号显示(控制盒子大小)
有较大兼容性问题，适合webKit浏览器或移动端
word-break: break-all;单词所有单词碰到边界一律拆分换行
使浮动盒子边框重叠
显示被覆盖的盒子边框-提高层级
无定位
鼠标经过增加position: relative;
有定位
z-index
浮动元素不会压住文字
块中 行内元素，行内块元素与其内容水平居中
<code><video></code>
常见属性
autoplay: autoplay;//视频就绪自动播放(谷歌浏览器需用muted解决自动播放问题)
<code><video src="#" muted></video></code>
...https://www.runoob.com/tags/tag-video.html
audio
autoplay 谷歌浏览器禁用
...https://www.runoob.com/tags/tag-audio.html
input类型
type: search 限制输入内容
....https://www.runoob.com/tags/att-input-type.html
新增表单属性
required=required // 表单拥有该属性表示其内容不能为空
placeholder = 提示文本//表单的提示信息,存在默认值将不再显示
autofocus = autofocus//自动聚焦属性,页面加载完成自动聚焦到指定表单
autocomplete
multiple= multiple //可以多选文件提交
input[value]//只选择有value的input//权重11
input[type=text]//只选择type=text的input
input[type^=val]//以val开头
input[type$=val]//以val结尾
input[type*=val]//含有val
E:first-child//匹配父元素中的第一个子元素E
E:last-child//匹配父元素中的最后一个E元素
E:nth-child(n)//匹配父元素中第n个子元素E
根据: 前面的空格位置判断父元素
ul :first-child//ul中第一个子元素
ul li:first-child//ul中第一个li元素
lu li :first-child//ul中li的第一个子元素
nth-child(even)//第偶数个
nth-child(odd)//奇数
nth-child(n)//n=0,1,2....第0个和超出的被忽略
2n
2n+1
5n [5,10,15...]
n+5 [5,]
-n+5 [1,..5]
section div:nth-child(1)
section 第一个子元素需要为div
nth-child 会把所有的盒子排列序号
执行时先看 :nth-child(1) 之后回去看前面div //是否匹配//选择//忽略
nth-of-type
section div:nth-of-type(1)
会把指定的盒子排序
执行时先看 div指定的元素 之后回去看 :nth-of-type(1)
利用CSS创建新标签元素
选择符：
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
box-sizing: content-box 盒子大小为width+padding+border(默认)
box-sizing: border-box 盒子大小为width// padding和border不会撑大盒子（前提是padding border不超过width）//IE怪异盒模型
filter: blur(5px);//blur模糊处理 数值越大 越模糊
width: clac(100% - 30px);
transition: 要过度的属性 花费时间 (运动曲线) (何时开始) //谁做过渡给谁加
transition: width 1s
transition: width 1s, height 1s;
transition: all 0.5s//所有元素
本文来自博客园，作者：w0000，转载请注明原文链接：https://www.cnblogs.com/w0000/p/15141190.html
![html+css像素块图片（游戏手柄）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)