html&css
基础
继承性
1、以color|font|text|line开头的属性才可以继承 2、a标签无法继承color 应用场景:文字颜色,字体,文字大小等共性信息
-
伪类(a:link :正常链接, a:visited ,访问过的链接;a:hover 滑过的链接;a:active,正在点击的链接)
-
伪元素选择器 ::before表示元素最前面的部分,一般结合content一起使用,不可选中
-
属性选择器:input[type="text"] | [class^="col"]
高度塌陷
父元素的高度会被子元素默认撑开 当子元素设置float后,子元素会完全脱离文档流,父元素高度塌陷 解决高度塌陷方法 (overflow :hidden) 每个元素有个一个隐藏的属性 BFC(默认关闭) 开启后 1.开启bFC的元素可以包含浮动的子元素 2.bfc元素不会被浮动覆盖 开启方法: 1.设置浮动 2设置元素绝对定位 3设置元素为inline-block 4.将元素的overflow设置为一个非visible(隐藏的)(auto / hidden推荐);
表格
table:创建表格/是一个块元素 thead:表头 tbody:表格主体 就算没写,浏览器会自动添加一个tbody tr是tbody的子元素而不是table的子元素
tr:表列/行 th:表头 td:单元格/列 表格的列数有最多的一行决定 tfoot:表格底部 永远显示在表格底部 补充 合并单元格: rowspan: 纵向合并单元格 colspan:横向合并单元格 border-spacing :table和td边框之间默认有一个距离 border-collapse : 设置表格的边框合并,border-spacing会默认失效
子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素
可以将父元素的display改为table既可以
解决高度塌陷,确保父元素和子元素的垂直外边距不会重叠
.clearfix:before
.clearfix:after{ content: "" , display:table , clear:both;}
table{
width: 100%;
border-collapse: collapse;
}
tr{
height: 42px;
}
td{
border-bottom: 1px solid rgba(100,100,100,.1);
}
表单
action:地址提交处,必须写上一个地址,来传输表单填写的内容 value可以改变提交按钮的文字,也可以作为文本的默认值 name:如果希望表单项中的数据会提交到服务器中,还必须给表单指定一个name属性,name表示提交内容的名字 单选、多选按钮必须添加一个value值,被选中的表单项才可以将value值提交,默认被选中checked="checked" select:下拉列表,使用option创建列表项, select需要加一个name属性,option需要加一个value属性, 下拉列表默认选中:option中设置属性selected=“selected” optgroup:为option分组 可以通过lable属性来指定分组的名字 textarea:文本域-依旧需要指定文本域- cols/rows button:唯一的作用就是可以被点击 跟button标签一样 使用id + for可以对表单和文本进行关联 fieldset:为表单项进行分组 可以使用子标签legend对表单进行分组 lable:lable标签中通过for属性和输入框中的id进行绑定
文档流
-
垂直外边距合并:为元素设置 border-top或者padding-top
-
display:none:设置该元素为隐藏元素,不会在页面中显示,也不会占据位置
-
Visibility:hidden :元素不会显示在页面中显示,但是他的位置会依然保持
内联
-
margin-top:内联元素的margin-top无效
-
高度:高度只受line-height|font-size|vertical-align
块元素
-
宽度默认100%;高度被撑开;独占一行
脱离文档流
float|absolute|bfc
-
块元素脱离文档流,宽度会被内容撑开,而不是默认文档流中的auto
-
内联元素脱离文档流,也会变成块元素,宽高可以设置
浮动
可以脱离文档流,产生浮动流 设置后,margin :0 auto会无效 如果浮动的元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 浮动元素不会超过他上边的兄弟元素,最多一边对其 浮动的元素不会盖住文字,文字会自动环绕在元素的周围
BFC
每个元素都有一个隐含的属性BFC:块级格式化 BFC默认是关闭的 开启BFC特性 1、父元素的垂直外边距不会和子元素重叠 2、开启BFC元素不会被浮动元素所覆盖 3、开启BFC的元素可以包含浮动的子元素 4、父元素可以包含子元素,大小也会被子元素撑开 开启方式(间接开启) 1,设置元素浮动 2’设置绝对定位 3、设置inline-blcok,父元素宽度会丢失 4、overflow:hidden;----->推荐方式
定位
相对定位: 相对与元素自身的定位,不会脱离文档流,元素会提升一个层级,元素会占据一个位置 绝对定位 现对与开启定位的父元素进行定位,脱离文档流,元素会提升一个层级,性质会发生变化内联元素会变成块元素,块元素高度和宽度会被内容撑开
背景
url():设置图片 可以同时为元素设置背景颜色和背景图片 background-reoead:no-repead:不重复 repead-x,repead-y background-position:center /也可以在后边添加两个定位值来表示top和left 背景图整合技巧(CSS-Sprite) 把:hover,:active的图片都合并在一张,然后伪类发生时就background-position像左移 优点:增加用户体验 可以简写
其他
字体图标
常用的图标库地址:https://www.iconfont.cn/ && https://icomoon.io/
尺寸单位
px: 像素是相对于显示器的分辨率而言的 em:相对单位 例:[ 1em=16px(浏览器默认行高16px)] rem:CSS3相对单位(rootem , 根em)
PS美工
界面选项 --->单位与标尺 ctrl+r打开标尺 f8查看尺寸