CSS应用的小问题总结

1.两个元素换行书写时,在实际的布局中展示为两个元素之间多了一个区间(这个区间通常是因为代码在换行时,解析会自动默认为一个空格字符),所以在实际应用时,如果想要将两个元素完全无缝隙的放置在一起并排显示时,应该注意使用浮动和定位,或者可以通过设置父级元素的font-size:0;的方法;

2.使用绝对定位或者固定定位时,会使元素脱离文档流,此时元素会在文档层的上方显示,可能导致其他元素被挡在下方,不能正常显示出来。此时就需要设置z-index来解决将脱离文档流的元素设置层级,以达到显示效果;

3.很多时候,对于要显示外框线的元素,我们都会下意识的去设置它的边框border的属性值。虽然这样做是对的,但是在固定了大小的容器中,而要显示的元素的大小刚刚好,那么此时就需要设置outline来替代border。(outline只能四个边同时设置,而border可以分别设置单边的属性,使用时应该根据需求来设置)。

时间: 2024-08-12 12:30:30

CSS应用的小问题总结的相关文章

平时遇见CSS的一些小技巧

清除浮动的三种方法 1.使用clear 样式清除 样例: .clear-float {clear:both;} clear 属性是 CSS 1 就提供的用来清除浮动的样式,设置了 clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,忽略其 margin-top 设置.这样,父容器高度未设定(值是 auto)时,由于定义的清理浮动样式元素所在位置处于浮动元素之下,容器计算后的实际高度就包含了浮动元素. 2.使用伪元素:after 清除 样例:.after

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p

11个提高CSS技巧的小知识,你知道吗?

前端开发越来越侧重于效率和性能,使用LESS和SCSS资源的预处理器为我们前端CSS编写工作提供了很大的便利.但是也有很多简单的方法可以编写小巧快速的CSS代码,提高开发效率并解决许多常见的问题. 1.使用CSS reset 像normalize.css这样的CSS重置库非常受欢迎,它为您的站点样式提供了一个清爽的选择,能确保浏览器之间更好的一致性.而实际上并不是每个项目都需要这些库中包含的所有规则,我们可以通过一些简单的css规则就能规避浏览器之间的差异.请看下面的盒模型代码: 1 * { 2

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

JQuery和html+css实现带小圆点和左右按钮的轮播图

是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;

来一波CSS兼容问题小总结吧

1.DOCTYPE 影响 CSS 处理; 2.火狐 谷歌等浏览器 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.火狐 谷歌等浏览器支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然

CSS进阶之CSS的一些小技巧

如何设置水平居中? 分两种情况 行内元素与块级元素 1.行内元素(如图片 文字)    div.textcenter{    text-align:center;    }    <div class="textcenter">hello joe!</div> 2.块级元素 块级元素的水平居中又分为两种 定宽块状元素 和 非定宽块状元素 定宽块状元素(即块状元素的width值是定值): 可以通过块级元素的左右margin为auto来实现中 如下    div{

从零开始学习html(十五)css样式设置小技巧——下

六.垂直居中-父元素高度确定的单行文本 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 8 .wrap h2{ 9 margin:0; 10 height:100px; 11 12 background:#ccc; 13 } 14 </style> 1

【小技巧】只用css实现带小三角的对话框样式

一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <title>三角</title> <style> .main{width: 100px;border: 1px solid red;height: 100px;position: relative;} .box{width: 0;height: 0;border-style: soli

css的一些小技巧!页面视觉差!

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎. 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括.这导致了一个很好的光学效应,使参观者的注意. 在网页设计中,为了实现这是简单的一个网站添加一个jQuery插件的最常见的方式.这样做,不幸的是,有几个缺点.这些插件是将事件处理程序附加到滚动事件的窗口目标这导致了事件处理通过JavaScript吨(处理滚动事件可以很容易造成性能问题,应仔细考虑).将上述层,图像背景的位置获得计算和设置为不同的元素,然后另外的原因很多D