标签：BFC 前端 元素 边框 小白 表单 Type 日记 属性
虽然在学习的过程中会遇到许多不顺心的事，但古人说得好——吃一堑，长一智。多了一次失败，就多了一次教训;多了一次挫折,就多了一次经验。没有失败和挫折的人，永远不会成功的。
最近一周的学习，遇到了很多困难，心情也有些小浮躁，但是只要静下心来，仔细思考，问题还是可以迎刃而解的。上篇文章分享到定位属性，下面就来分享一下本周的总结：
position（上周没有学完，重新写一遍）
static 默认定位
默认定位无法通过边偏移量改变自身位置
绝对定位不会以默认定位为参考
absolute 绝对定位
针对有定位的父元素进行位置变化
脱离标准文档流【不占位置】
relative 相对定位
针对于自身之前的位置加的位置变化
不脱离标准文档流【占位置】
fixed 固定定位
参照物为浏览器窗口
脱离标准文档流【不占位置】
sticky 粘性定位
粘性定位类似固定定位，但是上方有内容是，会先执行正常的排布，当前面的元素划走 之后在执行固定定位
参考元素为有滑动条的父元素
叠放次序（用来控制有定位元素的上下关系）
z-index
后来者居上
值越大越靠上
可以跟负值
必须用在有定位的元素上【切记 而且不能为默认定位】
透明（设置元素透明的办法，后面还有一些）
rgba取值范围0-1 只有背景边透明
opacity取值范围0-1 有颜色的内容也会变透明
filter:alpha(opacity=value);取值范围 0-100之间的整数值 IE9以下的写法
圆的制作（这个小知识实在联系时候学到的）
高度等于宽度
border-radius：50%;
表格（这个是在html中控制表格）
格式
<table> <tr> <td> </td>...</tr>...</table>
table中可添加的属性
border 边框
cellspacing 控制边框与边框之间的距离【默认为1px】
width/height 宽度/高度
align left/right/center 控制整个表格的位置
bgcolor 背景颜色
cellpadding 设置内容与边框之间的距离【可增大表格的宽高//类似padding】
bordercolor 设置边框颜色
tr中可添加的属性
height 高度
align left/right/center 设置一行中内容的水平位置
valign top/middle/bottom 设置一行中内容的垂直位置
bgcolor 背景颜色
td中可添加的属性
width/height 宽度/高度
align left/right/center 设置一个单元格中内容的水平位置
valign top/middle/bottom 设置一个单元格中内容的垂直位置
bgcolor 背景颜色
合并单元格
colspan
合并列【操作的是同一行的单元格】
rowspan
合并行【操作的是同一列的单元格】
其他标签
<caption> </caption>
标题标签
<th>
加粗并居中
表格（css控制表格）
border
边框
border-spacing
边框与边框之间的距离
border-collapse
设置相邻单元格的边框合并
separate 边框分开
collapse 边框合并
table-layout
设置单元格宽度是否固定
fixed 固定宽度
auto 自适应宽度
empty-cells
设置空的单元格的隐藏
hide 隐藏
show 显示
caption-side
设置标题的位置
left/right/top/ bottom
left/right只有火狐支持
bottomIE7以下不支持
<colgroup span=""></colgroup>
数据列分组 支持span，width，bgcolor属性
<col span="">
细化colgroup,需要写在colgroup中
rules
添加分割线，table中的属性
groups/rows/ cols/all/none
宽高自适应
宽度自适应
百分比
不写
auto
高度自适应
百分比
不写
auto
高度自适应时，float/position：fixed、absolute时需要注意
清除浮动带来的影响
给父元素添加overflow:hidden
缺点：会隐藏溢出的元素
在浮动元素下方添加空块元素,并给该元素添加声明：clear:both;height:0;
缺点：在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能
万能清除法
父元素：：after{content：' '；
clear：both；
display：block；
height：0；
width：0；
visibility:hidden;
overflow:hidde
}
缺点：IE7及以下浏览器不兼容
伪元素
::first-letter
::first-line
::before
::after
::selection 必须使用双冒号：： 只能改color和background-color
::before、 ::after 后加的属性1、配合content使用 2、url{图片的路径}
::first-letter、:first-line、::before、 ::after也可使用单冒号：
隐藏与透明
隐藏
display：none； 脱离标准文档流，不占据空间
visitility：hidden （隐藏）/visible（显示） 占空间
opcity：0 占据空间
height：0 不占空间 弊端：文本会留在原来的位置
transform：scale（0） 缩放（缩放比例为0）
透明
transparent（透明色） 作用在背景上
rgba（0，0，0，0） 作用在背景上
opcity：0 透明度，不止能透明背景，也可以透明文字、图片
iframe使用
作用
iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种 很多页面都相同的部分，这样在切换页面的时候避免重复下载。
语法
<iframe src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe>
属性
frameborder="1/0" 1代表有框架边框 /0代表无框架边框
滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动
<a href="" target="iframe的name属性值"></a>表示超链接的目标地址在框架中打开
calc()函数的使用
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)
calc()函数支持 "+", "-", "*", "/" 运算
calc()函数使用标准的数学运算优先级规则
css控制表单
文本框更改获取焦点之后的样式1、outline：none 清除input获取焦点自带的样式
2、：focus 获取焦点之后的样式操作（文本框获取焦点之后的状态）
属性选择器
【属性=“属性值”】 例：【type=“text”】
下拉列表更改右侧箭头自带的样式
1、appearance：none 清除下拉列表自带的样式
2、手动插入背景图片，更改位置、大小、平铺方式
单选框/复选框样式修改
1、appearance：none 清除自带的样式
2、设置宽高、边框、文本位置、框的位置
3、：：after
4、加入特殊符号
5、：checked
6、修改选中之后的样式
文本域固定
resize：none 设置文本域不可拖动
文本框+提交
1、设置宽度/高度
2、调节位置
3、调整边框【不能单独加border-color，会产生色差】
4、提交按钮更换为buttom 直接在标签中加入特殊符号
5、获取焦点之后的样式操作【outline：none】
兄弟选择器，使用➕连接【必须是紧挨着的后面的兄弟使用】
6、设置鼠标悬停后的样式操作
制作表单标题效果
1、给表单加边框 fieldset
2、给边框加文字 legend 可使用 text-align 控制位置
HTML5 新增智能表单控件
Type=“color” 生成一个颜色选择的表单
Type=“tel” 唤起拨号盘表单
Type=“search” 产生一个搜索意义的表单，可局部清除
Type=“range” 产生一个滑动条表单
Type=“number” 产生一个数值表单
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“date” 限制用户必须输入日期
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“time” 限制用户必须输入时间类型
Type=“datetime-local” 选取本地时间
HTML5 新增表单属性
placeholder 提示信息
autofocus 页面刷新或者打开时自动获取焦点
autocomplete 与name属性 一块连用[保存历史输入记录on/off]
min/ max/step 在数值表单中使用 最小值/最大值/数字间隔
multiple 多文件上传，或者是多个url等等
list需要结合id一块使用 [id在datalist里面]
required必填项
pattern 正则表达式验证
视频、音频
代码样式video=“ ”、audio=“ ”
属性值
src 路径
controls 显示播放控件
autoplay 自动播放
loop 循环播放
muted 静音播放
poster 视频播放前的界面，后跟src“图片路径”src和controls属性必须存在，否则无法播放
poster属性为视频属性，音频无法使用
H5新增的语义化标签
header 头部
footer 脚步
nav 导航
main 主要的内容区域
figure 与figcuption一起使用，类似于之前的自定义列表
article 与上下文无关的独立的内容区域
aside 在article之外，对arti起到解释说明的作用
section 可以代替之前的div
BFC【块级格式化上下文】
BFC特性【对之前遇到现象的解释】
1.在html中为啥元素在垂直方向上排布以及为啥有的元素在水平方向上排布
html本身就是-一个BFC, [自身变成了一个新的BFC ]
2. margin重叠的解决方案
overflow:hidden触发 了一个新的BFC
3. float为啥哪样那个排布
float box区域不会与出发BFC的区域融合
[自适应两栏的布局/双飞翼布局[htm1中结构的顺序]]
4.解决高度塌陷方法的解释
BFC会把浮动的高度也计算在内
5.对于父亲和孩子为啥挨着
BFC中:子元素的margin始终与父元素的boder紧挨着
6. BFC之间互不影响
BFC触法条件
1. html本身就是一个BFC
2.脱离标准文档流的也可以float值 不为none position的 值为fixed/ absolute
3. overflow的值不为默认
4. display:inline-block/table-caption/table-ce11/flex/inline-flex[ 弹性盒子]
宽高自适应布局
自适应两栏布局
双飞翼布局
注意html中盒子的顺序
上面固定的两栏布局
延伸 怪异盒模型
box-sizing：border-box
padding和border不会改变最开始设置的宽度高度【padding-border不超过width/height的情况下】
伪类选择器
结构伪类选择器
1、:first-child :last-child
第一个元素/最后一个元素
2、:nth-child（） :nth-last-child（）
even/odd/2n-1
3、:only-child
匹配仅有一个子元素
4、：root
匹配文档的根元素
继承
5、:empty
匹配没有子元素的
否定伪类选择器
:not(s)
出去括号中的元素
截至目前为止，这周的学习总结就是这些，如果有遗漏或者错误的的地方，请大佬们多多请教！
标签：BFC,前端,元素,边框,小白,表单,Type,日记,属性 来源： https://blog.csdn.net/Kenom_/article/details/120731793
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。