随笔

随笔

text-indent 单位px或 em 1em=16px
字体加粗 font-weight：bold
字体变细 font-weight：lighter
字体倾斜 font-style：italic
加下划线 text-decoration：underline
加删除线 text-decoration：line-through
去掉下划线 text-decoration：none
文本和图片水平居中 text-align：center
垂直方向对齐方式：vertical-align：middle
行高 line-height
字间距 letter-spacing
词间距 word-spacing

去掉列表标识符 list-style：none
背景重复 background-repeat：no-repeat
背景定位 background-position
背景简写 background：url（） no-repeat 0px 0px
背景固定：background-attachment：fixed
背景重复：background-repeat：no-repeat/repeat-x/repeat-y

3.27

li:nth-of-type(1) a{ 兄弟中的排名
li:nth-of-type(2) a{
li:nth-of-type(3) a{

触发BFC规则：float/position/display/overflow（最常用）
每个BFC区域都是独立的 内部不会影响到外部其他区域 只有上下影响 左右无影响 且不影响其他区域

li：first-child
li： nth-child
li： last-child
li：nth-of-type（even） 偶数行
li：nth-of-type（3）可选不同类型子类
li：nth-child （3） 只能选相同类型子类

：：after{ 伪元素
content：" ";
}
linaer-gradiet（to bottom， #颜色，#颜色）

box-shadow: 水平位移 垂直位移 模糊值 扩大值 颜色 向内/向外；
transition：过度属性width 时间 过渡方式ease-in 延迟时间；
ease 先满后快再满 ease-in慢速开始 ease-out慢速结束
linear 线性 ease-in-out 慢速开始慢速结束

：check{ 勾选中的效果

input 的属性 checked=checked;
maxlength最大输入长度 字符个数

input type=file 选择文件

input type=radio value name=sex
男

籍贯: 下拉选框

河南 广东

seclected=seclected 默认选框选中

<textarea cols= rows=>
cols每行的字数 rows几行

input:focus 光标 伪类选择器

snipaste 工具

background-attachment:fixed 背景固定屏幕
background:rgba(0，0，0，0.3)
r g b分别三源色 a是alpha半透明的意思

清除浮动总结：
增加伪元素after 和 增加双伪元素
父元素 voerflow：hidden
额外标签法 clear：both 或者br标签等

定位 position

relative 占有原位置 相对自身位置移动
absolute 不占有原位置 相对带有定位的父级移动
fixed 固定定位 不占有原位置 相对浏览器可视区移动
随着版心右侧滚动 left：50%； margin-left：版心盒子的一半
sticky 粘性定位 占有位置 相对浏览器可视区移动

z-index 设置定位盒子叠放顺序 数值越大 盒子在上
定位盒子的剧中：left：50%；marin-left：负值 向左走定位盒子自身的一半
定位的特殊性： 给行内元素添加定位 相当于浮动 把行内元素变成块内元素 可以设置宽高了
给块级元素添加定位 如果没有提前给宽高的话 盒子的大小默认是盒子内容的大小
浮动的盒子不会盖住后下面文档流的盒子内的文字 文字环绕
但是定位的盒子会盖住后下面文档流盒子内的文字

改变盒子右上角 或者左上角为圆边
border-top-right-radius：10px

网页布局总结：
标准流：网页大块的盒子从上往下排列
浮动：盒子可以一行排列
定位：盒子可以叠加

元素的显示和隐藏 类似网站的广告 点击关闭就不见了
display：让一个元素如何显示的方式和隐藏
display：bolck inline inline-block 转换或显示
display：none 隐藏对象后 不再占有原来位置 消失了
visibilty 可见性
visibility：inherit；继承上一个父对象的可见性
visibility：visible；对象可见
visibility：hidden 隐藏 仍占有原来位置
voerflow 溢出
voerflow：hidden 不显示溢出的内容
overflow：scroll； 总是显示滚动条 不溢出也显示滚动条
overflow：auto；在需要的时候添加滚动条

鼠标样式
style=“cursor：pointer” 小手
cursor：move 移动
cursor：text 文本
cursor：not-allowed 禁止
表单
outline：none 去掉样式 输入框的边框效果
textarea{resize：none } 取消文本域拖拽

去除图片底部空白缝隙
1 去除基线 vertical-align：top/bottom/middle
2 转化为块元素 display：block

单行文字溢出显示省略号
1：只显示一行文字 white-space：nowrap；
2超出部分隐藏：overflow：hidden
3 省略号代替超出文字 text-overflow： ellipsis；

设置视口以及 引入初始化样式