[散修弟子]CSS-9635|2020年08月22日的日报-技能树.IT修真院

发表于： 2020-08-22 22:41:37

2 1202

今天完成的事情：今天主要修改了任务四重新提交，对于定位的认识更加准确了，之前的样式问题是因为高度写做了vw值，对于一个美观好看的app移动端布局，宽度可以设置为百分比，但是高度需要固定，不然再不同像素下展现出来的样式就很丑。

然后深入了解了任务四的深度思考，

1.position定位有哪几种？各有什么特点

答：absolute（绝对定位），reletive(相对定位)，fixed(固定定位)，float(浮动)，

其中reletive不可以层叠，没有脱离文档流，设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。并且在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位可以层叠元素，从文档流中删除，并且绝对定位会绝相对于最近已经定位的父元素定位。

固定定位概念想css长度单位vw一样，相对于视窗本身的一个定位，类似于修真院右下角上翻页下翻页效果，无论怎么滑动滚动条，其位置永远不变。

2.哪些css属性可以设置百分比，其计算原则是什么？

可设置属性

盒模型系列:

content: width(参照包含块宽度)、height(参照包含块高度)

padding(参照包含块宽度)

border

border-radius(参照包自身宽度&高度)

border-image

border-image-slice(参考图片尺寸)

border-image-width(参考自身宽度&高度)

margin(参照包含块宽度)

定位系列：

left、right(参照包含块宽度)

top、bottom(参照包含块高度)

文本系列：

text-indent(参照包含块宽度)

word-spacing(参照受影响字体宽度)

text-size-adjust(参考相对应文字字号)

font-size(参照包含父元素字号)

flex系列：

flex-basis(参考flex容器大小)

background系列:

background-position(参考背景定位区域大小-背景图片大小，其中大小指的是水平偏移的宽度和垂直偏移的高度)

background-size(相对于定位区域)

3.常见的表单元素有哪些？各有什么属性？

form 表单

属性

action: 提交表单时执行的动作，可以在此指定某个服务器表单处理脚本(如果省略action，action被设置为当前页面)

method: HTTP方法(GET|POST)

accept-charset：使用的字符集

autocomplete: 自动完成表单(默认开启)

enctype：提交数据的编码

novalidate：规定不验证表单

target：规定action属性中地址的目标(默认_self，也就是指向当前)

input 输入，可通过改变type变换形态

属性其他属性参考了解HTML表单之input元素的30个元素属性

type: text(文本) | password(密码,变圆点) | checkbox(复选框) | radio(单选)

html5新增属性：color & date & datetime & datetime-local & email & month & number & range & search & tel & time & url & week

datalist(html5) <input>的预定义选项列表, input的list属性引用datalist的id即可关联

子元素option 待选项

label 标签，可以通过for属性绑定对应input的id

select 下拉列表

子元素option 待选项

textarea 多行文本框, 用rows&cols控制大小

button 按钮，可通过改变type变换作用

属性type: button(按钮) | sumbit(提交) | reset(重置)

fieldset 表单外框

子元素legend 表单外框名称

详见demo

<form action ="http://www.baidu.com" method="get">
    用户名：<input type="text" name="txtName"/><br/>
    密码：<input type ="password" name="txtPwd"/><br/>
    <input type="submit" value="提交到百度"/>                  <input type ="reset" value="清空"/><br/>

    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="sex"/>男<br/>
        <input type="radio" name="sex"/>女<br/>
    </fieldset>

    <select size="1">
        <optgroup label="广东省">
            <option>中山</option>
            <option>广州</option>
            <option>深圳</option>
            <option>东莞</option>
        </optgroup>

        <optgroup label="江西省">
            <option>上饶</option>
            <option>南昌</option>
            <option>九江</option>
            <option>赣州</option>
        </optgroup>
    </select>
    <br/>

    <input type="file"/><br/>

    <textarea cols="100" rows="30">
    </textarea>
</form>