CSS
drunk喵咪
学习这件事,不是缺乏时间,而是缺乏努力。
展开
-
动画与过渡的区别
transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果1)动画不需要事件触发,过渡需要。2)过渡只有一组(两个:开始-结束)关键帧,动画可以设置多个...原创 2019-10-29 19:22:00 · 1433 阅读 · 0 评论 -
前端开发规范:命名规范、html规范、css规范、js规范
命名驼峰式命名法介绍(1) Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo(2) Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo文件资源命名1)文件名不得含有空格2)文件名建议只使用小写字母,不使用大写字母。( 为了醒目,某些说明文件的文件名,可以使用大写字母,比如README、LICENSE。 )3)文件名包含多个单词时,单词之间建议使用半角的转载 2020-09-22 16:57:19 · 295 阅读 · 0 评论 -
背景图片
1、背景图片语法background-image:url() 引入背景图片background-repeat:no-repeat 设置背景图片是否重复平铺background-position:left top 设置图片的css背景定位,left代表靠左,top代表靠上简写背景图片语法:background:url(图片地址) no-repeat left top2、背景图片设置Body{background:url(http://www.divcss5.com/img201301/div原创 2020-09-13 20:18:36 · 2571 阅读 · 0 评论 -
清除浮动
1):浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。(2):高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)首先:清除浮动的属性设置clear:/left/right/none/inherit //元素某个方向不能有浮动元素clear:左右两侧不允许浮动,1、给浮动元素下方添加一个空的div,给一系列声明{clear:both;heigth:0;overflow:hidden}2、给浮动元素的父级原创 2020-09-11 10:37:36 · 67 阅读 · 0 评论 -
对话框及三角形
<template> <div class="table-page-btn-list special-column-edit-container" > <div class="content"> <div class="consulting"> <ul> <li v-for="(item,index) in dialogue" :key="inde原创 2020-09-10 17:40:50 · 93 阅读 · 0 评论 -
不同浏览器兼容性问题
页面样式问题1、ie兼容@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { //针对ie div { padding-bottom: 1px; } }具体可以查看IE10 CSS hack,IE兼容问题2、edge@supports (-ms-ime-align: auto) { //针对edge div { padding-bottom: 1px; } }3、火狐 @-moz-docu原创 2020-08-25 18:07:46 · 237 阅读 · 0 评论 -
前端项目中常见的 CSS 问题
重置 button 和 input 元素的背景添加按钮时,重置它的背景,否则在跨浏览器时它的呈现会有所不同。下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮,后者默认会有一个灰色背景。重置背景可以解决这个问题:button { appearance: none; background: transparent; /* 其它样式 */}O...转载 2019-12-05 16:29:39 · 208 阅读 · 0 评论 -
Less
<template> <div class="home"> <div class="form"> <div class="name"> <label for="name" class="biaoqian">姓名:</label> <input typ...原创 2019-11-18 11:03:18 · 242 阅读 · 0 评论 -
移动端自适应
CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整,媒体查询由两部分组分,一个可选的媒体类型,以及若干个css表达式。当媒体类型判断为true时,其中的css表达式被解析。如果媒体查询应用在link中,即使判断结果为flase,样式同样被下载,但是不会应用。1、媒体类型all 使用所有的设备print 适用于打印用纸或打印预览视图screen 主要用于电脑、手机、平板等...原创 2019-08-13 15:01:19 · 165 阅读 · 0 评论 -
html/css3题目
1.请列出核心选择器、层次选择器有哪些核心选择器:id选择器、class选择器、标签选择器、逗号选择器、普遍选择器层次选择器:子代选择器、后代选择器、下一个兄弟选择器、之后所有兄弟选择器2.块级元素的显示与隐藏,写出两种方法,并说明区别display:none/block 元素隐藏之后,不占用原来的位置visibility:hidden/visible 元素隐藏之后,占用原来的位置3....原创 2019-08-15 16:47:08 · 203 阅读 · 0 评论 -
动画与变形
1、动画通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。 @keyframes 动画名称{ from{ } to{ } }@keyframes 动画名称 { 0% { left:0; } ... 100% { left:1600px; } ...原创 2019-08-12 16:58:54 · 165 阅读 · 1 评论