15天前端学习-第三天(个人记录)_生成过去15天前端-CSDN博客

本文链接：https://blog.csdn.net/m0_48338638/article/details/106576943

15天前端学习-第三天(个人记录)

from表单美化
label标签用于给表单元素辅助,比如点击label元素,复选框选中.(浏览器焦点转移到相关控件)
label input(标签元素):checked{}伪类在控件选中时触发 ,可以配合div,图片定位美化checkbox的样式.
(需要先对input元素进行隐藏display:none)
也可以用div+透明度opacity做一个障眼法…(就是控件透明覆盖在div背景图上)
总结:利用label可以隐藏原先的input样式,并使用图片,当label选中时图片发生变化,达到美化的效果.

表单input属性(type):email邮箱 url网址 number数值输入 range滑动条(与昨天的测量条相似)
data日期输入 month日期输入(年,月) week(年,周) time小时分钟
search搜索框 color调出调色板 tel电话号码输入(移动端会默认调出数字键盘)
总结:这些属性可以丰富表单,但其样式可能会需要修改.

输入框联想功能默认(默认值"on")打开,autocomplete="off"可以关闭.
autofocus获取焦点,直接加在input标签上.(刷新页面时会自动聚焦到控件)
required输入不能为空 pattern正则验证
总结:输入框的功能,autofocus应该会用到,可以刷新页面时聚焦到输入框上

method=“post\get” 数据提交方式. enctype提交类型

fieldset 表单内元素分组配合legend定义标题,形成一个区域.
optgroup 定义选项组可用于下拉列表的定义分组.如:数字</>,12,3,4,5

BFC规范块级区域,使其形成一个独立的容器.
触发样式:float,display(inline-block,table-cells,flex),position(绝对定位),overflow(除visible的值)
解决margin叠加问题:可以在两个容器外都加一个容器div,外层div1设置overflow:hidden或display:fixe…
使其形成BFC规范就可以解决
解决margin传递问题(即子盒设置margin-top影响了父盒子的位置)
使父盒拥有bfc的规范就能解决该问题.
解决浮动问题:除了清除浮动也可以给父盒子设置bfc规范.
解决覆盖问题:盒子1(小于盒2)覆盖盒子2,盒子2添加bfc,(该效果还不是很理解其作用)
总结:BFC使一个盒能独立不受外界影响,也不影响外界,使用BFC规范能更好的页面布局,让设定的一些div区域不会因为叠加传递问题而错位…但目前对BFC会产生的副作用有什么还没了解

浏览器的兼容:在代码前加浏览器前缀如-webkit-animation(谷歌的前缀)…(仅了解,应该有浏览器兼容工具可以生成)

transition过度动画
transition-property:过度的值;,比如宽高,设置all为所有.
transition-duration: 1s;过度时间
transition-delay:2s 延迟过度的时间,即设定为2S后开始过度动画(设置为负数则提前执行).
transition-timing-function:过度的行为;(linear匀速,ease缓冲(默认值,逐渐慢),ease-in(加速)等效果),
cubic-bezier()贝塞尔曲线,可以在浏览器的检查里进行调试,然后复制其值设定.
一般用复合写法:transition:1s,2s,linear;
transition理解为当元素发生变化时产生的动画效果.注:不要加在hover上.
总结:过度动画,加在需要过度的元素样式设定上,然后搭配hover设定的鼠标移上后样式的改变可以让界面更生动.
transform变形
transform:translate(x,y)位移, transform:scale(宽,高,(值为一个比例值))缩放这两个的z轴都是3d
transform:rotate旋转(值为角度) 该属性rotatex,y为3d,z为平面
transform:skew斜切(值为角度)正值左倾斜,负值右倾斜
transform复合写法:只能给块级元素添加,变形不会影响其他.,可以添加多个变形,执行为后写的执行,再执行前面.
有时候因为变形后的尺寸导致元素无法移动设定的位置,所以变形执行的顺序需要注意
transform-origin:(1,2)基点的位置,(即旋转开始的点)
总结:配合transition能有不错的效果,让页面的块发生变动,这个可以设定在hover上.
通过transition与背景图片定位,达到图块滑动的效果.

    <style>
        ul,li{margin: 0;padding: 0;list-style: none;}
        ul{width: 480px;}
        ul li{width: 240px;height: 240px;float: left; background: url("check.jpg");
            transition: 0.5s ease-in 0s;}
            /* 设置li的背景位置 */
        ul li:nth-child(1){background-position: 0 0;}
        ul li:nth-child(2){background-position: 240px 0;}
        /* 鼠标移入时背景位置的改变 */
        ul li:hover:nth-child(1){background-position: 0 240px;}
        ul li:hover:nth-child(2){background-position: 240px 240px;}
    </style>
    
</head>
<body>
   
        <ul>
            <li></li>
            <li></li>
        </ul>
</body>

transform的代码与transition的配合,transition让图片动起来.
    <style>
        .box1{width: 500px; height: 500px; border: 1px solid black;position: relative; top: 250px; left: 250px;}
        .box2{width: 200px;height: 200px; background: red; transition: 2s;
        transform-origin: 200px 200px;}
        /* 位移 */
        /* .box2:hover{transform: translate(250px,0);} */
        /* 缩放 */
        /* .box2:hover{transform: scale(2);} */
        /* 旋转 */
        .box2:hover{transform: rotateZ(45deg);}
        /* 斜切 */
        /* .box2:hover{transform: skew(30deg,0)} */
        /* .box2:hover{transform:  translate(250px,0) skew(30deg,0)} */
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>