CSS中border和outline的区别

border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outline: outline-width:1px; outline-style:solid; outline-color:#ccc; 可以简写为:outline:1ox solid #ccc; 2者的用法相似,但是border是会占据盒子模型的大小,而outline是一个轮廓,不会占据盒子模型的大小.…

css中border画三角形

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name=&qu…

CSS中rem、em的区别

引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/51804227 前几天面试了一个最基本的问题,现在复习一下它的原理 CSS中的长度单位有8个,px,em,rem,pt,ex,pc,in,mm,cm; px--像素,相对于设备的长度,像素是相对于显示器的屏幕分辨率而言的. em--相对长度单位,是相对于其父元素的文本的字体尺寸.如果父级元素未设置字体大小,则相…

CSS中的class与id区别及用法

转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的.接下来我们就来详细了解CLASS与ID基本属性及用法. Class 在程序中称“类”,同时在CSS中也书面语也叫…

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10…

css中margin-left与left的区别

研究下拉菜单和弹出菜单时比较所得: 1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置: 测试代码: <div style="position:relative;top:100px;left:100px;border:1px solid blue;width:100px;height:100px;"> <div id="outer" s…

CSS中link与import的区别

一.import的用法 1,在html文件中 <style type="text/css"> @import url(http://www.dreamdu.com/style.css); </style> 2,在css文件中 @import url("CSS文件"); 对@import url()做一下总结: 1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文…

border和outline的区别

如果有一个需求,给一个元素增加一条边框,想必大家会习惯且娴熟的使用border来实现,我也是这样但其实outline也能达到同样的效果,并且在有些场景下会更适用,比如下面的demo 使用border后,div宽度增加,导致超出父元素使用outline后,div元素宽度不会改变 DEMO <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&…

外部引用CSS中 link与@import的区别

差别1:link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了. 差别2:加载顺序的差别.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载. 差别3:兼容性的差别.由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才…

css中border制作各种形状

css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度为0: 设置border的高度为0:如图最后设置左右border的颜色为透明,如下图: 贴代码,做个小三角形 <style> .border{ width:; height:; border-bottom:100px solid red; border-left:50px solid trans…

CSS中margin与padding的区别

CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象.补白(padding):补白位于元素框的边界与内容区之间.很自然,用于影响这个…

css中import与link用法区别

方式:引入CSS的方法有两种,一种是@import,一种是link @import url('地址');//注意,这种方式可以放在页面也可以放在css文件中<link href="地址" rel="stylesheet" type="text/css" />区别:1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务:@import属于CSS范畴,只能加载CSS.2:link引用CSS时,在页面载入时同时加载:@i…

html css中id和class的区别比较

在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用id,也可以使用class. 1.在css样式表中书写时,id选择符前面应该加前缀符号‘#’,而class选择符前面应该加前缀符号‘.’. 2.id属性一般在一个页面中只可以使用一次,而class可以被多次引用. 3.id作为元素的标签,用于区分不同结构和内容,而class作为一个样式,它可以应用到…

CSS中zoom和scale的区别

zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方.zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置.另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算.运行<!DOCTYPE html><style>div { width:300px;height:100px; border:1px solid #CCC; font-size:0px; line-height:100…

【对比分析三】CSS中 link 和@import 的区别

1). link 是 XHTML 标签,无兼容问题: @import 是在 CSS2.1 提出的,只有IE5以上才能识别. 2). 语法结构不同. link (链接式)只能放入HTML源码中,语法为: <link rel="stylesheet" href="style.css" type="text/css"/> @import (导入式)语法为: <style type="text/css">…

css中padding和magin的区别

1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第一个用于上-下,第二个用于左-右. 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下. 在IE4+,margin属性不可用于td和tr对象. 用法:body { margin: 36pt 24pt 36pt; } 2.Padding 用来设置元素内容到元素边界的距离. 如果提供全部四个…

css中绝对定位和相对定位的区别

先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定位或者相对定位的祖先元素).如果元素没有已定位的祖先元素,那么它的位置则是相对于最初的包含块(body). 绝对定位本身与文档流无关,因此不占空间,普通文档流中的元素的布局就当绝对定位的元素不存时一样,所以它们可以覆盖页面上其他的元素,且可以通过z-index属性来控制这些层的对方顺序. #box…

CSS 中 nth-child 和 nth-of-type 的区别

假设有如下代码结构,想要查找 Piggy 那个 p <section> <h1>Words</h1> <p>Little</p> <p>Piggy</p>  </section> 使用 nth-child 是不正确的: p:nth-child(2) { color: red; } /* Now incorrect */ 使用 nth-of-type 是正确…

CSS中link和@import的区别

1.link属于HTML标签,而@import是CSS提供的 2.页面被加载时link会同时被加载:而@import引用的CSS会等到页面被加载完再加载 3.@import只在IE5以上才能识别,而link是HTML标签,并不存在兼容问题…

css 中 max-width 和 min-width 的区别

max-width:规定元素本身最大宽度,即元素本身 (该div) 的宽度应小于等于其最大宽度值. min-width:规定元素本身最小宽度,即元素本身应大于等于其宽度值. 例:min-width:1000px; 则其区域块大于实际宽度值关于@media查询(响应式设计) 如果文档宽度小于 300 像素则修改背景颜色: @media screen and (max-width: 300px) { body { background:pink; }}…

区分html与css中的属性

CSS中id与Class的区别 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次:class可以多次引用. 3.ID是一个标签,用于区分不同的结构和内容,就象名字,如果一个屋子有2个人同名,就会出现混淆:class是一个样式,可以套在任何结构和内容上,就象一件衣服: 4.从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式:class是先定义好一种样式,再套给多个结构/内容. 目前的浏览器还都允许用多个相同ID…

平常我们是如何区分css中class和id之间有什么区别的？

我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用id,以及它们用法与限制是怎么样的. ID和class都是“钩子” 我们需要一个使用html/xhtml语言描述文档内容的方式,类似的基础元素有<h1>,<p>和<url>来完成这样的工作,但我们的基础标签不能覆盖网页元素和布局选择中的所有类型.因此我们需要ID和class…

CSS中的margin、border、padding区别

CSS padding margin border属性详解图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin…

CSS中设置border:none和border:0的区别

在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一是理论上的性能差异:二是浏览器兼容性的差异. 1.性能差异 [border:0;]把border设为"0"像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值.[border:none;]把bord…

[html]CSS中的margin、border、padding区别

图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.…

CSS中的margin、border和padding的区别

aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA…

css中单位em和rem的区别

在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局. 对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素. rem中的r意思是root(根源),这也就不难理解了. em 子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的fo…

CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习

CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr("border","none"); $("#CUSTOM_PHONE").css('border-bottom','1px solid #3BC2B5'); }); $("#CUSTOM_PHONE").blur(function(e…

盒模型中padding、border、margin的区别

在CSS中,规定了一种基本设计模型——盒模型(也叫框模型),如图所示: 其中包含了四部分内容:element/元素(即图中文字).padding/内边框(图中两个红色边框之间白色部分).border/边框(蓝色区域).margin/外边框(图中两绿色边框中间白色部分). 区别: element占据的就是字体本身的字号大小: padding和margin 类似,指的是一段距离,只能设置上.下.左.右方向的一段长度,不能设置区域颜色: 而border指的是一块区域,可以设置上下左右方向的长度,而且可…

比较css中单位px，em和rem的区别

国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如…

【CSS中border和outline的区别】的更多相关文章