border | 易学教程

堆叠上下文

阅读更多关于堆叠上下文

　　本文试着先解释一下堆叠顺序是什么，在引入堆叠上下文。　　MDN上这样解释堆叠上下文：　　层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。　　平时我们浏览网页时，可以理解为从网页的正视图方向观看，理解堆叠上下文时，我们试着从侧视图的方向理解。方方老师说CSS的一个很重要的学习方法就是实验法，本文试着将所有的结论都有实验的依据。（祝福我吧，希望可以不看回放。。。）　　首先，我们先思考一下，border和background的先后关系： <body> <div class="demo"></div> </body> <style> .demo{ width: 100px; height: 100px; border: 10px solid rgba(255,0,0,0.5); background: green; } </style> 　　效果图：　　　　可见，background < border；接着，我们在父元素里加一个div，观察一下border和子元素div的关系：　　 <body> <div class="parent"> <div class="child"></div> </div> </body> <style>

HTML编程(2)-学习

阅读更多关于 HTML编程(2)-学习

HTMl图像在HTML中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性(src)。src指“source”。源属性的值是图像的URL地址。定义图像的语法是： <img src="url" /> URL指存储图像的位置，如果名为"boat.gif"的图像位于www.w3school.com.cn的images目录中，那么其URL为 http://www.w3school.com.cn/images/boat.gif。示例： 1）背景图片： <html> <body background="/i/eg_background.jpg"> <h3>图像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果图像小于页面，图像会进行重复。</p> </body> </html> 结果如下：图像背景 gif 和 jpg 文件均可用作 HTML 背景。如果图像小于页面，图像会进行重复。 2）排列图片： <html> <body> <h2>未设置对齐方式的图像：</h2> <p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已设置对齐方式的图像：</h2> <p>图像 <img src="/i/eg_cute.gif"

【MediaElement】WPF视频播放器【2】

阅读更多关于【MediaElement】WPF视频播放器【2】

一、前言上回说到需要做放视频的使用向导，这两天公司里的老司机一直帮我答疑解惑，让这个任务变得挺顺的，真心感谢他们！这次与【1】中的不同之处在于：（1）播放和暂停按钮集成在<MediaElement>的点击事件之中，点一下是播放，再点一下是暂停（2）加入了微软官方改写的粒子特效（3）加上了自己琢磨的按钮旋转效果，以及按钮弹出popup效果（4）进度条改善美观二、代码前台： 1 <Window 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:WPF_Nav" 7 xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" xmlns:dxwui="http:/

HTML表单控件

阅读更多关于 HTML表单控件

input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件传统控件 button 定义一个按钮 select 定义一个下拉列表 option 定义下拉列表中的一个选项 optgroup 定义选项组，用于组合选项 textarea 定义多行的文本输入控件 fieldset 分组表单内的相关元素 legend 定义fieldset元素的标题 label 定义input元素的标注 button button元素用来定义一个按钮，button元素内部可以放置文本或图像或其他多媒体内容。但唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为始终为button元素设置type属性，IE7-浏览器的默认类型是button，而其他浏览器的默认类型是submit IE7-提交button元素之间的文本，而其他浏览器则会提交value属性的内容 <button> 元素比 <input> 元素更易样式化。可以添加内联HTML内容（如 <em> ， <strong> 甚至 <img> ），并使用:after和

隐藏select边框及下接箭头方法

阅读更多关于隐藏select边框及下接箭头方法

代码： /* 套在Select外层，用于隐藏Select框 */ .DivSelect { position : relative ; background-color : transparent ; width : 140px ; height : 17px ; overflow : hidden ; /* 隐藏了小三角，因为宽度为110px,而select宽度为130px */ border-width : 0px ; border-top-style : none ; border-right-style : none ; border-left-style : none ; border-bottom-style : none ; } /* 设置Select样式 */ .SelectList { position : relative ; background-color : transparent ; TOP : -2px ; left : -2px ; border-width : 0px ; border-top-style : none ; border-right-style : none ; border-left-style : none ; border-bottom-style : none ; width : 160px ; display :

50道 CSS 经典题

阅读更多关于 50道 CSS 经典题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

markdown样式代码保存

阅读更多关于 markdown样式代码保存

/*此样式是没任何效果的，留给你填写的你可以随意修改，组合你想要的css样式没有最好的，只有最合适的，看看后面的示例，你就会懂得写个你最爱的样式，并保存了的！建议先复制某一你喜欢的css模板样式到此样式下，再在此基础上自定义自己的css样式。来试试吧！ ^_^*/ h1,h2,h3,h4,h5,h6 { color: #3e3e3e; } h1 span,h2 span,h3 span,h4 span{ border-left: 5px solid #ff5722; padding-left: 10px; } h1{ border-bottom:2px solid #ff5722; line-height: 38px; } h1 span{ color: white; background: #ff5722; border-left: 0; padding: 0 10px; border-top-left-radius: 8px; border-top-right-radius: 8px; } /* 一级标题 */ h1 { border-bottom:2px solid #ff5722; font-size:1.3em; } /* 一级标题内容 */ h1 span { display:inline-block; font-weight:normal;

Web—02-轻松理解css

阅读更多关于 Web—02-轻松理解css

CSS基本语法以及页面引用 CSS基本语法 css的定义方法是：选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+"/" */ div{ width:100px; height:100px; color:red } CSS页面引入方法 1、外联式：通过link标签，链接到外部样式表到页面中。 <link rel="stylesheet" type="text/css" href="css/main.css">` 2、嵌入式：通过style标签，在网页上创建嵌入的样式表。 <style type="text/css"> div{ width:100px; height:100px; color:red } ...... </style> 3、内联式：通过标签的style属性，在标签上直接写样式。 <div style="width:100px; height:100px; color:red ">......</div> CSS文本设置常用的应用文本的css样式： color 设置文字的颜色，如： color:red; font-size 设置文字的大小，如：font-size:12px; font-family 设置文字的字体，如：font

【原】移动web点5像素的秘密

阅读更多关于【原】移动web点5像素的秘密

最近和一个朋友聊天，朋友吐露了工作上的一些不开心，说自己总是喜欢跟别人比较，活得比较累，这种感觉大部分人经历过，往往觉得是自己心态不好，其实不然，这是人性，此时应该快速摆脱这种状态，想到DOTA大9神的笔录，游戏也是人生，懂得思考的人生才会不断促使自己进步，详细我不清楚了，大概意思是这样：人这一辈子就一次，快乐很重要，人如何感受到快乐，说起来真的不难，有两个点，一点是“你能够让别人喜欢你”；另外一点是“跟好朋友一起时你能够卸下面具”，是怎么样的就怎么样。希望能给不开心的同学寻找一丝帮助~ 回到今天的主题.5px (0.5px简写为.5px) ，可能大家听过 .9 ，它是android平台应用软件开发里的一种特殊图片形式，本文的.5指如何使用css实现.5px的线条 ~ 目录你可能不知道的.5px border属性不支持.5px吗实现.5px的线条实现.5px的圆角边框你可能不知道的.5px 移动web设计中，在retina显示屏下网页会由1px会被渲染为2px，那么视觉稿中1px的线条还原成网页需要css定义为.5px 。文章开头的漫画中，细心的设计师发现粗线条并吐槽，前端哥的理由是因为css的border-width不支持.5px，所以用了1px来替代，最终渲染为2px的粗线条，这个问题往往会被忽视，从而导致移动网页中普遍存在2px的粗线条。

background-clip和background-origin 详解

阅读更多关于 background-clip和background-origin 详解

<div class="box border-box"/> <div class="box padding-box"/> <div class="box content-box"/> <div class="box clip-border-box"/> <div class="box clip-padding-box"/> <div class="box clip-content-box"/> .box{ padding: 20px; margin: 30px; height: 200px; width: 200px; border: 20px dashed red; display: inline-block; background: yellow url(./assets/border.jpg) no-repeat; } .border-box{ background-origin: border-box; } .padding-box{ background-origin: padding-box; } .content-box{ background-origin: content-box; } .clip-border-box{ background-clip: border-box; } .clip-padding-box{ background-clip:

订阅 border