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>和 ...
随机推荐
- 在 Tomcat 上配置虚拟主机
.Tomcat 服务器的server.xml文件 (1)Tomcat 组件 Tomcat服务器是由一系列可配置的组件构成,其中核心组件是 Catalina Servlet 容器,它是所有其他 To ...
- Win2003 设置远程连接限制数
在开发过程中,很多同事需要连接到一台Win2003服务器,但是连接人数超过了10个,就连接不上了.想设置一下连接限制数,可以如下操作: 1:在运行里面输入gpedit.msc后,弹出"本地计 ...
- Activity的setContentView的流程
最简单的Activity中的内容大致是这样的: public class MainActivity extends Activity { @Override public void onCreate( ...
- JQuery 纵向二级菜单与对齐方式
1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...
- JAVA关键字Volatile的特性
一.简述: 关键字Volatile是JAVA虚拟机提供的最轻量级的同步机制,但是它并不容易完全被正确.完整的理解,以致于许多程序员在遇到需要处理多线程数据竞争的时候一律使用synchronized来进 ...
- ABP官方文档翻译 6.4 导航
导航 创建菜单 注册导航提供者 显示菜单 每一个网络应用都会有一些菜单用来在pages/screens之间导航.ABP提供了通用的基础设施来创建并显示菜单. 创建菜单 应用可以由不同的模块组成,每一个 ...
- 下载vlc遭遇网络劫持
一次偶然的机遇,在公司下载"vlc播放器",下载之后安装完就变成了"搜狗手机助手".而且连续几次下载都是这样,我以为是我安装了搜狗输入法的缘故. ...
- vue中如何获取后台数据
原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...
- Cookie、session和localStorage、以及sessionStorage之间的区别
一.Cookie.session和localStorage的区别 cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cookie ...
- BZOJ 2809: [Apio2012]dispatching [斜堆]
题意:主席树做法见上一题 我曾发过誓再也不写左偏树(期末考试前一天下午5个小时没写出棘手的操作) 于是我来写斜堆啦 从叶子往根合并,维护斜堆就行了 题目连拓扑序都给你了... 说一下斜堆的操作: 合并 ...