![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 78
bwshqh
这个作者很懒,什么都没留下…
展开
-
CSS学习(四)-css边框样式(下)
一、理论:1.注意制作边框的图片的高与宽2.边框宽度配合到位3.切割边框背景图片合理二、实践:1. Title .border-image-btn{ display: inline-block; border: 18px solid green; bord原创 2016-03-02 00:28:10 · 675 阅读 · 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 · 1486 阅读 · 1 评论 -
CSS学习(十九)-CSS伸缩布局盒
一、理论:1.flexbox模型基础知识a.flexbox布局方向不可预知b.屏幕和浏览器窗口大小发生改变可以灵活调整布局c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间e.指定如何将垂直元素布局轴的额外空间分布到该元素周围f.控制元素在页面上的布局方向g.按照不同于DOM所指定的方式原创 2016-03-20 23:58:12 · 3202 阅读 · 0 评论 -
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 · 1667 阅读 · 0 评论 -
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 · 1692 阅读 · 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 · 5077 阅读 · 1 评论 -
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 · 2278 阅读 · 1 评论 -
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 · 1546 阅读 · 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 · 733 阅读 · 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 · 859 阅读 · 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 · 3086 阅读 · 0 评论 -
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 · 851 阅读 · 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 · 1272 阅读 · 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 · 797 阅读 · 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 · 3191 阅读 · 0 评论 -
CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)
一、理论:1.border-radius:a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示b.圆形:元素的宽度和高度相同,圆角的半径值50%(或高度的一半)c.半圆:元素的宽度与圆角方位配合一致,以不同的高度比例等项即可制作半圆d.扇形:元素的宽度、高度、半径值相同,根据圆角位置不同可制作不同的扇形e.椭圆:需要设置圆原创 2016-03-04 01:05:59 · 4681 阅读 · 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 · 1902 阅读 · 0 评论 -
CSS学习(十七)-盒模型
一、理论:1.CSS盒模型a.外盒尺寸计算--高度element空间高度=内容高度+内距+边框+边距b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距c.内盒尺寸计算--高度element高度=内容高度+内距+边框d.内盒尺寸计算--宽度element宽度=内容宽度+内距+边框2.box-sizinga.content-box 默认原创 2016-03-18 00:59:53 · 1479 阅读 · 0 评论 -
CSS学习(七)-边框阴影效果(下)
一、理论:1.阴影层级:边框>内阴影>背景图片>背景色>外阴影2.多层阴影:每层之间用逗号隔开3.box-shadow兼容性:a.在现代浏览器新版本无须加前缀,但旧版本需要加b.ie8以下需要用ie滤镜来模拟实现c.box-shadow具有多个参数可选,可制作出圆润的阴影效果二、实践:1. Title .box-s原创 2016-03-06 01:26:51 · 1404 阅读 · 0 评论 -
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 · 965 阅读 · 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 · 1011 阅读 · 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 · 1516 阅读 · 1 评论