51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

CSS3

HTML中CSS浮动布局的特点

HTML中CSS浮动布局的特点

厉飞雨 阅读(3) 评论(0) 赞(0)

1. 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置。 ※ 相当于从地面飘到了空中,如果一个元素按照正常的标准流来显示,会在html中所属的位置上占位,后面的元素会紧跟着它,但是浮动脱离了标准流,以后我们在看到浮动的元素之后,不能以正常的标准流里进行判断。 2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素。 3. 浮动找浮动,下一个浮动元素会在上一个浮...

HTML中CSS清除浮动的方法总结

HTML中CSS清除浮动的方法总结

厉飞雨 阅读(2) 评论(0) 赞(1)

1.直接设置父元素的高度 ------------ **优点:** 简单粗暴、方便。 **缺点:** 有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块等。 2.额外标签法 ------- **操作:** 1. 在父元素内容的最后添加一个块级元素 2. 给添加的块级元素设置clear:both **缺点:** 会在页面中添加额外的标签,会让页面的HTML结构变...

CSS中定位的介绍及使用

CSS中定位的介绍及使用

厉飞雨 阅读(4) 评论(0) 赞(1)

静态定位: ----- 静态定位是默认值,就是之前认识的标准流。 代码:postion:static 静态定位不能通过方向偏移值来改变。 相对定位: ----- 自恋型定位,相对于自己之前的位置进行移动。 代码:postion:relative 1. 需要配合访问属性来移动 2. 相对于自己原来的位置进行移动 3. 在页面中占位置→没有脱标 **应用场景*...

CSS边框圆角介绍及案例

CSS边框圆角介绍及案例

厉飞雨 阅读(5) 评论(0) 赞(2)

**场景:** 让盒子四个角变得圆润,增加页面细节,提升用户体验。 **属性名:** border-radius **常见取值:** 数字+px、百分比 **写法:** ```lang-css border-radius:50px; 或 border-radius:10%; ``` **原理:** ![](http://static.51tbox.com/stati...

CSS实现背景颜色渐变效果

CSS实现背景颜色渐变效果

厉飞雨 阅读(3) 评论(0) 赞(1)

使用 `background-image`属性实现渐变背景效果 渐变是多个颜色逐渐变化的视觉效果,一般用于设置盒子的背景色。 **俩种颜色间渐变语法:** ```lang-css background-image: linear-gradient( 颜色1, 颜色2 ); ``` **从透明到半透明语法:** ```lang-css backgrou...

CSS实现3D立体导航效果

CSS实现3D立体导航效果

厉飞雨 阅读(3) 评论(0) 赞(0)

利用空间转换属性使用立体呈现技巧实现3D导航效果 ![](http://static.51tbox.com/static/2024-11-07/col/30eadd7fe5c90cf7491e74dbe3c57111/22339d84d1914307a7601a5fe07a2b6e.png.jpg) 标签整理 ---- 依据**由外到内,由大到小**的原则: 首先观察整...