HTML&CSS精华知识点——表单元素、BFC、两栏布局、居中总结等

最新推荐文章于 2022-07-11 18:22:28 发布

攻城狮0908

最新推荐文章于 2022-07-11 18:22:28 发布

阅读量280

点赞数

分类专栏：前端、HTML，CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_39052393/article/details/100749309

版权

11 篇文章 0 订阅

订阅专栏

一、input表单元素
一系列元素，主要用于收集用户数据
1、type属性表示输入框类型

    <input name="gender" type="radio">
    	<label for="radMale">男</label>
    <input name="gender" type="radio">
    	<label for="radMale">女</label>

5、datalist元素，数据列表，不会显示到页面，配合关联text文本框运行

<input list="user">
<datalist id="user">
<option> </option>
</datalist>

6、from元素，通常情况下，会将整个表单元素内部，作用是提交表单时，会将from元素内容以合适的方式提交到服务器

action=“提交的地址”
method=“get/post”,提交方式
fieldset元素
表单状态
readonly属性，只读属性
disabled属性，布尔属性，是否禁用
7、新的伪类
1）、focus：元素聚焦时候样式
input：focus
2）、cheched单选框和多选框被选中的样式
3）、是否允许多行文本框调整大小
resize：both（默认值）、none（不可调整）
二、块级格式化上下文
1、全称Block Formatting Context简称BFC，他是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局
常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含快的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素
2、BFC渲染区域：
这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：
根元素，意味着，元素创建的BFC区域，覆盖了网页中所有的元素
浮动和绝对定位
overflow不等于visible的块盒
display：line-block
3、独立的渲染区域
不同区域，他们进行渲染时互不干扰
4、创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部
具体规则：
创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并

三、两栏布局
方案一、两个div，分别左右浮动定宽
方案二、两份div，其中一个左浮动或者右浮动，另一个使用BFC，overflow
【扩展】盒子位置

关注

专栏目录