qq_44242030的博客

前端响应式原理： 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 响应式设计与自适应设计的区别： 响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容 自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面 方案： 1.媒体查询： CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 @media screen an

文章目录一、Css3新增属性二、position属性值三、display:none和visibliy:hidden的区别四、盒子模型五、块元素和行元素区别六、选择器优先级七、清除浮动 一、Css3新增属性 1.CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow：C.

一、不同浏览器的标签默认的外边界和内填充不同 问题表现：不加样式控制下，margin和padding差异较大 解决方案：css里 *{margin:0; padding:0;} 备注：这是最常见也是最易解决的一个兼容问题，几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0 二、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大 问题表现：IE6后面的一块被顶到下一行 解决方案：在float的标签样式控制中加入display:inline;转化为行内属

1.居中元素定宽高（其中像素都代表居中元素高度的一半） absolute + 负margin .parent{ position: relative; } .children{ position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } absolute + margin auto .children{ position: absolute;