文章目录
- table:
- 表单
- css
- 选择器:
- font:
- 盒子
- display
- 注意点:
- 权重:
- 背景
- 盒子
- 盒子宽=width + border-left + border-right + padding-left + padding-right
- 盒子高=height + border-bottom + border-top + padding-bottom + padding-top
- 居中
- 图片相关
- 清除内外边距:
- 外边距合并:
- 圆角边框:
- 边框阴影:
- 浮动
- 布局和版心
- 隐藏元素的四种方法
- 清除浮动:
- 定位
- 清除浮动:
- 定位
- 显示与隐藏
- 鼠标样式courser
- outline:
- resize:
- vertical-align去除图片缝隙:
- white-space
- text-overflow文字溢出
- 精灵图:
- 滑动门:
- 字体图标
- ico
- 行高会继承
- logo内的关键字不能删想办法让其看不见text-indent overflow hidden等去掉
- 京东案例 笔记
- 三大标签的优化
- 版心做法:
- 注意
- 新标签:h5 IE9以上 手机端随便用
- 表单属性
- css3新增选择器
- css伪元素
- box-sizing 盒子内减模式
table:
table表格 属性cellspacing单元格之间的距离 cellpadding内容到单元格边框内边距 align="center"表格居中 border边框 样式通过css设置
标签
caption:table的title
th表头
tr行
td列
cospan合并列
rowspan合并行
表单
结构:表单域 表单控件 提示文字
input 输入框
type:text文本输入 password密码 button按钮 submit提交 radio单选 checkbox复选 reset重置 img图片
file(文件域)
checked=“checked” 默认选中
size宽度
maxlength 最多输入的个数
select option 下拉列表
form表单 属性 action提交到页面
method get显示 post不显示
css
行内:style属性
style标签 :内部样式
选择器
.类
#id
标签选择器
权重:行内>id>类>标签>*
选择器:
id #
类 .
通配符 *
多类名选择器 class=“gray font”
交集 div.font
并集div,span
子代div>p
后代div p
后代子代 div>p>p>p
伪类
a:hover/link/active/visited
font:
family 字体 size大小 style样式 weight 粗细 700bold 400normal line-height行高
写在一起:style weight size/行高 family(size和family不可省略)
font-direction:
underline下划线 overline上划线 link闪烁 line-through删除线
text-indent首行缩进
text-aling 文本水平对齐
盒子
padding内边距
margin外边距 top right bottom left 上有下左
border:color size solid
display
显示模式:inline-block行内块 不可设置大小 不独占一行
inline行内 可设置宽高 不独占一行
block块 元素独占一行 可设置宽高
可通过display转换
注意点:
a内能放块
链接不能放链接
文字块p和h1等不能放div等块元素
行高line-height
顶线 中线 基线 底线 基线与基线的距离为行高
权重:
!imortant>id>类名选择器>标签>和继承
继承和 0 0 0 0
id 0 1 0 0
!important 无穷大
. 0 0 1 0
标签 0 0 0 1
相同权重 就近原则只针对冲突的样式
背景
background:
background-repeat 北京重复 repeat-x repeat-y no-repeat
background-color:颜色 rgba(0,0,0,.3) alpha背景透明
background-position:0 0 ; /center left; 只要有数值左面的必是x
盒子
边框:
border:1px green solid;
solid dashed double
边框,内外边距
四个上/右/下/左
三个上/左右/下
两个上下/左右
一个上下左右:
盒子宽=width + border-left + border-right + padding-left + padding-right
盒子高=height + border-bottom + border-top + padding-bottom + padding-top
居中
- 文字内容水平居中:
text-align:center; - 块水平居中:
指定width 左右外边距为auto
eg: .className{with:200px; margin: 0 auto;}
图片相关
- 插入图片:
更改大小:width和height
更改位置:可以用内外边距
产品展示类 - 背景图片
小图标背景或者超大背景图片
更改大小:只能用background-size
更改位置:可以用background-position
清除内外边距:
*{
margin: 0;
padding: 0;
}
合着写性能高一些
外边距合并:
合并为最大的那个
解决方法:不用管尽量避免
嵌套块元素同上
解决方法:父元素加上border或者padding或者添加overflow: hidden;
圆角边框:
border-radius:50%; 若是正方形50%就是⚪
边框阴影:
- box-shadow{0 0 0 0 color inset}
- 值:阴影水平偏移量, 阴影垂直偏移量, 阴影模糊半径, 阴影拓展半径, 颜色, inset改为内部阴影默认outset但是不可以写
前两个必须不能省表示水平,垂直阴影位置 可以负数 后四个可选
浮动
- 普通流 浮动 定位
浮动特性:
值:left right none;
- 不会超过padding值
- 找最近的父亲盒子对齐
- 一个父盒子里有子盒子 如果一个子盒子要浮动 想要在一行显示 其他的子盒子也要浮动
- 浮动后,转换为行内块
- 浮动后把位置让出来
布局和版心
布局流程:
- 确定版心
- 分析行模块 再分析行里的列模块
- 制作结构
- css初始化 再通过盒子模型用div和css布局
隐藏元素的四种方法
- height:0; border:0; 占位(换行效果)
- display:none; 不占位
- visibility:“hidden”;占位(占坑)
- opacity:0(全透明); 占位(占坑)
清除浮动:
- 高度剩余法:给元素一个height以省去padding和margin的麻烦
- 额外标签法: 最后一个浮动元素后额外一个标签clear both
- 父级添加overflow hidden/auto/scroll
- :after{content:""; display:block; clear:both; visibility:hidden; height:0};
- .clearfix:before, .clearfix:after{
content: “”;
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
定位
filed:
- 边偏移
top left right bottom分别对应元素相对于父元素的边线距离 - 定位模式:
静态定位static 自动定位 默认定位方式
静态定位是所有元素默认定位方式 网页所有元素默认静态定位
唯一用途:取消定位
相对定位relative
- 以自己左上角为基准点移动
- 占位置
绝对定位absolute
- 不占位置
- 完全脱标
- 父亲不定位则以当前屏幕为基准对齐
- 父亲有定位则以最近的有定位的祖宗对齐
子绝父相
相关问题
- 加了定位/浮动 的盒子 margin 0 auto失效
固定定位fixed
- 保留绝对定位的特性
- 以浏览器为准
叠放次序
- 盒子都有定位 后来居上
- 加上z-index:1;数值越大越在上面 只有定位的盒子才有z-index 默认为0
清除浮动:
- 高度剩余法:给元素一个height以省去padding和margin的麻烦
- 额外标签法: 最后一个浮动元素后额外一个标签clear both
- 父级添加overflow hidden/auto/scroll
- :after{content:""; display:block; clear:both; visibility:hidden; height:0};
- .clearfix:before, .clearfix:after{
content: “”;
display: block;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
定位
filed:
- 边偏移
top left right bottom分别对应元素相对于父元素的边线距离 - 定位模式:
静态定位static 自动定位 默认定位方式
静态定位是所有元素默认定位方式 网页所有元素默认静态定位
唯一用途:取消定位
相对定位relative
- 以自己左上角为基准点移动
- 占位置
绝对定位absolute
- 不占位置
- 完全脱标
- 父亲不定位则以当前屏幕为基准对齐
- 父亲有定位则以最近的有定位的祖宗对齐
子绝父相
相关问题
- 加了定位/浮动 的盒子 margin 0 auto失效
固定定位fixed
- 保留绝对定位的特性
- 以浏览器为准
叠放次序
- 盒子都有定位 后来居上
- 加上z-index:1;数值越大越在上面 只有定位的盒子才有z-index 默认为0
清除浮动本质是:父亲没有高度
解决办法:给父亲一个高度 和定位的子绝父相差不多
显示与隐藏
display
- none 隐藏 人直接没了 后面的元素会上来 就是坑么了的意思
- block 显示
visibility
- visible 显示
- hidden 隐藏 人走了 坑还占着
overflow
超出的内容:
visible显示 hidden隐藏 scroll滚动 auto超出就显示滚动条不超出就不显示
鼠标样式courser
- pointer小手 hand
- default 箭头
- text 文本
- move 拖拽
outline:
none 取消轮廓线
resize:
none 文本域防止拖拽
vertical-align去除图片缝隙:
- 它不影响块元素 只针对行内块或者行内元素 控制图片 表单与文字的对齐
- top middle和bottom都能去除图片缝隙
- display:block 也能去除缝隙
white-space
设置或检索对象内文本显示方式 通常用于强制一行显示内容
- nomral 默认的
- nowrap:文本强制显示在同一行 除非换行或结束
text-overflow文字溢出
- clip 不显示省略记号 直接裁切
- ellipsis 溢出的部分用省略号代替
格式: className{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
精灵图:
多个背景图片合成一个大图 为了减少服务器请求次数
核心:background-position
滑动门:
span背景图片右对齐
span不要给宽度 可以给高度
字体图标
字库
- icoMoon 德国的 推荐
- 阿里iconfont.cn 国内的阿里巴巴
ico
行高会继承
logo内的关键字不能删想办法让其看不见text-indent overflow hidden等去掉
京东案例 笔记
- spacer 用li当分割符
- shorcut 快捷导航栏
- dropdown 下拉
三大标签的优化
- title 不超过26个汉字 从前往后关键字权重高
- description网站描述 不超过120字
- Keywords
绝对定位 大小可以不给 会被内容撑开
版心做法:
- 父标签:通栏版心inner 相对定位
- 子标签:装内容的版心盒子div 设置相对定位并z-index防止被a覆盖
- 子标签:div设置绝对定位高度和版心盒子一致 div内的a标签 宽度百分百;
注意
- 如果下一行的文字被上一行内容所影响 可以给上一行一个overflowhidden 或者改变上一行的高度
- 当想要给盒子padding值时,需要改变对应的 width和height值以保证盒子不会变形
- 当想要改变图片的大小时,给img一个width:100% height:auto(自动 跟随宽度 一起缩放)
新标签:h5 IE9以上 手机端随便用
- header 文档的页眉 头部
- nav 导航链接
- footer 文档或节的页脚 底部
- article 文章
- section 文档中的节(section 区段)
- aside 所处内容之外的内容 侧边
- time 时间
- datalist 定义选项列表 与option input联用
- fieldset 表单元素分组 legend搭配使用
- 表单验证:
email邮箱
number数字
tel电话
search搜索框
url网址
range自由拖动滑块
time时间
date日期
datetime当前时间
month月
week星期 - audio 播放音频
格式:MP3 Ogg
autoplay:自动播放
controls:显示默认播放控件
loop循环 或者loop=“loop” - video 播放视频
格式:Oog MPEG4 WebM
表单属性
placehodler 占位符 当用户输入的时候 里面文字消失
autofocus 自动获得焦点
multiple 多选文件
required 不能为空
css3新增选择器
- first-child 父亲的第一个儿子选择器
last-child 最后一个儿子
nth-child(n) 第n个 不论类型 even偶数 odd奇数
从0开始 2n 3n 4n …n的倍数代表所有n的倍数都被选择上了 - [class] 属性选择器 选出所有带有class属性的
[class^=demo] 选择所有demo开头的属性
[class$=test] 结尾
css伪元素
- 没软用的东西
::first-letter 选择第一个字
3::first-line 第一行
::selection 选中的文字状态 - after before 伪元素 是个盒子 可以转换
必须带属性 content 内部插入
box-sizing 盒子内减模式
content-box c2模型
border-box c3模型