![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Dz329
前端新人。
展开
-
css中圣杯布局
左右两侧宽度固定,中间宽度自适应的三列布局 -1)HTML结构中,先主体内容后侧边 -2)两侧宽度固定,中间宽度设置100% -3)两侧盒子和中间盒分别加浮动(float:left); -4)将左侧盒子拉到最左边(margin-left:-100%),将右侧盒子拉倒最右边(margin-left:-右侧盒子的宽度) -5)通过左、右、中盒子的父级盒将中间内容露出来(在父元素上设置padding:0右侧盒子的宽度0左侧盒子的宽度) -6)分别还原左侧盒子和右侧盒子(左侧盒...原创 2021-06-07 19:45:17 · 38 阅读 · 0 评论 -
两列自适应布局
1)左右两个盒子,左侧盒子宽度固定,右侧盒子宽度为100% -2)为左侧设置绝对定位position:absolute; -3)在右侧盒子中添加子盒,为子盒设置padding-left属性,值为左侧盒子宽度原创 2021-06-07 19:44:15 · 44 阅读 · 0 评论 -
用CSS实现箭头
原理 -使用css绘制两个三角形 -通过绝对定位让两个三角形不完全重叠 -让处于上层的三角形比处于下层的三角形偏移1像素,生成空心箭头 -兼容 在IE6及更早版本浏览器中小高问题 设置:font-size:0;line-height:0; 目的:让三角形的height:0;有效 -实现 ``` 结构:实现向上箭头 <divclass="arrtop"> <spancl...原创 2021-05-08 19:14:22 · 282 阅读 · 0 评论 -
用CSS实现三角形
代码: 结果:原创 2021-05-07 19:24:45 · 61 阅读 · 0 评论 -
css精灵技术
原理:将一堆小图片整合成一张大图片,通过背景属性,background-image backgroud-repeat background-position ,将背景图片显示出来,并通过背景图定位精确显示图片的位置,减少服务器对图片的请求数量。 图片: <body> <divclass="icons"> <ahref="#"></a> <aclass="tw"href="#">&...原创 2021-05-07 19:16:07 · 63 阅读 · 0 评论 -
浮动问题的产生的原因及常见解决方案。
原因:元素浮动以后,脱离正常文档流,导致父元素高度为0,会影响与浮动元素父级盒呈现并列关系的后续元素的正常布局。 解决方案: 1.为浮动元素的父级盒,设置固定的高度——不够灵活 2.为浮动元素的父级盒,设置浮动——会产生新的浮动问题 3.为浮动元素的父级盒,设置overflow属性,属性值hidden|scroll|auto——可能会导致内容显示不完全,代码简洁 4.为浮动元素父集合开启BFC 5.在浮动元素之后,与浮动元素呈现并列关系的位置,加一个空div(不设浮动,没有尺寸,没有内容),在空原创 2021-05-07 18:59:17 · 693 阅读 · 0 评论