html/css
掌握基本html和css
zayzy
安心努力
展开
-
translate,transform和transition的区别与联系
translate是transform的属性之一transfrom的属性有:translate(平移),rotate(旋转),scale(等比例缩小放大)等;transition 是在一定时间之内,一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果,css3的属性语法 transition:需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行参考链接:三者区别...原创 2021-08-29 17:32:29 · 802 阅读 · 0 评论 -
静态+绝对+相对+固定定位
一.概念定位:position:static/absolute/relative/fixed1.static 静态定位(文档流布局)默认2.absolute:绝对定位3.relative:相对定位(不脱离文档流)4.fixed:固定定位二.看谁定位绝对定位:定位元素由left,right,top,bottom设置位置。绝对定位元素在没有相对父级定位参照时,统一相对于浏览器窗口左上角定位;相对定位:相对于自身标签定位,让其绝对定位子元素相对于该标签定位;固定定位:永远相对于浏览器窗口定位三原创 2021-06-02 21:41:52 · 183 阅读 · 0 评论 -
解决margin-top的值传递问题
值传递问题:子级的margin-top值给了父级,导致父级的margin-top值显示的效果成了子级的值,同时子级上边紧贴父级上边。解决方式1:在父级中添加border例如:border:1px solid #00FFFF;解决方式2:在父级中添加padding例如:padding:1px;解决方式3:推荐使用。例如:overflow: hidden;下面举一个例子,A为父级,B为子级,部分CSS代码。 #A{ width:300px; height:30原创 2021-06-01 22:14:14 · 483 阅读 · 0 评论 -
盒模型分析
盒模型的组成:content,padding,border,margin*padding:盒子的内边距,相当于填充物;*border 盒子的边框*margin 盒子的外边距,用来设置标签之间的间距大小; 首先来举一个例子,这只是部分代码: #one{ /* 真实看到的为502 */ width:480px; height:480px; background-color: #F0F8FF; border: 1px dashed #0原创 2021-06-01 21:42:07 · 109 阅读 · 0 评论 -
form表单
form表单(表单域)表单:用来提交表单中的表单元素数据给后台服务器的。action:用来设置前端点击提交按钮,需要提交给后台的地址;method:网络请求的方式,get和post,(由后台决定)。get:请求速度快-效率高,但是有长度限制(数据大小);post:请求安全性高,没有数据大小的限制。<form action="https://www.baidu.com/s" method="get">...</form>表单元素下拉列表 select->opti原创 2021-06-17 08:40:41 · 97 阅读 · 0 评论 -
常见不熟悉的css样式
1.opacity:透明度2.outline:none 处于可编辑时输入框隐藏3.<;和>;表示大于小于原创 2021-06-01 21:21:17 · 53 阅读 · 0 评论 -
百分比布局+视图布局
1.百分比布局:相对于父级标签宽高百分比;(父级标签必须有绝对的宽高)2.vh、vw视口布局:将当前浏览器窗口宽高平均分成100等分,占多少等分;原创 2021-06-02 21:51:30 · 94 阅读 · 0 评论 -
overflow:hidden的作用
1.隐藏div的溢出 当子级元素的高度或宽度超过父级元素时,超出部分就会隐藏。如下图:子级粉块超出父级黑块,若使用overflow后,则隐藏超出部分。2.解决margin-top值传递问题 点击此处了解值传递问题3.清除浮动 和clear:both作用相同,在父级元素中添加overflow,子元素的浮动效果被清除,解决塌陷问题。...原创 2021-06-02 21:07:25 · 265 阅读 · 0 评论 -
清除浮动.
方式一:在浮动元素的父级,添加overflow:hidden方式二:在造成浮动影响的元素下写一个clear兄弟元素,#clear中写clear:both。清除以上兄弟元素左右浮动造成的影响。<div id="head"></div> <div id="wrap"> <div id="A">A</div> <div id="B">B</div> <!-- 方式二:在浮动元素以下添加一个无效标签,原创 2021-06-02 21:30:49 · 106 阅读 · 0 评论 -
浮动问题分析
1.一个标签元素,不管是块还是行,默认不设置的情况下,都在文档流(标准流)中显示;2.如果设置成浮动元素,则该标签在浮动层(会脱离文档流),和文档流不在同一个层级;3.浮动元素:floatfloat:left;相对于父级元素向左靠齐float:right;相对于父级元素向右靠齐如何判断一个浮动元素的位置:1.如果一个浮动元素的上一个兄弟元素是文档流元素,则该浮动元素向上一个兄弟元素底部靠齐2.如果一个浮动元素的上一个兄弟元素也是浮动元素,则该浮动元素与上一个兄弟元素同级,都在浮动层;注意原创 2021-06-02 21:25:19 · 72 阅读 · 0 评论