css常用样式汇总记录
1 div盒子样式居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
1.1 div盒子水平居中
margin:0 auto;
2 清除浮动
2.1 标签法
简单,结构性差
clear: both;
部分浏览器支持flow-root属性
display:flow-root;
2.2 overflow属性
简单隐藏元素,如果使用hidden,溢出的元素无法显示
overflow:hidden;
/*hidden| auto| scroll 都可以实现。*/
2.3 after伪元素清除浮动
给需要去除浮动的盒子的父盒子添加clearfix属性
推荐使用
.clearfix:after { content: "";display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
.clearfix::after{content:"";display:table;clear:both;
}
2.4 双伪元素清除浮动
给需要去除浮动的盒子的父盒子添加clearfix属性
推荐使用
.clearfix:before,
.clearfix:after { content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}
3 禁止手机端缩放
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
暂时写到这,更新ing 3.1
4 色相hsl(270,60%,70%)
a:hover悬停
a:active活跃
rgb相互转换十六进制
推荐网站
webfx.com/web-design/hex-to-rgb
5 字体font-family
Serif和sans-serif 衬线和无衬线 serif sans-serif
Script Fonts 斜线请柬cursive
Decorative Fonts 装饰字体cursive fantasy
Monospace Fonts 单行字体monospace
引入字体文件@font-face
字体网站fonts.google.com
6 清除浮动
.clearfix::after{content:"";display:table;clear:both;
}
display:flow-root;
7 The Box Model Fix
html{box-sizing : border-box;
}
*,*:before,*:after{box-sizing:inherit;
}
position
static relative absolute fixed sticky
8 flex 轴
flex-container父元素 flex-item
<div class="container"><div>flex item</div>
</div>
.container{display:flex;//不会跨越盒子宽度display:inline-flex//跨越盒子宽度
}
flex-direction决定轴方向
row row-reverse column column-reverse
flex-wrap
wrap 拆行或拆列 no-wrap不拆行或拆列
flex-flow
设置flex-item大小
flex-basis初始大小
flex-grow项目将如何展开
flex-shrink 决定物品收缩方式
flex:grow shrink basis
flex:0 1 100px
flex对齐
justify-content space-between center
align-items
.box{display:flex;align-items:center;justify-content:center;
}
9 grid 行 列
grid container显式 隐式
grid-template-columns
grid-template-rows
grid-auto-columns
grid-auto-rows
grid-column
grid-row
单位 fr
repeat(3,1fr)
gap 间隙
高级选择器
p:first-child{}
p:last-child{}
first-of-type
last-of-type
响应式
max-width:800px;
width:85%;
图像铺满盒子不重复
.background{background-repeat:no-repeat;background-size:100% 100%;//background-size:cover;//background-position 显示图片位置,top right left 可以自己试试
}
10 媒体查询
@media screen and (max-width:800px){h1{font-size:16px;}
}
宽度断点
@media (width:360px){}
@media (min-width:360px) and (max-width:800px){}
/* Responsive
------------------------------------*/
@media screen and (min-width:750px){header, footer {text-align: center;}.project-item img {float: left;margin-right: 20px;}.job-item {display: grid;grid-template-columns: 1fr 2fr;column-gap: 20px;}.contact-list {display: flex;justify-content: center;}
}@media screen and (max-width:749px){h1 {font-size: 75px;line-height: 0.9;margin-bottom: 20px;}h2 {line-height: 1;}.contact-list a {padding: 5px;}
}
先到这3.19
多行文本超出显示省略号
/* 多行文本超出显示省略号 *//* 溢出隐藏 */overflow: hidden; /* 超出文本显示省略号 */text-overflow: ellipsis;/*文本需要显示的行数 */-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;
单行文本显示省略号
/* 单行文本显示省略号 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap; //强制不换行
css常用样式汇总记录相关推荐
- dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层 头部:header --用于头部 主要内容:mai ...
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
- html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头 实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
- css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...
- 1-2 CSS常用样式笔记
文章目录 CSS常用样式 字体属性 文本属性 盒模型属性 宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用 清除默认样式 高度height应 ...
- css常用样式(文字样式、边框样式、背景样式)
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
- Day-1 HTML基本标签和CSS常用样式
实训打卡第一天,学的不错,淦-----哈哈哈 HTML基本标签 基本标签:前端页面超链接的使用:字体的颜色和字体的大小.形式:还有就是页面图片.音频和视频的导入. <!DOCTYPE html& ...
- Oracle常用函数汇总记录
Oracle常用函数汇总记录 一.SUBSTR 截取函数 用法:substr(字符串,截取开始位置,截取长度) //返回截取的字, 字符串的起始位置为1,截取时包含起始位置字符 1.SUBSTR( & ...
最新文章
- centos7命令记录
- boost::hana::test::TestGroup用法的测试程序
- java 设计模式_快速上手Java设计模式之简介
- CRM exception when customizing download is executed in ERP due to empty table gt_crm
- 企业一般用php还是js,网站开发用php还是js
- 函数的自执行,变量提升和函数提升
- java实现extended smtp_java实现发送邮件(SMTP)
- Hibernate hql getHibernateTemplate()常用方法汇总
- npm 更换插件版本_Node CLI 工具的插件方案探索
- 数独基本规则_数独专题一:幼儿数独启蒙
- 业务人员自助BI分析不够用,还要自助数据准备?
- springboot属性注入转化为对象
- python免费网课-python网课资源
- -1交替c语言代码,排序(1)---------选择排序(C语言实现)(示例代码)
- java 环境配置(详细教程)
- 20201022-成信大-C语言程序设计-20201学期《C语言程序设计B》C-trainingExercises05
- javascript实现常用的设计模式
- 【观察】“专精特新”数智化国产替代,为何首选用友U9cloud?
- 开源解决方案搭建统一日志平台
- ;按F11立即备份晓亮的电脑操作记录并打开记录.AU3 (AutoIt)