1.padding-top、padding-bottom、margin-top、margin-bottom对于span是无效的，因为span是行内元素，作用在一行上。
参考：http://www.cnblogs.com/mingjiezhang/p/5373667.html
2.line-height对于span是无效的，因为line-height作用于块元素，而span是行内元素。
时间： 2024-10-04 11:19:06
html与css小记
html与css小记的相关文章
校园网仿站——初学HTML&CSS小记
记录的时候已经完成了2/3,还剩一个循环动画.一个登录位置以及最下方的一些链接就完成了.在一开始做的时候,因为丝毫没有头绪,便开了Chrome开发者模式看了一会源代码(HTML),直到完成了1/3,才发现还有CSS的源代码,索性直接重做.重做的效率明显高了很多,在第一次仿的时候已经学到了很多HTML&CSS的知识,但是还是有很多不知道,只能一边做一边百度. 个人觉得,在学习的时候,并没有一个完整的系统,做一点学一点导致知识点零散,只有一小部门有关联,可以串起来. 这次的作业有几个问题: 一.
html+css小记
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 注意:id 属性只能在每个 HTML 文档中出现一次. 在现代布局中,id 选择器常常用于建立派生选择器. 1 #sidebar p { 2 font-style: italic; 3 text-align: right; 4 margin-top: 0.5em; 5 } 上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落. 这个元素很可能是 div 或者是表格单元
CSS小记(持续更新......)
1 内联元素和块级元素的区别以及display的三种属性区别 在说起display属性之前,就必须先说说什么是文档流,以及文档流中的内敛元素和块级元素又是指什么? 一直觉得理解了文档流的概念,一堆CSS布局也就理解起来相对容易点,因为很多布局也都是基于这个理论的,那么什么是文档流呢? 文档流: 将html代码自上而下,从左到右的顺序排列,即为文档流..在文档流中 块级元素(block)特性表现在,如果不加其他属性,它是一个矩形空间,默认是占一行,可以通过调整高度,宽度,边距来调整矩形的布局 --
CSS小记
1.元素居中:指定宽度,然后margin auto 即可 .middle{ max-width:400px; //width:400px;//当浏览器被缩小,宽度小于元素宽度时,元素会被遮挡,所以应用max-width,会自动缩小元素以适应浏览器大小.这点对手机浏览器很有用 margin:0 auto; } 2.把列表元素的display 设为行内元素样式 inline ,可以达到导航栏栏目的效果 3.box-sizing:border-box 对于盒子模型,IE早期版本将border和padd
小记css的margin collapsing
最近在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录下来,希望初学者少走弯路. 从问题说起 先给出demo的源码和截屏,给出一个直观的印象.代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> html { width: 100
随笔小记——css中的属性覆盖问题
今天写代码时遇到一个问题,贴图记录下: 问题关于li,最开始的时候,我css中写的是:.distination-Box .dist-list li{ width:55px; }这样来控制一级li的属性,但是最后一个li的属性却不能受之前li属性的影响,这里就产生了一个优先级的问题.最后发现当我把一级li的css这样写:.dist-list li{ width:55px;},最后一个li的css这样写:.distination-Box .distination-sec-Box{ width:100
css浮动与绝对定位小记
浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定.浮动可以让一个元素移到它所在行的某一边,使得其他内容沿着该元素的边缘向下流. 浮动的盒子会脱离文档流,形成环绕的效果. 脱离文档流 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失.如果把所有三个框都
小记:css diaplay:inline-block 内容不对齐
在display:inline-block;下加入:vertical-align: top; 就可以解决不对齐的问题了 参考的是:css 前端求解, display: inline-block 左右两个元素不对齐 第四楼的回答
纯css制作三角形小记
个人理解,使用css画出三角形,其实控制的就是border. 下面效果分别是4个方向的三角形: /*向上*/ .triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ } /*向下*/ .triangle_border_down{ width:0; height:0; bord