![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 67
github_34514750
这个作者很懒,什么都没留下…
展开
-
ife-task3:三栏式布局--再谈position 属性的基本知识
1.static:这个关键字使得这个元素使用正常的表现,即元素处在文档流中它当前的布局位置,top, right, bottom, left 和 z-index 属性无效。2.relative:相对定位相对定位(position: relative)的元素仍然被认为是处于文档流之中。 使用这个关键字来布局元素就好像这个元素没有被设置过定位一样。即会适应该元素的位置,并不改变布局(这样会在此元素原本原创 2016-04-02 17:13:45 · 777 阅读 · 0 评论 -
css-伪类和伪元素的区别
1.伪类和伪元素的差别?1.1 伪类是通过给子元素添加一个类,然后定义这个类的样式来实现效果eg: :link :visited :hover :active :focus :first-child伪元素是通过添加一个实际的元素,在给元素添加样式来实现效果的。eg: :first-letter :first-line :before :after <style>原创 2016-09-16 11:24:21 · 316 阅读 · 0 评论 -
css-选择器
1.CSS选择符有哪些?1.1 通配符选择器*1.2 id选择器(# idName)1.3 类选择器(.className)类名中**包含**className即应用样式–多类选择器1.4 属性选择器(a[attribute = attributeName])简单属性值选择有calss属性(值不限)的所有h1元素:h1[class];包含title属性的所有元素:*[title]同时包含href和t原创 2016-09-16 11:13:43 · 213 阅读 · 0 评论 -
css-包含块
正常流的包含块:包含块由最近的块级祖先框,表单元格或行内块祖先框的内容边界构成。浮动元素的包含块:最近的块级祖先元素,浮动元素尽管是行内元素也会生成一个块级框定位的包含块根元素:用户代理(比如浏览器)选择根元素(有的浏览器是html,有的是body)作为 containing block非根元素:1.position是relative或者static,包含块是最近的块级祖先框,表单元格或行内块祖先框原创 2016-09-16 11:44:59 · 337 阅读 · 0 评论 -
BFC
1.BFC是什么BFC是块级格式化上下文: 1.BFC规定了元素如何对内容进行定位,以及和其他元素的关系和相互作用 2.BFC提供了一个环境,这个环境中按照一定规则进行布局不会影响其他环境中的布局2.形成BFC的条件(符合一个就可)1.float值不是none 2.overflow值不是visible 3.positive值是absolute或fixed 4.display值是inline原创 2016-05-10 16:19:55 · 1136 阅读 · 0 评论 -
css实现圆,半圆,四分之一圆和其他几何图形画法
在ife任务4中,画四分之一圆的时候,是画出一个圆并且结合overflow等实现,但是其实可以直接画出半圆或者四分之一圆,之前忽略了几个属性。 圆的画法:先画相应矩形,在用border-radius1.画出圆{ width:100px; height:100px; border-radius:50px;}2.画出方向四个不同的本圆.top{ width: 100px; he原创 2016-04-05 15:44:50 · 30795 阅读 · 0 评论 -
css-样式优先级算法
1.CSS优先级算法如何计算?1.css优先级是由四个级别和各个级别出现的次数决定的,值从左到右,左面的最大,一级大于一级2.优先级算法每个规则对应一个初始四位数:0,0,0,0若是行内样式优先级,则是1,0,0,0,高于外部定义<div style=”color: red”>sjweb</div>若是ID选择符,则分别加0,1,0,0若是类选择符,属性选择符,伪类选择符,则分别加0,0,1,0若原创 2016-09-16 11:25:56 · 2820 阅读 · 1 评论 -
CSS-响应式框架
1.使用流式960网格布局960网格系统不是响应式的,更像一个表格,其列跨越固定宽度的表头。它在960px宽的窗口中布局最完美准备工作960网格布局使用了百分比宽度、左浮动元素替代了固定宽度的网格元素。该版本大数情况下能良好工作,但是当列变得很狭窄时,阅读会变得很困难。并且下载解压流式960网格系统代码,引入grid.css实现方式下面用container_16布局且使用了grid(引用了grid.原创 2016-12-01 09:51:30 · 432 阅读 · 0 评论 -
css-水平和垂直布局
1. 盒子模型margin外边距,border边框,padding内边距,element元素2. 水平布局2.1 盒子模型理解水平布局父元素width=子元素margin-left+border-left+padding-left+width+padding-right+border-right+margin-right;2.2 行内元素实现水平居中text-align="center";2.3 使原创 2016-04-02 17:06:19 · 9233 阅读 · 0 评论 -
css-可继承和不可继承的属性
1.css哪些属性可以继承?哪些不可继承?css属性分类字体属性:font-family,font-size,font-style,font-variant,font-weight,font可继承ps: font-size继承的是计算后的实际值文本属性:word-spacing letter-spacing text-align text-transform text-indent line-hei原创 2016-09-16 11:15:32 · 2955 阅读 · 0 评论 -
布局神器---flexbox
1.flexboxflexbox: 是css3中的新的布局模式,可以控制未知容器元素的对齐方式、排列方向、排列顺序。 flex布局:(由父元素和它的直接子元素组成) 父元素:成为flex容器 直接子元素:成为flex项目/flex item2.flex容器的属性:设置display:flex;/display:inline-flex;设置flex容器的原创 2016-04-07 22:08:10 · 2045 阅读 · 0 评论 -
css-属性前的 -webkit, -moz
在CSS属性能中,我们常常能看到-webkit-,-moz-之类的前缀,这种就叫做浏览器私有前缀,是浏览器对于新CSS属性的一个提前支持。-webkit-是webkit内核的,-moz-是Firefox Gecko内核,moz代表的是Firefox的开发商Mozilla。 为什么要有私有前缀呢?因为制定HTML和CSS标准的组织W3C动作是很慢的。通常,有w3c组织成员提出一个新属性,比如转载 2016-08-05 14:00:53 · 313 阅读 · 0 评论 -
ife-task7:半透明颜色层上叠加文字,rgba()和opacity区别
ife的task7中遇到的问题: 在一张图片上加了一个半透明颜色层,但是在半透明颜色层上加上文字却也成了半透明给html图片上叠加半透明颜色层,并且在半透明颜色层上叠加文字 使用absolute+opacity属性实现不透明度、 或者不用定位,直接就使用margin-top:一个负数,来定位,但这种不可取,除非明确知道跟top的距离。<div id="part-5"> <img原创 2016-04-05 16:05:01 · 1339 阅读 · 1 评论 -
css-position,float,display的关系和优先级
display的转换对应表 设定值 计算值 inline-table table inline, run-in, table-row-group, table-column, table-column-group,table-header-group, table-footer-group, table-row, table-cell,table-caption, inline-b原创 2016-07-13 10:47:25 · 3107 阅读 · 0 评论 -
css-margin collapse外边距折叠
1.多个相邻(兄弟或者父子关系)普通流的块元素垂直方向marigin会重叠折叠的结果:两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。两个外边距一正一负时,折叠结果是两者的相加的和。折叠的产生情况:1.必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。2.没有线盒,没有空隙(clearance,下原创 2016-07-13 10:53:40 · 3381 阅读 · 1 评论 -
css3-增强的文本和颜色功能
1.css3新增的文本属性text-shadow属性:定义文本阴影或模糊效果此属性可以接受一个以逗号分隔的阴影效果列表,并应用于该元素的文本属性的值:(四个参数)1.表示水平位移,正值偏右,负值偏左2.表示垂直位移,正值偏下,负值偏上3.表示模糊半径(可选)4.表示阴影的颜色(可选),颜色值可以放在前面text-overflow:定义省略文本的处理方式属性的值:(一个参数)clip:原创 2016-04-15 17:02:47 · 470 阅读 · 0 评论 -
css3-新增的选择器
1.css3新增的3个属性选择器[attribute^="value"]eg:a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。[attribute$="value"]eg:a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素//所以可以使用css3实现不同文件给与不同图标,没有css3则我们只可以辛苦用原创 2016-04-11 15:36:07 · 1482 阅读 · 0 评论 -
css3-立方体3d旋转动画
1.准备六个面div做出六个面,在同一个父级容器下 父级容器的transform-style:preserve-3d 六个div设置成绝对定位,重叠在一起2.父元素做简单的变换父元素用transform:rotate旋转3.每个子页面做3D变换每个子页面则用rotate旋转,和translate平移4.父元素做动画代码: https://github.com/wanghuanweb/wangh原创 2016-07-08 17:04:54 · 825 阅读 · 0 评论 -
css3-3D透明照片墙
1.准备n张照片div放入照片,在同一个父级容器下设置父类的transform-style:preserve-3d和persepective六个div设置成绝对定位,重叠在一起2.子元素做简单的变换,成旋转木马形状图片子元素用transform:rotate旋转因此是绕 Y 轴的,我们关心的是 rotateY 的大小,根据我们添加的图片数量,用 360° 的圆周角将每个图片等分,也就是让每张图片绕原创 2016-07-09 13:42:56 · 2781 阅读 · 0 评论 -
css3-loading效果
5个圆圈loading图 1.父容器container绝对定位父元素在屏幕中间2.子元素div画出五个div,设置border-radius,然后内联变成一行3.子元素div动画每个子元素放大缩小,但是依次给个动画延迟,则是很好的loading效果https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A原创 2016-07-09 15:10:41 · 714 阅读 · 0 评论 -
css--盒子模型和层叠关系
单栏水平居中布局(首尾全屏)单栏水平居中布局两栏底部自适应布局两栏自适应布局(左侧固定)全屏垂直居中全屏两栏自适应布局全屏三栏底部自适应全屏三栏自适应布局详细代码见github上~ https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css%E5%B8%83%E5%B1%80原创 2016-05-10 11:07:38 · 3309 阅读 · 0 评论