前端HTML+CSS常见问题与部分实践应用
关注
分享
扫一扫
文章平均质量分 50
高度塌陷问题，盒子居中问题，百叶窗，二级菜单等等
大聪明码农徐
我很懒，还没有添加简介
展开
-
css实现自适应两栏三栏布局
一、两栏布局 二、三栏布局 1、float+calc() 2、float + overflow:hidden; 3、圣杯布局（1） 4、 圣杯布局（2） 4、圣杯布局（3） 5、双飞翼布局原创 2022-03-02 15:33:13 · 584 阅读 · 0 评论 -
HTML+CSS实现百叶窗效果
<style> /* 清除默认边距 */ *{ margin: 0; padding: 0; } /* 去除li的默认样式 */ li{ list-style: none; } /* 去除a的下划线 */ a{ text-decoration: none; ...原创 2022-01-26 15:34:43 · 1609 阅读 · 0 评论 -
CSS中的浏览器兼容与内核
为什么浏览器之间有兼容？ 浏览器开发时使用的核心代码不同，浏览器厂商为了利益故意设置的技术壁垒。 浏览器兼容相关的专业术语 CSS BUG 出现的问题或者故障。 CSS hack 自己研究的一些解决问题的方法。 CSS filter 过滤器 !important 对于IE6不识别,其他浏览器识别，对于其他浏览器来说添加了该过滤器之后,该 声明的权重到最大。+或者*，\9，\0，_. 浏览器内核 浏览器内核 IE内核或者MSHTML或者trident 代表浏览器是IE .原创 2022-01-24 13:26:42 · 406 阅读 · 0 评论 -
纯CSS实现二级菜单
书写基本样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2022-01-23 15:03:20 · 2903 阅读 · 0 评论 -
CSS高度塌陷问题及解决方法
触发条件 包含结构,所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷。 例如： 解决方法一： 给父元素添加固定高度。 缺点:不适合高度自适应的布局。 代码： <style> *{ margin: 0; padding: 0; } ul{ /* 给父元素设置固定的高度 */ height: 600px;原创 2022-01-23 13:59:11 · 5160 阅读 · 0 评论 -
CSS水平垂直居中的九种方式
居中元素宽高已知 （一）absolute + margin <style> .father{ width: 500px; height: 500px; border: 1px solid black; position: relative; } .child{ width: 100px; he原创 2022-01-26 14:52:56 · 195 阅读 · 1 评论