(CSS初级篇)CSS看书总结
majun0007
这个作者很懒,什么都没留下…
展开
-
2.(初级)CSS3选择符
一、属性选择符[ ]通用属性选择符[ ]例如:img[title]、input[type=”text”]以此开头属性选择符[^=xxx]例如:a[href^=”http://”]以此结尾属性选择符[$=xxx]例如:a[href$=”.pdf”]符合此所有属性选择符[*=xxx]例如:img[src*=”logo”]二、子代选择符:first-child—原创 2017-02-05 10:07:10 · 272 阅读 · 0 评论 -
16.(初级)CSS布局定位相关问题
一、浮动溢出问题解决方案方案一:在外层元素的底部添加一个元素,并清除浮动。方案二:浮动外层元素,后续元素清除浮动。方案三:设置overflow:hidden;。方案四:设置伪元素:before、:after。 div:before/after{ content:” ”; display:table;原创 2017-02-10 10:17:46 · 168 阅读 · 0 评论 -
15.(初级)CSS的float与position
一、浮动floatfloat特点: 1、浮动,相对定位的,它根据一个元素的大小和其父节点容器的大小来构造这个元素在排版中与其他元素之间的关系,整个页面会随着浏览器的大小和分辨率的变化而改变。 2、float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置原创 2017-02-10 10:16:55 · 228 阅读 · 0 评论 -
14.(初级)CSS表格table注意点
一、控制单元格之间的间隙border-spacing:px二、去掉双重边框border-collapse:separate/collapse说明:separate:单元格之间有间隙,而且边框叠加collapse:去掉间隙及边框叠加三、隐藏空单元格empty-cells:hide;原创 2017-02-10 10:15:21 · 276 阅读 · 0 评论 -
13.(初级)CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法
一、变形transform1、倾斜skew()skew(水平倾角,垂直倾角)例如:skew(20deg,30deg) 2、移动变形原点transform-origintransform-origin:left/right/px/% top/bottom/px/%;例如:transform-origin:left top;相当于transform-ori原创 2017-02-07 14:53:21 · 5261 阅读 · 0 评论 -
12.(初级)CSS背景background
一、定义背景起点background-origin:border-box/padding-box(默认)/content-box;border-box:起点设置为border左上角padding-box:起点设置为padding左上角content-box:起点设置为content左上角例如:注意黑点 二、定义背景显示区域background-clip:border原创 2017-02-07 10:33:27 · 254 阅读 · 0 评论 -
11.(初级)CSS盒子计算规则
一、重定义盒子尺寸计算规则box-sizing:content-box(默认)/padding-box/border-boxcontent-box:width+padding+border,height同理padding-box:width包含padding,height同理border-box:width包含padding+border,height同理二、设置盒子最大、最小原创 2017-02-07 10:32:35 · 336 阅读 · 0 评论 -
10.(初级)CSS边框border
一、边框边框四边同时设置:border:1px(宽度) solid(样式) #ddd(颜色);各边边框分别设置:border-top/border-left/border-right/border-bottom二、边框样式 三、边框圆角border-radius:1px(左上) 1px(右上) 1px(左下) 1px(右下);1、边框画圆形:元素为正方形,b原创 2017-02-06 16:33:12 · 351 阅读 · 0 评论 -
8.(初级)web字体之:装饰列表
一、无装饰列表符号list-style:none;二、装饰列表、list-style-type:disc(实心圆)/circle(空心圆)/square(实心方形);三、装饰列表list-style-type:decimal(1. 2. ...)decimal-leading-zero(01. 02. ...)upper-alpha(A. B.原创 2017-02-06 16:15:13 · 319 阅读 · 0 评论 -
9.(初级)CSS内外边距注意点
一、外边距冲突当遇到上元素设置下外边距,下元素设置上外边距时,浏览器不会把两个外边距相加,而是取大值。例如:div.first{margin-bottom:10px;}div.second{margin-top:15px;}运行结果:上下外边距取15px,而不是25px解决方案:方案一:设置一个合并后的margin。方案二:将其中一个原创 2017-02-06 16:24:33 · 400 阅读 · 0 评论 -
7.(初级)web字体之:装饰文本
一、粗体font-weightfont-weight:normal/bold/100~900二、修饰文本text-decoration:underline/overline/line-through/none文本阴影:text-shadow:x(x向偏移值) y(y向偏移值) 模糊距离 #颜色例如:text-shadow:4px 4px 3px #999;text-原创 2017-02-06 10:05:45 · 306 阅读 · 0 评论 -
6.(初级)web字体之:@font-face
一、web载入字体设置@font-face1、@font-face设置!设置时必须在最后加上;(分号),否则@font-face无效属性:font-famliy:设置字体名称src:设置字体文件例如:@font-face{font-famliy:”league Gothic”;src:url(”font/league_Gothic-web font.原创 2017-02-06 10:00:50 · 403 阅读 · 0 评论 -
5.(初级)CSS尺寸单位
一、像素(PX)1px即屏幕上的一个点二、emem是相对度量单位,需考虑继承,具体情况如下:1、默认:字体高度1em=16px,width/height/padding/margin设置em均以字体高度1em=16px为基础,而不是当前元素的父元素或body为基础例如:具体尺寸详下图 1 #a{ font-size原创 2017-02-06 09:55:32 · 342 阅读 · 0 评论 -
4.(初级)CSS颜色
一、十六进制表示法#rrggbb:r红g绿b蓝#000000~#FFFFFF:黑色~白色简写:#6600ff—>#60f#000000—>#000二、RGBrgb( r红, g绿, b蓝)rgb(0~100%,0~100%,0~100%),黑色~白色rgb(0~255,0~255,0~255),黑色~白色例如:color:rgb(255,255,255)原创 2017-02-06 09:49:50 · 362 阅读 · 0 评论 -
3.(初级)CSS继承
一、继承继承:子元素继承父元素属性例如:body标签设置的属性p标签会继承二、利用继承全局通用属性建议设置在祖元素中,以便子元素继承复用。例如:通用样式建议写在body中,字体、字体大小、文字颜色等body{font-family:Arial,Helvetica;}三、继承的局限性!并不是所有样式都可以继承。原创 2017-02-05 10:30:08 · 242 阅读 · 0 评论 -
1.(初级)伪类及伪元素
一、链接伪类a:link——链接未访问a:visited——链接访问过后a:hover——鼠标悬停在链接上a:active——鼠标点击连接时二、段落伪类::first-letter——首字母下沉::first-line——首行变化颜色::selection——鼠标选中内容三、其他伪类:hover——鼠标悬停在元素上:focus——元素获取焦点时:be原创 2017-02-04 15:07:00 · 229 阅读 · 0 评论 -
17.(初级)CSS弹性盒flex
一、弹性盒子基础结构 ------->弹性容器 1 ------->弹性项1 2 ------->弹性项2 3 ------->弹性项3二、弹性容器属性1、设置元素变成弹性盒display:flex;2、flex-flow值一:设置弹性项控制弹性项目的排列方向(行或列),值二:控制弹性项能否换行flex-flow:原创 2017-02-10 10:19:19 · 386 阅读 · 0 评论