![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
livezsw
这个作者很懒,什么都没留下…
展开
-
less 安装 引入 使用
【代码】less 常用语法。原创 2022-08-19 15:18:53 · 481 阅读 · 0 评论 -
scss 常用语法
变量、混合器及引入 $width: 100px; // 用$定义变量 nav { width: $width; // 引用变量 } @mixin div-back($color) {//用 @mixin 定义一组css并且可以传入变量 background: $color; } .item { @include div-back(red);//使用@include 引入混合器 } 嵌套及父选择器标识符& article { a{ colo.原创 2021-03-30 16:53:22 · 105 阅读 · 0 评论 -
元素占满剩余空间
假设元素c(height为百分百或者vh)包含a和b他们垂直排列,b需要占满剩余空间(高度自适应),有三种情况: 1.a的高度固定,b占满剩余空间,解决方式设置b的height为calc(100%-a的height),或者使用position的top和bottom特性或者使用绝对地位和margin特性,建议使用calc计算属性(减号两边要有空格) 2.a的高度不固定(a是个集合,里面的子元素高度是要固定的,但是每次多少个子元素不是固定的),b占满剩余空间,用js动态计算: ...原创 2020-12-16 15:49:00 · 1352 阅读 · 1 评论 -
文本两端对齐
/*整段文本两端对齐*/ /*.xx{ text-align:justify; text-align-last:left; text-justify:distribute-all-lines; }*/ /*一行文本两端对齐*/ /*#dd:after{ content:""; display:inline-block; width:100%; }*/ ...原创 2020-12-07 10:19:27 · 136 阅读 · 1 评论 -
flex布局总结
display:flex 指定HTML元素盒子类型为弹性 flex-direction 子元素的排列方向row|column justify-content 子元素在主轴方向上的对齐方式center|space-between|space-around|flex-start|flex-end align-items 子元素在侧轴方向上的对齐方式 flex-wrap 是否换行 align-content 修改...原创 2020-12-07 10:17:50 · 163 阅读 · 1 评论 -
移动端常用头部标签
<!DOCTYPE html> <html> <head> <title></title> <!-- 网页格式和内容编码格式 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 删除默认的苹果工具栏和菜单栏。 --> <meta name="apple-mobile-web-app-capab.原创 2020-08-27 20:08:36 · 280 阅读 · 0 评论 -
测试position和margin的百分比
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } /*测试top百分比*/ .box { backgr.原创 2020-08-27 20:01:15 · 280 阅读 · 0 评论 -
左边固定,右边自适应布局模板
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title></title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .head { .原创 2020-08-27 09:18:58 · 122 阅读 · 0 评论 -
多行省略展开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { m.原创 2020-08-24 16:16:57 · 166 阅读 · 0 评论 -
垂直水平居中的几种方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } /*越往下兼容性越不好*/ .p1 { width:.原创 2020-08-24 15:51:34 · 224 阅读 · 0 评论