CSS
jerny2017
这个作者很懒,什么都没留下…
展开
-
position属性值
position属性是指本体相对于上级的定位,默认值是static,意味着没有被定位,出现在文档流中应该出现的位置如果用position来布局页面,父级元素的position必须是relative或者absolute行元素加了position:absolute;后可设置宽高(加了float和fixed以后也可以设置宽高)常用的属性值:static 没有定位,遵循正常文档流relative 遵循正常...原创 2018-04-17 10:47:55 · 2486 阅读 · 0 评论 -
静态页面总结
1. box-shadow: inset offset-x offset-y blur-radius spread-radius 每个<shadow>被定义为下面这些值的组合: inset关键字,将外部投影转变为内部阴影。默认值是空,为外部投影。 第1个长度offset-x代表阴影x轴向的偏移,正值向右,负值向左。 第2个长度of...原创 2018-05-02 16:39:45 · 440 阅读 · 1 评论 -
静态页面总结二
1. 如果一行内需要显示多个有链接的元素,那么可以用标签a2. 纯文本显示可以使用标签 span p3. 图片虽然可以做为背景图片显示,但是想配合后台数据的话,有些还是需要用img标签4. 页面上功能类似的块,文档结构最好做成一样的,css可以针对性的修改,这样有利于后台传过来的list数据的显示5. a标签内可以放置图片,div,p,span等6. font: 14px/32...原创 2018-05-02 16:43:37 · 174 阅读 · 0 评论 -
css继承
css继承:子元素可以使用父元素的样式css继承的局限性:border, margin, padding可以继承的css属性:font, color, font-family, font-size, font-style, font-weight,letter-spacing, text-indent,cursor, line-height, text-alignlist-style...原创 2018-04-20 16:50:56 · 606 阅读 · 0 评论 -
flexbox布局
先占个位,以后再学https://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html转载 2018-04-20 17:19:24 · 163 阅读 · 0 评论 -
box-shadow
box-shadow: inset offset-x offset-y blur-radius spread-radius每个<shadow>被定义为下面这些值的组合: inset关键字,将外部投影转变为内部阴影。默认值是空,为外部投影。 第1个长度offset-x代表阴影x轴向的偏移,正值向右,负值向左。 第2个长度offset-y代表阴影y轴向的偏移,正值向...原创 2018-05-09 16:52:21 · 129 阅读 · 0 评论 -
CSS3改变滚动条样式
1、::-webkit-scrollbar 滑块的宽度,width是垂直方向的宽度,height是水平方向的宽度;2、::-webkit-scrollbar-thumb 滑块部分的样式,宽高就不用设置了;3、::-webkit-scrollbar-track 轨道部分的样式,宽高就不用设置了;只有webkit内核的浏览器支持此样式,pc端有兼容问题,移动端可以使用例子:<div...原创 2018-05-10 16:55:15 · 355 阅读 · 0 评论 -
BFC
元素定位:1. 正常文档流,从上向下,行内从左向右2. 浮动float,在正常的文档流位置显示,根据属性值向左或向右浮动,带来的影响是兄弟元素会在其下面的位置以正常的文档流出现,文字不会被覆盖。3. 绝对定位 position: absolute; 如果没有设置坐标值(top left right bottom),那么在正常的文档流位置显示,兄弟元素会在其下面显示,文字会被覆盖。BFC Block...转载 2018-05-04 13:50:41 · 512 阅读 · 0 评论 -
利用:浮动元素的遮挡的效果
左边是浮动元素,右边是非浮动元素,这样可以做出来这种效果。另外,自适应的两栏布局两边固定宽度,中间自适应布局<div id="div1"></div><div id="div2"></div><div id="div3">dddddd</div>#div1,#div2{原创 2018-05-04 14:01:37 · 643 阅读 · 0 评论 -
为什么要重置body等元素的样式
不同浏览器body的margin值会不一样,也就是body到html的距离不一样,比如:IE8+,Chrome, Firefox等是8pxIE7,margin-left是10px, margin-top是15px这些差异会使得dom中的一些属性值不一样,比如offsetLeft,offsetTop所以为了解决这些兼容问题,一般情况下,会在样式表中重置body等元素的margin,padding值为...原创 2018-05-04 16:34:16 · 414 阅读 · 0 评论 -
box-sizing
box-sizing: content-box|border-box|inherit; inherit: 继承父元素的box-sizing的值content-box: 样式中width的值border-box:样式中的width值=border+padding+内容的宽度原创 2018-05-04 17:32:57 · 112 阅读 · 0 评论 -
获取元素的宽度,高度
1. style.width 适合行内样式<div style="width:100px;"></div>2. window.getComputedStyle(elem).width Chrome, FF, IE9+支持此方法3. elem.clientWidth 可视宽度 padding+元素宽度,对于行内元素,元素的宽度获取不了,此属性也不起作用 获取网页的高度:...原创 2018-05-07 18:02:19 · 7352 阅读 · 0 评论 -
DOM CSS 选择器权重
1. 行内样式 10002. ID 选择器 1003. 类,伪类选择器,属性选择器 104. 元素,伪元素选择器 15. 通配符*,子选择器, 相邻选择器 0原创 2018-05-22 15:06:53 · 166 阅读 · 0 评论 -
CSS 动画效果
总体来说两类:1. transition: 从一个样式到另外一个样式的过渡过程width:过渡需要的时间linear: 匀速过度 transition: 2s linear; 匀速过渡,而且时长2sease: 慢速开始,然后加快,然后慢速结束ease-in: 慢速开始ease-out: 慢速结束ease-in-out: 慢速开始和结束例子:.div1{width: 100px; transiti...原创 2018-04-23 14:45:44 · 474 阅读 · 0 评论 -
border属性的三要素
border: 1px solid red;宽 样式 颜色border-width 默认是3px, 可以不写border-style 这个是必须的border-color 默认是黑色,可以不写原创 2018-04-18 16:03:31 · 7105 阅读 · 0 评论 -
CSS基础属性
width,默认值auto,可以用数值和百分比,对于img元素来说,仅设置width的情况下,其height值将根据图片原尺寸比例缩放heighttext-overflow文字溢出用省略号表示,属性有:ellipsis,结合一下代码一起使用才会有效果:p{white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}意思是,假如文...原创 2018-04-17 10:39:02 · 132 阅读 · 0 评论 -
CSS 选择器
【CSS选择器包括:】 基础选择器 关系选择器 属性选择器 伪类选择器 伪对象选择器【基础选择器:】 标签, id, class,通配符*【关系选择器:】 包含选择符 E F, 中间用空格 子选择符 E>F, 对直接子元素起作用,对更深一层的元素不起作用 相邻选择符 E+F, 选择相邻的第一个兄弟元素 兄...原创 2018-04-17 10:30:27 · 158 阅读 · 0 评论 -
CSS 权重 和 优先级
权重style 1000 行内样式id 100class 10element 1 标签权重越大,优先级越高CSS选择器优先级是指“基础选择器”的优先级:ID > CLASS > ELEMENT > *!import(hack) > 行内 > ID > CLASS > 标签 | 伪类 | 属性选择器 > 伪元素 > 继承 &g...原创 2018-04-17 10:26:40 · 514 阅读 · 0 评论 -
清浮动的方法
由于浮动,绝对定位,使得元素脱离了标准文档流,对页面布局造成影响。由于浮动,父元素会产生高度塌陷,高度为0,如何清除浮动带来的影响,这就是“清浮动”。清浮动的方法:1. 内墙法:①添加空白div:在父元素内部最后添加, .clear{clear:both;} <div class="clear"></div>②伪元素:给父元素添加::after F::after{conte...原创 2018-04-17 10:59:10 · 126 阅读 · 0 评论 -
浮动的元素可以使字体围绕浮动的元素
<div style="width:100px;height:100px;float:left;border: 1px solid pink;"></div><div style="height:50px;border:1px solid #000;background-color:red">text text text text text</div&g...原创 2018-04-16 16:46:55 · 751 阅读 · 0 评论 -
css中一共有三种手段,使一个元素脱离标准文档流
css中一共有三种手段,使一个元素脱离标准文档流:(1)浮动(2)绝对定位(3)固定定位转载 2018-04-16 16:42:02 · 5862 阅读 · 0 评论 -
text-align:center; margin: 0 auto的区别
text-align: center; 作用于内联元素,父元素下的内联元素居中显示,写在父元素上margin: 0 auto; 作用于块元素,使得块元素相对于父元素居中显示,但是这个块元素必须是标准流的元素,没有浮动和固定定位对于position: absolute | relative ;的元素,可以使用:{position: absolute;left: 0;right: 0;marg...原创 2018-04-17 11:03:38 · 343 阅读 · 0 评论 -
渐进增强 优雅降级
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览...转载 2018-06-01 17:55:44 · 197 阅读 · 0 评论