css
选择器优先级,标签>id>class
权重 id>class>标签
只记录能想到的以免遗忘:
1.字体css可继承
2.表格:表格细线的合并,表格单元格合并,单元格内容水平居中,首行和首列的标签,这些应该够了
3.边框.背景属性
border:dotted/solid 5px #f00;
可拆分成三个来写
border-style:solid;
border-width:5px;
bogrder-color:#00f; css由上至下执行
背景属性:
背景图片div background-imge:url(1.png);//相对路径
挡图片小于div背景大小时会默认横向铺满和纵向铺满;
background-repeat:repeat-x/y/norepeat 横纵不铺满
background-position:10px 20px 距离左边值,上边值 控制图片方位
background-color:#ccc;控制背景颜色
希望背景图片固定不随滚动轴滚动
background-attachment:fixed;
background:blue url("xxx.jpg") no-repeat fixed 10px 20px;//颜色 地址 不重复 固定 左边 右边
4.隐藏,滚动条,zindex属性
内容超出div的情况,超出部分隐藏
overflow:hidden//不占位置
overflow:auto//超出部分自动产生滚动条,一般使用此项
overflow:scroll//不论是否超出都产生滚动条
visibility:hidden;占据页面位置,块的隐藏
position:absolute;脱离文档流
5.鼠标,列表,垂直居中属性
cursor:pointer;
cursor:wait;
cursor:help; <ul type="">尽管某些html属性可修改外观,但是我们不会去改html,而是去改css
list-style-type:none/disc/circle;空,实心圆,空心圆
列标签加图片
list-style-image:url("1.jpg");
垂直居中属性
img{
vertical-align:middle/text-top/text-bottom;垂直居中,置顶,置地
}
6.行内元素和块级元素
块级元素:div,
div{
height:100px;
width:100px;
border:solid 1px red;
}
块级元素特点:
1.块级元素的内容,默认显示在块的左上角
2.块元素,单独占满一行.(文档流,)
常用的块级元素:
div
p
h1-h6
form
menu
pre
table
三种列表
olli ulli dldt
行内元素
<span>只显示文字内容</span>//1.可存在于同一行2.设置高度宽度无效
常用的行内元素
span
a
lable
img
textarea
strong
input
select
7.行内元素和块级元素相互转换
块级元素->行内元素 display:inline;
行内元素->块级元素 display:block;
display:inline-block;既有行也有块元素
8.浮动
块级元素的并排,浮动
<div id="d1">1</div><div id="d2">1</div><div>3</div>
#d1{
float:left;
}
#d2{
float:left;
}
第一个div往左边漂浮,第二个跟在第一个后面向左面漂浮
若前一个div有浮动,会影响后一个div的css样式所以要清除被影响div的左边浮动
清除左边浮动
clear:left;
clear:right;清除下一个div的浮动影响
同时清除左右
clear:both;
9盒子模型
上下左右边框
#d1{
width:100px;
height:100px;
boder:solid 1px red;
border-bottom/top/left/right
}
设置内边距
padding:10px;上下左右
padding:10px 2px;上下左右
padding:1px 2px 4px;//上左右下
padding:1px 2px 4px 2px;上下左右
padding-top left right bottom
设置之后div会变大,相应的div要变下,从下,右边开始减少
是指外边距
margin:10px;上下左右
margin:10px 2px;上下左右
margin:1px 2px 4px;//上左右下
margin:1px 2px 4px 2px;上下左右
margin-top left right bottom 同时支持行内元素
CSS定位
staitc :默认,和不设置情况一样
relative
1,相对定位没有脱离文档流,会单独占满一行,他的方位会受到top left bottom right影响
2.相对于块的最近的父元素定位,会被兄元素占位挤开,不管父元素是否定位
3.可设置浮动,依旧会被兄元素占位挤开
absolute:脱离文档流
1.脱离文档流,不会单独占满一行,他的方位只会收到top.left,bottom right影响,
2.一个块的top,left,bottom,right是相对于什么?
1)如果他的父元素做了定位,就相对于的是最近的一个父元素
2)如果父元素没有定位就相对于body定位
fixed :固定定位
1.脱离文档流,相对于body当前页面,不会单独占满一行
2.top left right bottom 始终相对于的是body top.left right bottom 只有设置了定位(相对,绝对,固定)的时候才有用
css3圆角,阴影,背景铺满
#d1{
width:100px;
height:100px;
border:solid 2px red;
border-radius:10px;//表示以此间距进行圆角处理,100%为圆
border-radius:10px 20px;//左上和游侠是10,右下和坐下时20
border-radius:10px 20px 0px ;//左上是10,右下是0 忧伤和坐下时20
border-radius:10px 0 0 0 ;//只显示左上的10圆角 box-shadow:10px 10px 10px #ccc;//阴影的横向,纵向,半径,颜色 }
body{
background-img:url("1.png");
background-repeat:no-repeat;
background-size:cover;//会铺满该元素
}
css3旋转,倾斜,位移,平滑过渡,缩放
*{
padding:0px;
margin:0px;
}
#d1{
widht:150px;
height:150px;
border:solid 2px red;
background-color:#fc9
position:200px;
left:200px;
transform:rotate(30deg) scale(0.5) translate(20px,30px) skew(30deg,0deg);//沿顺时针旋转30度,-30deg则沿逆时针旋转30度--scale(0.5)放大or缩写n倍;
//--位移,x,y距离,--倾斜角度横竖
}
//平滑过渡动画,当鼠标放到div上
#d1:hover{
transform:rotate(30deg) scale(2);
transtion:transform/all 1s ease/ease-in/ease-out;//所有属性 时长 缓慢 渐渐
}
css3自定义动画--//浏览器可能不兼容 加个前缀
//-webkit-:兼容谷歌浏览器 moz- ms-ie o- opera 明白了
#d1{
position:absolute;
top:100px;
left:100px;
width:750px;
height:438px;
-webkit-animation:donghua 20s infinite/2 ease;//动画名称,播放时长,播放次数/一直播放/2次 播放快慢
}
@keyframes donghua{
0%{
transform:translateX(0deg);
}
50%{
transform:rotateX(180deg);
}
100%{
transform:rotateX(360deg);
}
}
css3渐变效果
线性渐变
#d1{
widht:300px;
height:200px
border:solid 1px red;
background:-webkit-gradient(linear,left top,left bottom,from(blue) to(red),color-stop(0.4,#fff),color-stop(0.4,#333));//-webkit-谷歌浏览器支持写法,填充渐变色,中间加个白色色标过度,色标可加多个
}
径向渐变
#d1{
widht:300px;
height:200px
border:solid 1px red;
background:-webkit-gradient(radial,center center,0,center center,200,from(blue),to(red),color-stop(0.4,#fff));
} 10响应式布局
同一个页面在不容的设备看到的是不同的效果
<div id="header">头部</div>
<div id="main">
<div id="main-left">主题-左边</div>
<div id="main-center">主题-中间</div>
<div id="main-right">主题-右边</div>
</div>
<div id="footer"></div> 通过
@media screen and (min-width:900px)//如果你的pc最小宽度是900px;
@media screen and (max=width:600px)//手机上看
<style type="text/css">
/*屏幕宽度大于900的时候*/
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header
{
height:100px;
border:solid 1px red;
margin:0px auto;
}
#main
{
margin:10px auto;
height:400px;
}
#footer
{
margin:0px auto;
height:100px;
border:solid 1px red;
}
@media screen and (min-width:900px)
{
#header,#footer
{
width:800px;
}
#main
{
width:800px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:394px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
}
@media screen and (min-width:600px) and (max-width:900px)
{
#header,#footer
{
width:600px;
}
#main
{
width:600px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:396px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
display:none;
}
}
@media screen and (max-width:600px)
{
#header,#footer
{
width:300px;
}
#main
{
width:300px;
height:400px;;
}
#main-left
{
display:none;
}
#main-center
{
width:300px;
height:400px;
border:solid 1px red;
}
#main-right
{
display:none;
}
}
</style>
</head>
<body>
<div id="header">头部</div>
<div id="main">
<div id="main-left">主题-左边</div>
<div id="main-center">主题-中间</div>
<div id="main-right">主题-右边</div>
</div>
<div id="footer"></div>
</body>

CSSの神小结-简单备忘一下(亲测可用)的更多相关文章

  1. SQL server数据库备份还原问题备忘(亲测有效)

    问题一:SQL server数据库备份还原方法 http://www.cnblogs.com/zgqys1980/archive/2012/07/04/2576382.html 问题二:无法执行 BA ...

  2. jdbc连接数据库以及crud(简单易懂,本人亲测可用 有源代码和数据库)

    今天呢!重新整理了一边jdbc的相关操作:现在来说对于很多框架都使用mybatis和hibernate来操作数据库 ,也有很多使用自己简单封装的ssm或者是其他的一些框架来操作数据库,但是无论使用哪一 ...

  3. Spring boot 注解简单备忘

    Spring boot 注解简单备忘 1.定义注解 package com.space.aspect.anno;import java.lang.annotation.*; /** * 定义系统日志注 ...

  4. CSS响应式:根据分辨率加载不同CSS的几个方法,亲测可用

    有时候你需要把同一个页面在手机和pc同时打开,其中有一个办法就是判断不同分辨路加载不同的css 小编总结了几种分别加载css的方法: 1.比较复杂的使用js判断加载不同css (亲测可用) 但是这种方 ...

  5. 阿里云服务器centos7,docker部署mysql+Redis+vue+springboot+Nginx+fastdfs,亲测可用

    一.购买云服务器 我是今年双十一期间在阿里云购买的服务器, 简单配置2核_4G_40G_3M,三年用了不到800块,不过当时我记得腾讯云更便宜,个人感觉,阿里的云服务器更加的稳定, 毕竟身经百战, 经 ...

  6. IntelliJ IDEA2017 激活方法 最新的(亲测可用)

    IntelliJ IDEA2017 激活方法(亲测可用): 搭建自己的授权服务器,对大佬来说也很简单,我作为菜鸟就不说了,网上有教程. 我主要说第二种,现在,直接写入注册码,是不能成功激活的(如果你成 ...

  7. [转]QT子线程与主线程的信号槽通信-亲测可用!

    近用QT做一个服务器,众所周知,QT的主线程必须保持畅通,才能刷新UI.所以,网络通信端采用新开线程的方式.在涉及到使用子线程更新Ui上的控件时遇到了点儿麻烦.网上提供了很多同一线程不同类间采用信号槽 ...

  8. 分享几个IntelliJ IDEA 2019 jihuo码(pojie码、zhuce码),亲测可用

    文章转载自:https://www.jiweichengzhu.com/article/eb340e382d1d456c84a1d190db12755c 如果还有问题,加群交流:686430774(就 ...

  9. C#读取Excel设置(亲测可用)

    OpenFileDialog openFD = new OpenFileDialog(); openFD.FileName = ""; openFD.Filter = " ...

随机推荐

  1. AI人工智能系列随笔:syntaxnet 初探(1)

    人工智能是 最近的一个比较火的名词,相信大家对于阿尔法狗都不陌生吧?其实我对人工智能以前也是非常抵触的,因为我认为机器人会取代人类,成为地球乃至宇宙的霸主,但是人工智能带给我的这种冲击,我个人感觉是欲 ...

  2. 小计C/C++问题(1)

    本文主要记录了以下2个问题: 表达式中,有符号变量和无符号变量的转化问题 C/C++中,main函数执行完以后,还执行了什么语句? 这里简单的说一下我的环境:Win7 32位,Qt creator 5 ...

  3. 错误“Unexpected namespace prefix &quot;xmlns&quot; found for tag LinearLayout”的解决方法(转)

    (转自:http://blog.csdn.net/bombzhang/article/details/12676789) 有一次升级开发工具后发现xml脚本出现错误“Unexpected namesp ...

  4. 淘宝自己的前端框架KISSY(类似jquery) - 简易指南

    KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架. 具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. 在以下方面具有一定优势: A.拥有大量的中文文档: ...

  5. truncate 命令删除恢复

    truncate命令可以一次性删除当前表中所有记录并且不留任何日志,同时这个表的ID就自动初化从1开始,今天我就来给大家尝试一个利用truncate清除记录之后恢复过程. 实际线上的场景比较复杂,当时 ...

  6. Grails教程

    1简介- Reference DocumentationVersion:null Table of Contents 1.1Grails 2.0有那些新特性?1.1.1面向开发的特性1.1.2核心特性 ...

  7. Vmware虚拟机安装Ubuntu 16.04 LTS(长期支持)版本+VMware tools安装

    今天用VMware虚拟机安装了Ubuntu 16.04,过程用点繁琐,顺便又安装了VMware tools,这样就可以全屏显示Ubuntu系统了,下面是具体的安装过程! 第一步:准备工作 1.下载Ub ...

  8. WTL--SDI框架分析

    创建SDI产生的基本类:CMainFrame,CAboutDlg和CWTLView(WTL为项目名). 由此可见,不同于MFC,WTL少了文档类,它的结构就只有简单的窗口类和视图类,而至于串行化(MF ...

  9. THUSC2016 游记

    浑浑噩噩地就出发了,只记得可以翘课,不知道自己要干什么去. Day 0    5点起床,到潮汕机场坐飞机.第一次坐飞机非常不爽起飞和降落时的加速度……终于还是转转地铁.动车在下午4点左右抵达目的地,西 ...

  10. python第十天

    函数 1.函数:完成特定功能的代码块,作为一个整体,对其进行特定的命名,该名字就代表函数 在现实中,很多问题要通过一些工具进行处理==>可以将工具提前生产出来,并命名==>通过名字就可以找 ...