css学习
关注
分享
扫一扫
文章平均质量分 78
记录学习css相关知识
bwshqh
这个作者很懒，什么都没留下…
展开
-
CSS学习（二十二）-flexbox模型之三
一、理论：1.flex-line-pack 堆栈伸缩行a.使用与flex-pack 相同b.增加stretch start/end/center/justify(平均分布)/distribute（两端保留一半的空间）/stretch（拉伸填充整个容器）c.flex-line针对个体，flex-line-pack针对群体二、实践：1. Title原创 2016-03-31 00:58:20 · 870 阅读 · 0 评论 -
CSS学习（二十一）-flexbox模型之二
一、理论：1.flex-flowa.flex-direction 设置伸缩容器的伸缩流方向b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列2.flex-packa.具有与box-pack属性相同的参数b.distribute 伸缩项目会平均分布在同一行里c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容原创 2016-03-29 00:59:16 · 1316 阅读 · 0 评论 -
CSS学习（二十）-flexbox模型
一、理论：1.混合版本flexbox模型a.display 1)flexbox 设置元素为块级容器2)inline-flexbox 设置元素为内联块伸缩容器b.display容器的基本使用1)主要用于IE10浏览器2.伸缩流方向flex-directiona.flex-direction1)row ltr-->自左向右排列，rtl-->自右向左排列2)row原创 2016-03-26 23:09:18 · 1549 阅读 · 1 评论 -
CSS学习（十九）-CSS伸缩布局盒
一、理论：1.flexbox模型基础知识a.flexbox布局方向不可预知b.屏幕和浏览器窗口大小发生改变可以灵活调整布局c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间e.指定如何将垂直元素布局轴的额外空间分布到该元素周围f.控制元素在页面上的布局方向g.按照不同于DOM所指定的方式原创 2016-03-20 23:58:12 · 3255 阅读 · 0 评论 -
CSS学习（十八）-滚动条、拖动元素、轮廓线
一、理论：1.overflow-x/overflow-ya.visible 默认值,不添加滚动条b.auto 添加滚动条c.hidden 内容溢出容器时，所有内容都将隐藏，不显示滚动条d.scroll 不论有无溢出，都显示滚动条e.no-display 当内容溢出容器时不显示元素f.no-content 当内容溢出容器时不显示内容2.resizea.none 用原创 2016-03-19 00:18:12 · 3131 阅读 · 0 评论 -
CSS学习（十七）-盒模型
一、理论：1.CSS盒模型a.外盒尺寸计算--高度element空间高度=内容高度+内距+边框+边距b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距c.内盒尺寸计算--高度element高度=内容高度+内距+边框d.内盒尺寸计算--宽度element宽度=内容宽度+内距+边框2.box-sizinga.content-box 默认原创 2016-03-18 00:59:53 · 1507 阅读 · 0 评论 -
CSS学习（十六）-HSLA颜色模式
一、理论：1.HSLA颜色模式a.HSLA在HSL基础上增加了不透明度，值越大透明度越低b.HSLA颜色模式的浏览器兼容性和HSL一样，只有较新版本的主流浏览器才支持2.RGBA和HSLA颜色模式二者可以完全相互替换3.RGBA/HSLA的IE兼容方案a.在IE8以下版本，一般在前面设置一个非透明色，在其后紧跟一个RGBA/HSLA颜色模式b.将透明的PNG图片平铺做为原创 2016-03-16 23:16:01 · 1956 阅读 · 0 评论 -
CSS学习（十五）-CSS颜色模式、CSS颜色透明度
一、理论：1.CSS3颜色模式a.RGBA颜色模式，在RGB基础上加了控制alpha透明度的参数b.HSL颜色模式：色调 饱和度 亮度c.HSLA颜色模式：A值取于0-1之间，值越大，透明度越低2.RGBA/HSLA滤镜格式a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度，需要将RGBA/HSLA中的透明值乘以255，然后将其转换成十六进原创 2016-03-16 00:38:30 · 3232 阅读 · 0 评论 -
CSS学习（十四）-CSS颜色之一
一、理论：1.RGB色彩模式 a.CMYK色彩模式 b.索引色彩模式 (主要用于web)c.灰度模式 d.双色调模式2.opacity:a.alphavalue:透明度b.inherit:继承父元素的不透明性二、实践：1. Title .row{ overflow: hidden;原创 2016-03-14 22:18:52 · 885 阅读 · 0 评论 -
CSS学习（十三）-文本换行符技巧
一、理论：1.word-wrap 用来断词而不是断字符2.word-break:a.break-all 可以允许非中文断开b.keep-all 在中文里不允许字断开2.white-space:a.nowrap 文本强制不换行b.pre 显示预定义文本格式3.浏览器适应：a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示b.在原创 2016-03-12 23:08:42 · 2309 阅读 · 1 评论 -
CSS学习（十二）-文本换行符
一、理论：1.word-wrap:a.normal 在半角空格或连字符的地方进行换行b.break-word 不截断英文单词换行2.word-break:a.normal 中文到边界上的汉字换行，英文从整个单词换行b.break-all 强行截断英文单词换行c.keep-all 不允许字断开3.while-space:a.normal 默认值b.pre 文本原创 2016-03-12 00:56:29 · 5159 阅读 · 1 评论 -
CSS学习（十一）-CSS文本溢出
一、理论：1.text-overflow a.clip 不显示省略标记b.ellipsis 显示省略标记二、实践：1. Title .text-overflow-clip1{ width: 80px; padding: 10px; border: 1px原创 2016-03-11 00:06:11 · 1731 阅读 · 1 评论 -
CSS学习（十）-CSS字体、CSS字体阴影
一、理论：1.css字体类型a.font-family 字体类型b.font-style 字体样式c.font-weight 粗细，可设置数字d.font-size-adjust 是否强制对文本使用同一尺寸e.font-stretch 横向拉伸变形字体f.foont-variant 字体大小写2.css文本类型a.word-spacing 词间距b.lett原创 2016-03-09 23:06:31 · 1705 阅读 · 0 评论 -
CSS学习（九）-CSS背景
一、理论：1.background-break a.bounding-box 背景图像在整个内联元素中进行平铺b.each-box 背景图像在行内中进行平铺c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺以上仅在firefox下可用2.css多背景a.background-image 设置元素背景图片民，可用相对地址或绝对地址索引背景图像b.b原创 2016-03-07 23:56:15 · 1517 阅读 · 1 评论 -
CSS学习（八）-background-origin、background-clip
一、理论：1.css背景属性简介：a.background-color 背景颜色b.background-image 背景图片c.background-repeat 铺放格式d.background-attachment 固定或者滚动e.background-position 设置背景图片位置f.background-origin 指定绘制背景图片的起点g.back原创 2016-03-06 18:32:18 · 996 阅读 · 0 评论 -
CSS学习（七）-边框阴影效果（下）
一、理论：1.阴影层级：边框>内阴影>背景图片>背景色>外阴影2.多层阴影：每层之间用逗号隔开3.box-shadow兼容性：a.在现代浏览器新版本无须加前缀，但旧版本需要加b.ie8以下需要用ie滤镜来模拟实现c.box-shadow具有多个参数可选，可制作出圆润的阴影效果二、实践：1. Title .box-s原创 2016-03-06 01:26:51 · 1481 阅读 · 0 评论 -
CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）
一、理论：1.border-radius:a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形e.椭圆:需要设置圆原创 2016-03-04 01:05:59 · 4733 阅读 · 0 评论 -
CSS学习（五）-css圆角边框
一、理论：1.border-radius:左上\右上\右下\左下2.border-radius:圆角水平半径/圆角垂直半径3.在img上应用border-radius在webkit内核浏览器上不能对图片进行剪切二、实践：1. Title .border-radius{ width:250px;原创 2016-03-03 01:16:05 · 826 阅读 · 0 评论 -
CSS学习（四）-css边框样式（下）
一、理论：1.注意制作边框的图片的高与宽2.边框宽度配合到位3.切割边框背景图片合理二、实践：1. Title .border-image-btn{ display: inline-block; border: 18px solid green; bord原创 2016-03-02 00:28:10 · 706 阅读 · 0 评论 -
CSS学习（三）-css边框样式（上）
一、理论：1.css边框简介a.border-width 设置粗细b.border-color 设置颜色c.border-style 设置类型d.以上都遵守TRBL原则，例：border-top-style2.边框的类型a.none 无边框b.hidden 无边框，但对于表而言是解决边框冲突c.dotted 点状边框d.dashed 虚线边框e.soli原创 2016-02-29 23:06:13 · 781 阅读 · 0 评论 -
CSS学习（二）-结构伪类选择器、属性选择器
一、理论：1.结构伪类选择器：a.E:first-child:选择第一个子元素b.E:last-child:选择最后一个子元素c.E:root:选择匹配元素E所在文档的根元素d.E F:nth-child(n):选择E的第n个子元素e.E F:nth-last-child(n)：选择元素E的倒数第n个子元素f.E:nth-of-type(n)：选择父元素内具有指定类型的原创 2016-02-28 23:07:02 · 1605 阅读 · 0 评论 -
css学习（一）-CSS基础、css选择器
一）理论：一.CSS基础：1.css3的新特性：a.强大的css3选择器b.抛弃图片的视觉效果c.背景的变革d.盒模型变化e.阴影效果f.多列布局与弹性盒模型布局g.web字体和web font图标h.颜色与透明度i.圆角与边框的新法j.盒容器的变形i.css3过渡与动画交互效果j.媒体特性与Responsive布局2.使用css3的好处原创 2016-02-27 23:37:11 · 1032 阅读 · 0 评论