<span></span>--标注文本
<style>*{***** !important; }</style>---选择器属性优先
<link rel="stylesheet" href="">--要导入的样式表css
*{margin:0; padding:0; }---清除网页边框
border-radius:30px;--圆角边框
opacity:0.5;--设置一个div元素的透明度级别
.**:hover{}---鼠标悬浮变化
::after---添加子元素
opacity:0.5---透明度（可设置透明框）
align-items:centen--行居中
去掉width，height。用padding挤空间，文字自动居中
position: sticky;----粘性定位
top: 0;------定位与顶部距离为0
ulcss: list-style:none;----ul排序去圆点
animation-iteration-count:infinite;--无限循环
outline-style: none;---去掉 搜索框点击时边框
<input type="file">----添加文件
overflow:hidden;只显示当前元素
动画无限跑-- infinite
匀速跑--linear
cursor: url(**/**.***),auto;
--鼠标光标替换成url(**/**.***)图片，写在想引用的元素css上
overflow: hidden;-----只显示该元素DIV
transition-duration: 1s;-----hover运动时间
------------------------------------------------------------------------
color 设置文本颜色
letter-spacing 设置字符间距
word-spacing 设置字间距
line-height 设置行高
text-align 对齐元素中的文本
direction 指定文本方向/书写方向
ltr （默认）从左到右
rtl 从右到左
text-align 对齐方式
center 居中
left 居左
right 居右
justify 每一行被展开为宽度相等，左，右外边距是对齐
--------------------------------------------------------
text-decoration 向文本添加修饰
text-decoration-line: line-through;/*设置修饰线的位置*/
overline;------上划线
line-through;-中划线
underline;----下划线
text-decoration-color: red;/*设置修饰线的颜色*/
text-decoration-style: dotted;/*设置修饰线的样式*/
solid;--直线
wavy;--波浪线
double;-双横线
---------------------------------------------------------
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
------------------------------------------------------
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-weight 指定字体的粗细。
------------------------------------------------------
border-style 定义边框的样式
-top------上
-left------左
-right----右
-bottom-下
border:**px---边框宽度
-solid **-----边框颜色
-top:**px-----顶部边框
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
-------------------------------------------------------------------------
（详细可在html查看）
无序列表 ul - 列表项标记用特殊图形
<ul>
<li></li>
</ul>
有序列表 ol - 列表项的标记有数字或字母
<ol>
<li></li>
</ol>
----------------------------------------------------
盒子模型：
外边距：margin -- 指元素与其上下左右相邻元素间的间距
margin-top：盒子向上(-)下(+)移动
margin-left
margin-right
margin-bottom
margin：0px auto--边框为0,盒子居中
margin: a b c d -- 分别设置元素的上右下左的外边距
margin: a b -- 分别设置元素的上下 和 左右的外边距
margin: a -- 同时设置元素的上下左中的外边距
内边距：padding -- 指元素与其包含的子元素之间的间距
padding-top------上
padding-left------左
padding-right----右
padding-bottom-下
padding:a b c d
padding:a b
padding:a
注意：元素是通过扩展自己的宽度与高度从而来达到内边距的距离
元素的占位宽度 =
元素自己的宽度+padding-left + padding-right + border-left + border-right
元素的占位高度 =
元素自己的高度 + padding-top + padding-bottom + border-top + border-bottom
----------------------------------------------------------------------
元素浮动：
float: left（左） right (右) none(默认)
float-指定一个盒子（元素）是否应该浮动。
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。
margin在使用时注意的问题：
1.如果子元素需要参照父元素的顶部设置margin-top,
那么父元素必须拥有border-top或至少1px的padding-top
解决父元素或兄弟元素因为子元素浮动产生的影响：
1.主动设置父元素的高度
2.在父元素中设置overflow:hidden
3.为兄弟元素加上clear:both left right
--------------------------------------------------------------
overflow:*---
(如果元素中的内容超出了给定的宽度和高度属性
，overflow 属性可以确定是否显示滚动条等行为)
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值。
-----------------------------------------------------------------------
背景图片
background-image:url(路径)
background-attachment
background-position:设置背景图片的位置
1.单词定位 ：
1.1 只有一个方向的单词，另一个方向默认居中
1.2 设置两个方向的单词，根据结合的方位进行定位
2.数值定位 :
分别设置元素的横向和纵向的具体数据定位
------------------------------------------------------------------------
background-color-指定要使用的背景颜色
background-position-指定背景图像的位置
background-size-指定背景图片的大小
background-origin-指定背景图像的定位区域
background-clip-指定背景图像的绘画区域
background-attachment-设置背景图像是否固定或者随着页面的其余部分滚动。
background-image -指定要使用的一个或多个背景图像
background-repeat:设置背景图片的重复方式
background-size：设置背景图片在元素中的大小
cover:通过放大图片使图片平铺满整个元素，可能导致图片显示不完整
contain:通过放大图片使图片满足较小边的平铺，可以保证图片完整
Xpx:使背景图片按具体像素值显示
百分比：以元素为基础，设置图片占元素的百分之多少
-------------------------------------------------------------------------------------
背景颜色
颜色取值方式：1.单词 2.#fff 3.rgb(0-255,0-255,0-255)
设置元素透明度：
1.rgba(,,,0-1设置元素背景色透明度) -- 只能针对背景颜色进行透明度设置，不影响元素中的内容
2.opacity:0-1 -- 针对整个元素的透明度进行设置
-------------------------------------------------------------------------------------
background-repeat-:-设置背景图片的重复方式
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat 图片不会重复
inherit 设置重复方式从父元素继承
background-image：url(文件夹名/文件名) --加入图片
定位----------
background-position:--图片定位操作
static--默认值，即没有定位，遵循正常的文档流对象。
fixed--相对于浏览器窗口是固定位置,即使窗口是滚动,它依然固定原位。（例：返回顶部等）
relative--相对其正常位置定位
left:-**px(左)
right:-**px(右)
top:-**px(上)
bottom:-**px(下)
position:absolute--绝对定位的元素的位置相对于已定位父元素，如没有已定位的父元素，那么它的位置相对<html>
（先用 position:relative 定位父元素）
left:-**px(左)
right:-**px(右)
top:-**px(上)
bottom:-**px(下)
重叠元素--z-index:-1(后面)1（前面）
sticky-粘性定位,依赖于网页滚动。
2.目的是为了减少网页在响应过程中过渡消耗图片的请求资源
-----------------------------------------------------------------------------------
网页
1. 每个div前后都添加注释
<!--头部DIV 开始-->
<div class="">
<!--头部logoDIV 开始-->
<div class="">
</div>
<!--头部logoDIV 结束-->
</div>
<!--头部DIV 结束-->
2. 给css的选择器添加注释
/*这是头部logoDIV的css*/
.logo{}
3. html和css分离(可选)
index.html
auto.css
4. 利用css给div设置不透明度
opacity:0.9 ：有10%的透明度
background-color:rgba(0~255,0~255,0~255,0~1) 0.1：90%透明
------------------------------------------------------------------------------------- 操作列表
list-style-type: 设置列表前编号的样式，值为none时可以使列表前的编号消失
list-style-position: inside / outside -- 设置列表编号在li内容的里面还是外面
list-style-image:url() -- 用于将图片设置为列表编号
-------------------------------------------------------------------------------------------------
按钮
鼠标悬停-- .**:hover{}
.button{***}
.button:hover{****}
-----------------------------------------------------------------------------------------
鼠标指针发生变化--style="cursor:"auto"
(不同样式) auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
--------------------------------------------------------------------------------------------------------
max-width: 设置元素的最大宽度
min-width: 设置元素的最小宽度
max-height: 设置元素的最大高度
min-height: 设置元素的最小高度
overflow: 处理内容溢出的问题
hidden : 将溢出部分进行隐藏
scroll : 无论如何，元素中都会有滚动条
auto : 当元素中的内容溢出时，会在对应的方向上产生滚动条
-----------------------------------------------------------------------------------------------------
display:
none: 将元素从文档流布局中取消掉
block: 设置元素为块级元素
inline：设置元素为行内元素
inline-block:
inline-table:
----------------------------------------------------------------------
visibility:visible -- 设置元素可见
hidden -- 设置元素不可见，但文档中会保留该元素的原始位置
--------------------------------------------------------------------------------
position: 设置元素定位，元素的具体位置都由自己的上下左右四个方向上的坐标来决定
absolute: 绝对定位，元素会脱离文档流，元素会基于它的祖先元素进行定位，前提是祖先元素中有元素也进行了定位操作
relative: 相对定位，元素的原始位置不会脱离文档流，元素的定位是基于元素的原始位置
fixed : 固定定位，元素会脱离文档流，元素的定位是基于浏览器的四边
-------------------------------------------------------------------------------------------------------
选择器：
后代选择器 :xx yy -- 选中xx的后代中所有的yy元素
子选择器 :xx>yy -- 选中父元素为xx的yy元素
弟弟选择器 :xx+yy -- 选中紧跟着xx的第一个yy元素
弟弟选择器 :xx~yy -- 选择xx后的每一个yy元素
属性选择器 ：
属性名：[attrName] -- 选中所有含有该属性名的元素
属性值： [attribute=value] -- 选中所有指定属性为指定值的元素
[attribute~=value] -- 选中属性的值中含有指定单词的元素
[attribute|=language] --选中属性值为指定值或该指定值- 的元素
[attribute^=value] -- 选中属性的值中以指定内容开始的元素
[attribute$=value] -- 选中属性的值中以指定内容结束的元素
[attribute*=value] -- 选中属性的值包含指定字符串的元素
伪元素选择器：
:before---
:after
p:first-of-type -- 选中p元素所在的父元素中，所有p元素中的第一个元素
p:first-child -- 选择p元素所在的父元素中，该p元素必须为第一个子元素时
p:nth-of-type(x) --选中p元素所在的父元素中,该p元素为其父元素中所有p元素的第x个子元素
p:nth-of-child(x)--选中p元素所在的父元素中,该p元素为其父元素中所有子元素的第x个子元素
P:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
p:only-child
p:only-of-type
h1:empty -- 选中所有没有任何子元素（包括空白文本）的h1元素
------------------------------------------------------------------------------------------------------------------------
弹性盒子 display:none;---隐藏元素
display:flex 指定 HTML 元素盒子类型。
display:flex;让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
flex-direction: 指定了弹性容器中子元素的排列方式
row（默认）--横向从左到右排列
row-reverse--右对齐，从后往前排，最后一项排在最前面
column --竖向排列
column-reverse---反转竖向排列
注意：排列方式直接影响了弹性盒子的主轴方向和侧轴方向
justify-content: 设置弹性盒子元素在主轴方向上的对齐方式。
flex-start(默认) --弹性项目向行头紧挨着填充。
flex-end --弹性项目向行尾紧挨着填充
center --弹性项目居中紧挨着填充。
space-between --弹性项目平均分布在该行上
space-around--弹性项目平均分布在该行上，两边留有一半的间隔空间。
align-items: 设置弹性盒子元素在侧轴方向上的对齐方式。
flex-start：居上
flex-end：居下
center：居中
baseline：与基线对齐
stretch：(默认)尽可能接近所在行的尺寸。
flex-wrap: 设置弹性盒子的子元素超出父容器时是否换行。
nowrap - 默认， 弹性容器为单行。可能会溢出
wrap - 弹性容器为多行。溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。
initial
inherit;
align-content: 修改 flex-wrap 属性的行为，而是设置行对齐
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布-
-两端保留子元素与子元素之间间距大小的一半。
---------------------------------------------------------------------------------------------------
圆角：border-radius:具体像素值 / 百分比
阴影：box-shadow：
text-overflow: clip(裁剪) / ellipsis(加省略号)
----------------------------------------------------------------------
transform:
translate(x,y) -- 设置元素在水平和垂直方向上移动多少个像素
rotate(xxdeg) -- 设置元素在顺时针或逆时针方向上进行旋转
scale(a,b) -- 设置元素在横向和纵向上分别放大或缩小多少倍
skew(xdeg , ydeg) -- 设置元素在横向和纵向上通过拉伸的方式旋转一定的角度
transform-origin: 改变元素转换时的中心点
----------------------------------------------------------------------
过渡效果：
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
--------------------------------------------------------------------------------------
border-radius: 25px;-----------设置圆角
box-shadow: 0px 0px 0px beack----设置阴影
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
