html+css基础自学笔记

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

居中

1. 文字内容水平居中：
   text-align:center;
2. 块水平居中：
   指定width 左右外边距为auto
   eg: .className{with:200px; margin: 0 auto;}

图片相关

1. 插入图片：
   更改大小：width和height
   更改位置:可以用内外边距
   产品展示类
2. 背景图片
   小图标背景或者超大背景图片
   更改大小:只能用background-size
   更改位置：可以用background-position

清除内外边距：

*{
margin: 0;
padding: 0;
}
合着写性能高一些

外边距合并：

合并为最大的那个

解决方法：不用管尽量避免

嵌套块元素同上

解决方法：父元素加上border或者padding或者添加overflow: hidden;

圆角边框：

border-radius:50%; 若是正方形50%就是⚪

边框阴影：

1. box-shadow{0 0 0 0 color inset}
2. 值：阴影水平偏移量, 阴影垂直偏移量, 阴影模糊半径, 阴影拓展半径, 颜色, inset改为内部阴影默认outset但是不可以写
   前两个必须不能省表示水平，垂直阴影位置 可以负数 后四个可选

浮动

• 普通流 浮动 定位

浮动特性:

值：left right none;

1. 不会超过padding值
2. 找最近的父亲盒子对齐
3. 一个父盒子里有子盒子 如果一个子盒子要浮动 想要在一行显示 其他的子盒子也要浮动
4. 浮动后,转换为行内块
5. 浮动后把位置让出来

布局和版心

布局流程：

1. 确定版心
2. 分析行模块 再分析行里的列模块
3. 制作结构
4. css初始化 再通过盒子模型用div和css布局

隐藏元素的四种方法

1. height:0; border:0; 占位(换行效果)
2. display:none; 不占位
3. visibility:“hidden”;占位(占坑)
4. opacity:0(全透明); 占位(占坑)

清除浮动:

0. 高度剩余法:给元素一个height以省去padding和margin的麻烦
1. 额外标签法: 最后一个浮动元素后额外一个标签clear both
2. 父级添加overflow hidden/auto/scroll
3. :after{content:""; display:block; clear:both; visibility:hidden; height:0};
4. .clearfix:before, .clearfix:after{
   content: “”;
   display: block;
   }
   .clearfix:after{
   clear: both;
   }
   .clearfix{
   *zoom: 1;
   }

定位

filed:

1. 边偏移
   top left right bottom分别对应元素相对于父元素的边线距离
2. 定位模式:

静态定位static 自动定位 默认定位方式

静态定位是所有元素默认定位方式 网页所有元素默认静态定位
唯一用途：取消定位

相对定位relative

1. 以自己左上角为基准点移动
2. 占位置

绝对定位absolute

1. 不占位置
2. 完全脱标
3. 父亲不定位则以当前屏幕为基准对齐
4. 父亲有定位则以最近的有定位的祖宗对齐

子绝父相

相关问题

1. 加了定位/浮动 的盒子 margin 0 auto失效

固定定位fixed

1. 保留绝对定位的特性
2. 以浏览器为准

叠放次序

1. 盒子都有定位 后来居上
2. 加上z-index:1;数值越大越在上面 只有定位的盒子才有z-index 默认为0

清除浮动:

0. 高度剩余法:给元素一个height以省去padding和margin的麻烦
1. 额外标签法: 最后一个浮动元素后额外一个标签clear both
2. 父级添加overflow hidden/auto/scroll
3. :after{content:""; display:block; clear:both; visibility:hidden; height:0};
4. .clearfix:before, .clearfix:after{
   content: “”;
   display: block;
   }
   .clearfix:after{
   clear: both;
   }
   .clearfix{
   *zoom: 1;
   }

定位

filed:

1. 边偏移
   top left right bottom分别对应元素相对于父元素的边线距离
2. 定位模式:

静态定位static 自动定位 默认定位方式

静态定位是所有元素默认定位方式 网页所有元素默认静态定位
唯一用途：取消定位

相对定位relative

1. 以自己左上角为基准点移动
2. 占位置

绝对定位absolute

1. 不占位置
2. 完全脱标
3. 父亲不定位则以当前屏幕为基准对齐
4. 父亲有定位则以最近的有定位的祖宗对齐

子绝父相

相关问题

1. 加了定位/浮动 的盒子 margin 0 auto失效

固定定位fixed

1. 保留绝对定位的特性
2. 以浏览器为准

叠放次序

1. 盒子都有定位 后来居上
2. 加上z-index:1;数值越大越在上面 只有定位的盒子才有z-index 默认为0

清除浮动本质是：父亲没有高度
解决办法：给父亲一个高度 和定位的子绝父相差不多

显示与隐藏

display

1. none 隐藏 人直接没了 后面的元素会上来 就是坑么了的意思
2. block 显示

visibility

1. visible 显示
2. hidden 隐藏 人走了 坑还占着

overflow

超出的内容:
visible显示 hidden隐藏 scroll滚动 auto超出就显示滚动条不超出就不显示

鼠标样式courser

1. pointer小手 hand
2. default 箭头
3. text 文本
4. move 拖拽

outline：

none 取消轮廓线

resize：

none 文本域防止拖拽

vertical-align去除图片缝隙:

1. 它不影响块元素 只针对行内块或者行内元素 控制图片 表单与文字的对齐
2. top middle和bottom都能去除图片缝隙
3. display:block 也能去除缝隙

white-space

设置或检索对象内文本显示方式 通常用于强制一行显示内容

1. nomral 默认的
2. nowrap：文本强制显示在同一行 除非换行或结束

text-overflow文字溢出

1. clip 不显示省略记号 直接裁切
2. ellipsis 溢出的部分用省略号代替
   格式: className{overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}

精灵图:

多个背景图片合成一个大图 为了减少服务器请求次数
核心：background-position

滑动门:

span背景图片右对齐
span不要给宽度 可以给高度

字体图标

字库

1. icoMoon 德国的 推荐
2. 阿里iconfont.cn 国内的阿里巴巴

ico

行高会继承

logo内的关键字不能删想办法让其看不见text-indent overflow hidden等去掉

京东案例 笔记

1. spacer 用li当分割符
2. shorcut 快捷导航栏
3. dropdown 下拉

三大标签的优化

1. title 不超过26个汉字 从前往后关键字权重高
2. description网站描述 不超过120字
3. Keywords

绝对定位 大小可以不给 会被内容撑开

版心做法:

1. 父标签:通栏版心inner 相对定位
2. 子标签:装内容的版心盒子div 设置相对定位并z-index防止被a覆盖
3. 子标签:div设置绝对定位高度和版心盒子一致 div内的a标签 宽度百分百;

注意

1. 如果下一行的文字被上一行内容所影响 可以给上一行一个overflowhidden 或者改变上一行的高度
2. 当想要给盒子padding值时，需要改变对应的 width和height值以保证盒子不会变形
3. 当想要改变图片的大小时，给img一个width:100% height:auto（自动 跟随宽度 一起缩放）

新标签：h5 IE9以上 手机端随便用

1. header 文档的页眉 头部
2. nav 导航链接
3. footer 文档或节的页脚 底部
4. article 文章
5. section 文档中的节（section 区段）
6. aside 所处内容之外的内容 侧边
7. time 时间
8. datalist 定义选项列表 与option input联用
9. fieldset 表单元素分组 legend搭配使用
10. 表单验证：
    email邮箱
    number数字
    tel电话
    search搜索框
    url网址
    range自由拖动滑块
    time时间
    date日期
    datetime当前时间
    month月
    week星期
11. audio 播放音频
    格式：MP3 Ogg
    autoplay:自动播放
    controls：显示默认播放控件
    loop循环 或者loop=“loop”
12. video 播放视频
    格式：Oog MPEG4 WebM

表单属性

placehodler 占位符 当用户输入的时候 里面文字消失
autofocus 自动获得焦点
multiple 多选文件
required 不能为空

css3新增选择器

1. first-child 父亲的第一个儿子选择器
   last-child 最后一个儿子
   nth-child(n) 第n个 不论类型 even偶数 odd奇数
   从0开始 2n 3n 4n …n的倍数代表所有n的倍数都被选择上了
2. [class] 属性选择器 选出所有带有class属性的
   [class^=demo] 选择所有demo开头的属性
   [class$=test] 结尾

css伪元素

1. 没软用的东西
   ::first-letter 选择第一个字
   3::first-line 第一行
   ::selection 选中的文字状态
2. after before 伪元素 是个盒子 可以转换
   必须带属性 content 内部插入

box-sizing 盒子内减模式

content-box c2模型
border-box c3模型