css的一些复习
css,全称Cascading Style Sheets,层叠样式表。
css选择器是从右往左解析的,解析速度会比较快。
选择器
选择器权重
!important 优先级最高
元素属性 优先级高
相同权重 后写的生效
行高
留坑
背景
背景颜色
渐变色背景
多背景叠加
背景图片和属性(雪碧图)
background:red url(image.png);这里不需要逗号
background:no-repeat;还可以选择repeat-x,repeat-y。
background-position:center center;当然也可以用px来确定位置。
background-size:100px 50px;
多分辨率适配:大图缩小(background-size
base64 和 性能优化:background: url(base64)
使用base64减少了http请求,但是文件的体积会变大,浏览器也多了一个解读base64的任务,所以不能一味地认为base64就是优于直接放图片地址。小图片,比如loading图就比较适合base64。而且一般转base64会放在构建的时候做。
边框
边框的属性: 线型 大小 颜色
背景图
边框衔接的原理:斜切的(三角形
.box2{
height:0px;
border-bottom: 10px solid red;
border-right:10px solid transparent;
border-left:10px solid transparent;
width:0px;
}
.box3{
height:0px;
border-bottom: 10px solid transparent;
border-right:10px solid red;
border-top:10px solid transparent;
width:0px;
}
overflow
visible:内容会超出容器,无滚动条
hidden:超出内容被隐藏,无滚动条
scroll:有滚动条
auto:溢出时有滚动条
换行
overflow-wrap:normal;
word-break:normal;
white-space:nowrap;//这个可以使长内容不换行
一些装饰性属性
字重(粗体) font-weight
斜体 font-style:italic
下划线 text-decoration
指针 cursor
hack
checkbox的美化
- label id
- 隐藏input
- :checked + label
input+label{}
input:checked + label{}
布局
display:block/inline/inline-block
block有独立宽高,默认情况下占据一行
inline默认不会占据一行
inline-block对内表示为block,可以设置宽高,对外表示为inline,可以与其他元素排在一行。
position:static/relative/absolute/fixed
static静态布局,最基本的定位方式,也就是没有定位。
relative相对定位,相对于其原来的位置进行定位。
absolute生成绝对定位的元素,相对于static以外的第一个父元素进行定位,脱离文档流。
fixed生成绝对定位的元素,相对浏览器窗口进行定位。
z-index:只在定位元素上生效(除了static),相当于一条z轴,值越高则再屏幕的越上面。下拉单和遮罩使其应用。
表格布局 table
flexbox
- 一种现代的布局语法
- 弹性盒子
- 盒子是并列的
- 需要指定宽度
- 兼容问题
flex-direction控制flex项目沿着主轴的排列方向,row || column || row-reverse || column-reverse。
flex-wrap可以控制flex容器内是否换行:nowarp不换行,wrap换行,wrap-reverse换行但是是反向的。
flex-flow是以上两个属性的速记属性,类似于border。
justify-content类比text-align,flex项目在主轴上的对齐方式,flex-start,flex-end,center,space-between,space-around
flex的属性很多,未完待续。
float
- 元素会浮动
- 元素脱离文档流
- 元素不脱离文本流
可以联想到文本环绕图片的效果,当然这就是float本来的用途,只不过我们用float来布局而已
清除浮动的方法
.clearfix::after{
content:'aaa';
clear:both;
display:block;
height:0px;
visibility: hidden;
}
//注意一步一步的变化过程
//content可以是任意内容,可以是空格,这里设置文字是为了观察变化的过程
//为了触发ie的hasLayout可以再添加一行
.clearfix { *zoom:1; }
inline-block布局
inline-block布局也是一种很不错的布局方式,可以像文本一样排block元素,不用清除浮动,但是存在间隙,可以通过设置父元素的字体大小为0解决这个问题。
响应式布局
折行:把横向的变成纵向的,如原来inline-block实现的一行东西,可以改成block加上居中实现纵向排列。
隐藏:在移动端隐藏一些不是很重要的内容,如广告和个人信息。
具体方法:rem/viewport/media query
css的一些复习的更多相关文章
- css重点章节复习—布局-边框-边距-浮动 (部分)
css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...
- css部分的复习
常见的块元素有<h1><h6>.<p><div><ul><li><ol>等,其中<div>标记是最典型的 ...
- HTML、CSS、JS 复习——序
HTML在MVC中担任着M的角色.由HTML组成的节点称之为HTML DOM.要想成为一流的大神,就必须能分分钟建立起一个强大的HTML DOM.而要做到这点,就必须了解甚至精通HTML. CSS在M ...
- CSS的简单复习总结
如果说网页是人的话那么CSS就是化妆品了哈哈哈,所以网页离不开CSS的装饰.id选择器和Class选择器 二者都是用来选择元素进行装饰的,我个人理解是类选择器包含了id选择器,class选择器不 ...
- CSS基础知识复习
1. CSS优先级 标签内部属性 style定义的CSS > 文档内定义的css > 引用外部CSS文件 2. CSS选择器类型 . 标签选择器 . 类选择器(使用.做标识) . ID选择 ...
- HTML5+CSS3整体回顾
http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 《CSS权威指南》基础复习+查漏补缺
前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...
- HTML和CSS的复习总结
HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和 ...
随机推荐
- python_如何让字典保持有序?
案例: 某编程竞赛系统,对参赛选手编程解题进行计时,选手完成题目后,把该选手解题用时记录到字典中,以便赛后按选手名查询成绩(答题时间越短,成绩越优秀) {'lili':(1,43),'yuyu':(2 ...
- HTML学习(一)
文本输出/超链接 <!--/* * @<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体.h1最大,h6最小 * @< ...
- JS与ajax遍历list
示例: <script> <c:forEach var="yanan" items="${yananList}"> ...
- Linux修改主机名脚本-不重启-支持RedHat、SUSE
需要用脚本修改主机名,涉及RedHat.SUSE系统,并且要求修改立即生效且不重启,下面就是我的脚本. 使用脚本的方法如下: 1 首先创建一个脚本文件,假如命名为ModifyHostname.sh: ...
- 关于支付时rsa加密解密的函数
<?php //加密 function _checkPadding($padding, $type) { if ($type == 'en') { switch ($padding) { cas ...
- JAVA中正则表达式常用的四个方法
JAVA中正则表达式处理字符串的四个常用方法:匹配.分割.替换.截取.其跟字符串的常用函数相似,但是使用正则表达式会更简单.更加简洁.下面是具体的例子: public class TestRegex ...
- 02_HTML5+CSS详解第二天
html5大纲分析工具:https://gsnedders.html5.org/outliner/ <section> <h1>HTML部分</h1> <se ...
- C语言的格式符
转至:http://blog.csdn.net/zhanzheng520/article/details/10434791 一.格式符含义 1.d格式符:按十进制格式输出. %d ...
- CSS :befor :after 伪元素的妙用
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
- pip相关工具使用小结
最近写taffy的时候用到了两个pip相关的小工具. 一个是pip-review批量更新lib库,一个是pipreqs生成基于项目的requirements.txt. 1. pip相关命令 #更新单个 ...