-
FLAG:阴影效果。
查看全部 -
FLAG:选择器
实例（性别选择）
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <form action="#"> <!--表单标签--> <div class="wrapper"> <!--第一个块状元素(容器)--> <div class="box"> <!--子元素块状元素--> <!--单选框radio checked为选中状态--><!--input标签后紧跟span标签--> <input type="radio" checked="checked" id="boy" name="1" /><span></span> </div><!--子元素块状元素结束--> <label for="boy">男</label><!--label标签 ，for对应input的id名称--> </div> <div class="wrapper"> <!--第二个块状元素(容器)--> <div class="box"> <!--子元素块状元素--> <!--单选框radio checked为选中状态--><!--input标签后紧跟span标签--> <input type="radio" id="girl" name="1" /><span></span> </div> <label for="girl">女</label> </div> </form> </body> </html>
/*父元素 表单标签样式*/ form { border: 1px solid #ccc; /*边框为1像素黑色实线*/ padding: 20px; /*padding填充为上下左右20像素*/ width: 300px; /*宽为300像素*/ margin: 30px auto; /*外边界上下为30像素 左右居中*/ } /*第一个和第二个div块状元素样式*/ .wrapper { margin-bottom: 10px; /*外边界的下边界都为10像素*/ } /*两个类名为box的div子元素块状元素样式*/ .box { /*由块级元素block显示为内联块状元素inline-block:同时具备内联块状元素特点(与其他元素在同一行上)，在这里即为单选框和label标签在同一行上*/ display: inline-block; width: 30px; /*宽为30像素*/ height: 30px; /*高为30像素*/ margin-right: 10px; /*外边界的右边界为10像素*/ position: relative; /*设置position的相对定位relative，将子元素div容易作为参照定位的元素*/ background: orange; /*背景颜色为橙色*/ vertical-align: middle; /*垂直居中*/ border-radius: 100%; /*圆角效果 可能是100%匹配input标签的单选框*/ } /*两个类名为box的div子元素块状元素下的子元素input样式*/ .box input { opacity: 0; /*opacity是不透明度的意思，此处不透明度为0，则是全透明，看不到input的单元框*/ position: absolute; /*设置position的绝对定位absolute，以父元素div为参照*/ top:0; /*相对div父元素的顶部距离为0，即贴紧div的顶部*/ left:0; /*相对div父元素的左边距离为0，即贴紧div的左部*/ width: 100%; /*盒子的内容部分的宽度为其父元素的宽度*/ height:100%; /*盒子的内容部分的高度为其父元素的宽度*/ z-index:100;/*使input按钮在span的上一层，不加，点击区域会出现不灵敏*/ } /*两个类名为box的div子元素块状元素下的子元素span样式*/ .box span { display: block; /*显示为块状元素*/ width: 10px; /*宽为10像素*/ height: 10px; /*高为10像素*/ border-radius: 100%; /*圆角效果，*/ position: absolute; /*设置position的绝对定位absolute，以父元素div为参照*/ background: #fff; /*背景为白色*/ top: 50%; /*距离父元素的顶部和左部均为50%*/ left:50%; margin: -5px 0 0 -5px; /*上右下左的外边界*/ z-index:1;/*设置元素的堆叠顺序*/ } /*+是css的相邻选择符，是相邻兄弟选择器，选择紧接在两一个元素后的元素，且二者有相同的父元素*/ input[type="radio"] + span { opacity: 0; /*没有checked标签的 不透明为0，则为全透明*/ } input[type="radio"]:checked + span { opacity: 1; /*有checked标签的 不透明为1，则为显示一个白色的圈*/ }查看全部 -
css盒子模型
box-sizing:content-box(默认) | border-box | inherit
伸缩布局
1.创建flex容器 .flexcontainer{ display: -webkit-flex; display:flex; }
2.flex-direction: row(默认，行) | column(列)
3.主轴是水平方向，通过align-items设置；主轴是垂直方向，通过justify-content设置
eg. .flexcontainer{
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start;
justify-content: flex-start; }
eg. .flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: flex-start;
align-items: flex-start; }
4.如果flex-direction设置为row,设置justify-content控制方向;
如果flex-direction设置为column,设置align-items控制方向
flex项目移到左边：justify-content:flex-start align-items:flex-start
flex项目移到右边：justify-content:flex-end align-items:flex-end
flex水平垂直居中：justify-content:center align-items:center
查看全部 -
1、border-radius 圆角边框 2、box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
查看全部 -
扭曲：skew(x,y) /skewX(x)/skewY(y)
eg.skew(10deg,10deg)
缩放：scale(x,y) /scaleX(x)/scaleY(y)
eg.scale(0.8,1.5)
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。
位移：translate(x,y) /translateX(x)/translateY(y)
eg.translate(100px,50px)
查看全部 -
旋转rotate()函数 元素相对原点进行旋转
正值，元素相对中心原点顺时针旋转
负值 ，元素相对中心原点逆时针旋转
eg. .wrapper div{ rotate(20deg) }
度（Degress），一个圆共360度
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
查看全部 -
属性选择器
E[att^="val"]:属性值以val开头的任何字符串
eg:a[class^=icon],class=icon开头的
E[att$="val"]:属性值以val结尾的任何字符串
eg：a[href=pdf],href中pdf结尾的
E[att*="val"]:属性值中含有val的任何字符串
eg:[title*=more],title中含有more的
结构性伪类选择器
":root"选择器等同于<html>元素
:not 除了某个元素之外的所有元素
eg:input:not([type="submit"]){ }
:empty 用来选择没有任何内容的元素，哪怕是一个空格都没有
:target 选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
eg: :target{ display:block} //这里的:target就是指id="brand"的div对象
5. :first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n/2n+1/4n/4n+4/...) 指定一个或多个子元素，n是从0开始计算，表达式的值为0或小于0的时候，不选择任何元素
:nth-last-child(n/2n+1/4n/4n+4/...) 从最后一个子元素开始计算
:first-of-type 指定某个类型下的第一个子元素
:nth-of-type(n) 指定某个类型下的一个或多个子元素
:last-of-type 某类型的最后一个子元素
:nth-last-of-type(n) 最后一个子元素开始计算
:only-child 匹配的元素是父元素仅有一个子元素，唯一的子元素的
:only-type-child 选中这个元素中唯一一个类型子元素
查看全部 -
resize自由缩放属性：
resize属性主要用来改变元素尺寸大小的，主要目的增强用户体验。
语法：
resize: none | both | horizontal | vertical | inherit
取值说明：
none 用户不能拖动元素修改尺寸大小。
both 用户可以拖动元素，同时修改元素的宽度和高度。
horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。
vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。
inherit 继承父元素的resize属性值。
查看全部 -
在自适应布局中可以毫无保留的丢弃：
第一， 尽量少用无关紧要的div；
第二，不要使用内联元素（inline）；
第三，尽量少用JS或flash；
第四，丢弃没用的绝对定位和浮动样式；
第五，摒弃任何冗余结构和不使用100%设置。
有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？
第一，使用HTML5 Doctype和相关指南；
第二，重置好你的样式（reset.css）；
第三，一个简单的有语义的核心布局；
第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。
查看全部 -
background-size : auto | <长度值> | <百分比> | cover | contain
//默认值：auto | 长度值：成对出现 | 百分比：0-100% 成对出现 | 覆盖，填满整个容器 | 容纳，等比缩放至某一边紧贴容器边缘为止
查看全部 -
background-clip : border-box | padding-box | content-box | no-clip
注意：向外裁剪，默认值为border-box
查看全部 -
background-origin : border-box | padding-box | content-box;(边框 | 内边距 | 内容区域)
注意：如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
查看全部 -
text-overflow : clip | ellipsis //(剪切 | 显示省略标记);
//搭配下面两句同时使用
overflow : hidden; //溢出内容为隐藏
white-space : nowrap; //强制文本在一行内显示
//设置文本行为
word-wrap : normal | break-word (控制连续文本换行 | 内容将在边界换行)
查看全部 -
//线性渐变
background-image:linear-gradient(to top left,red,orange,yellow,green,blue,indigo,violet);
//径向渐变不可以设置方向 但是可以设置尺寸
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
查看全部
举报