div的border & width

【div的border & width】的更多相关文章

长时间不用css,发现有些基础知识竟有些遗忘,由于项目中的一些css样式,进行了以下相关测试. div的width及height均设置为0后,div的border会怎样显示.经过测试后,发现border的显示与div的width/height独立,显示不受它影响. 以下为例子: 代码如下: <!doctype HTML> <html> <head> <title>测试</title> <style type="text/css&q…

background 的一些小的细节: 1, 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 2设置多个背景图片 ; 3) background-position定位百分比的计算方式: 4)background-clip 和 background-origin 的区别

1. background (background-color, background-image) 背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ; 背景颜色: 起点是 border的外边缘 http://www.w3cplus.com/content/css-background-origin 背景图片:定位的起点是 padding的外边缘处: 这是因为: background-origin 指定背景图像的定位区域 …

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法一.总结一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-sizing的三个属性分别是什么? 根据意思来记很好记的值一.content-box (向外边框) 值二.border-box (向内边框) 值三.inherit (继承爸爸) 2.设置边框的样式用什么属性? box-sizing box-sizing:border-box; 二.div宽度设置wi…

放假回来啦！！小技能：一个div不给width，怎么让它居中捏？`(∩_∩)′

答案是:这个div没有浮动的话,就用text-align: center; 有的话...我也不知道了…

MVC——数据库增删改查(Razor)

一.显示信息 .Models(模板) private MyDBDataContext _context = new MyDBDataContext(); //定义一个变量取出所有数据 public List<Student> Select() { return _context.Student.ToList();//把所有数据都显示出来,全部查询 } .Controllers(控制器) public ActionResult Index()//显示信息 { ViewBag.data = new…

DataTabe对象的例子

前: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataTable对象.aspx.cs" Inherits="WebApplication1.DataTable对象" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt…

literal控件的例子

Literal的Mode属性,举例说明这个属性的枚举值:PassThrough Encode Transform <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Literal控件.aspx.cs" Inherits="WebApplication1.Literal控件" %> <!DOCTYPE html PUBLIC "-…

用Response对象的write方法和<%%>及<%=%>输出同样效果的乘法表格

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Response1.aspx.cs" Inherits="WebApplication1.Response1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www…

css 对div用hover设置border，出现抖动和div走位问题，解决方法

样式设置 : div:hover { border:1px solid red;} 当鼠标移动到div时,产生抖动和偏移. 产生的原因: 是因为设置border时设置了1px边框,多出的这1px,与其它元素产生了挤压, 导致div偏移. 解决方法: 第一种方法:是先将这个div设置一个跟背景颜色一样的边框,比如背景颜色为#aaa:那么你先设置这个div的样式:div {border:1px solid #aaa;},然后再设置hover动作,div:hover { border:1px soli…

css样式之border

border用法详解: 1.border-width 属性设置边框的宽度可能的值:像素 2.border-style 属性设置边框的样式可能的值:solid(直线),dashed(虚线),dotted(点线) 2.border-color 属性设置边框的颜色可能的值:red,#f00,#ff0000,rgb(255,0,0),transparent border-left 属性设置左边框 border-right 属性设置右边框 border-top 属性设置上边框 border-bott…

CSS3变形记(上)：千变万化的Div

传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3D变换.从而可以替代一些以前必须使用图片实现的功能,大大加快了网页的响应速度.例如,css3可以实现渐变背景.绘制圆角和一些小图标等! 今天,就来说说如何用css3绘制一些小图标和css3中的变形.建议用chrome浏览器查看,这里为了方便大家理解,暂时没有写其他浏览器前缀! 一.div和css3…

CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertic…

div+css3绘制基本图形

基本图形包括:矩形.圆角矩形.圆形.椭圆形.三角形.值线.弧这些图形的绘制用到了CSS圆角属性,不考虑IE8. 下面的实现在chrome浏览器运行通过. 1.矩形比较简单,通过CSS设置宽度.高度.背景色即可. html: <div class="rectangle"></div> css: .rectangle { width: 150px; height: 100px; background-color: orangered; } 呈现: 2.圆角矩形…

width:100%;与width:auto;的区别

<div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:300px; } p{ width:100%; /*width:auto;*/ padding:10px; background-color:#000; } 如果是p的width:100%,则说明p的width会得到980px就已经充满div区域,然后自己又有padding,所以会超出div. 而当width:a…

剖析width、height继承

在CSS这个一切皆为框的世界里,我们今天再来探究探究width与height. 我靠,width与height有什么好探究的,不就是设定元素的宽.高吗?大不了还要区分标准盒子模型和IE盒子模型的区别,申明文档类型,统一盒子模型,不就over啦.哈哈,的确也是这样的,不过width.height还有一特性哦,那就是继承,子元素通过设置百分比可以继承父元素的宽高. 因为盒子模型有两种,所以呢,下面我们就来分别看一看,width和height在这两种盒子模型中,到底是怎么继承父元素的. *为了方便大家…

jquery动态改变div宽度和高度

效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q…

width 、 height 与 box-sizing : border-box ,content-box 的关系

默认 width .height的 content-box 的宽高. box-sizing 经常用来设置 width.height指定的区域 box-sizing 经常用做一些自适应的布局. 语法: box-sizing:content-box | border-box 默认值:content-box 适用于:所有接受 <' width '> 和 <' height '> 的元素继承性:无动画性:否计算值:指定值取值: content-box: padding和border…

JS控制div跳转到指定的位置的解决方案总结

总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: <div id="container"> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3&qu…

div垂直居中的几种方法

CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素…

css给div添加0.5px的边框

具体代码实现如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title> <style> div{ position: relative; width: 100%; background-color: #ccc; } div:before{ content: "…

水平垂直居中div（css3）

一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min…

div+css常见浏览器兼容问题以及解决办法

1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙,解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样.细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object…

border家族

border-style:dotted solid double dashed(上边框是点状,右边框是实线,下边框是双线,左边框是虚线)边框样式;border-width(边框宽度);border-radius(创建圆角);border-color(边框颜色);border-shadow(添加阴影); 案例1:太极图 HTML: <div id="a1"></div> CSS: #a1 { width: 96px !important; height: 48px…

CSS教程:div垂直居中的N种方法[转]

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption>等,而像<div>.<span>这样的元素是没有valign特性的,因此使用vertic…

div模态层示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> <head> &l…

纯css来画图-border应用

基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: 1px solid black; 我们也可以分开写成下面的形式: border-width: thick; border-style: solid; border-color: black; 解释: 1.border-width border-width简写属性为元素的所有边框设置宽度,或者单独地为…