【疑问】css

1.p{float:left}好像意思是p后面的元素往左浮动的意思啊!!
2.ff下,button的文字好像没法垂直居中
2.1 button垂直对齐,其line-height似乎需要减2px(依边框宽度而定)
3.inline-block同inline有什么区别
4.继承得到的font-size有小数点
5.<i class="display:inline-block;width
20px;height:20px;background:green"></i><p style="height:100px;background:red"></p>
为何两者间有垂直间距
6.overflow:hidden的margin-top不能不被浮动的兄弟元素覆盖?
7.我认为ff下可能input超出div的高度会被隐藏,而chrome下则不会
8.position:fixed;好像只能相对浏览器窗口定位
9.botton在ff下默认是border-box
10.botton在FF下默认将color应用到border-color
11.如果只有两个inline-block,只为其中设置一个vertical-align两个都会有相同的效果。
12.如何换行且溢出显示省略号?
13.
对i添加这条
    display: inline-block;
    width: 120px;
    overflow: hidden;/*一加这句,垂直对齐就必须加上vertical-align:middle了,不然不会与兄弟元素垂直对齐*/
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;

14.vertical-align:middle;可能会导致父元素增高,原因未知。猜测与子元素高度为奇数有关
15.
<div style="display:inline-block">
    <p style="width:50%">
        <span>asd</span>
    </p>
</div>
按理说,子元素p宽度为div的父元素的50%,算是比较合理的。但事实上不然,会是一个无法理解的结果:div不知从哪儿获得宽度(并非其父元素的50%),而p的宽度是div的50%。
16.以上的貌似可以诞生一个技巧:实现父元素为子元素的两倍宽度;【未证实】
当然,这个实现可以用更符合预料的手法:子元素的子元素设定width:200%;
17.继续讨论,p中的span若设定inline-block且width:2em,那么div将根据span定义宽度,而p的宽度为div的一半,也为span的一半。
也就是说,这实现了父元素(p)为子元素(span)一半宽度。
若设定p的width:200%,是否就是实现了16了呢?
18.overflow-x:hidden,单设定这一个时溢出,会在ff下出现垂直滚动条
19.给父元素设置这些值,其中的inline-block子元素溢出时不会被父元素的右padding遮盖?

overflow: hidden;
    white-space: nowrap;

20.如何实现,i浮动在左侧,而p垂直排列?div与i不能设置固定高度,可设置百分比。
<div>
  <i />
  <p />
  <p />
  <p />
</div>
21.td里使用float:right会导致垂直不对齐

22.我常常使用有针对性的写法:
.clients .row {width:10px;}
与之相反的写法是:
.row {width:10px;}
无针对性的写法会导致.row的设定被用到任一个.row中。
有针对性的写法会使得此设定的优先级较高,而像.auto {width:auto;}这种规则就无法运用上。

时间: 2024-10-23 12:09:02

【疑问】css的相关文章

关于CSS中text-decoration值没有替换而是累积的疑问

做了个实验: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>BaiDuTest.html</title> 5 </head> 6 <style type="text/css"> 7 8 .first{ 9 text-decoration: underline; 10 } 11 .second{ 12 text-decoration: none; 13 } 14

关于reset.css的疑问:为什么一定要重置浏览器样式?

自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样一个样式表里往往会有一大段对“浏览器样式”的清除与重置.刚开始做前端的时候一度感觉,能写出来这么一个样式表似乎很酷.很牛:做时间久了,也自己开始针对不同项目写自己的reset.css了,但也不外乎是一大堆重置样式,有时候都不关心浏览器里每个元素有什么样的默认样式,只是唯恐漏掉哪个元素没有把样式重置掉

关于css+div布局的疑问 2017-03-19

第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确到每一像素(是否含有边框像素):但是,在纸上花的草图再好再精确,也需要实际操练. 2.定位问题:明明都定位了,为什么还出现div布局混乱的现象? (未解)为什么可以通过设置margin-left/right的值为负数可以解决,但是在其他浏览器显示效果仍错误? 3.div中图片的定位,为什么按照理论设

css之overflow:细探之下有意想不到的结果

overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究之后就会发现他还有很多小特性或者说意想不到的结果: 下面就介绍下(在浏览器环境下)关于 overflow 的小总结. 哪些元素上有效? 首先 overflow 是应用到哪些元素上有效的,任意元素? 当然不是,它只能应用于块容器上. 那什么是块容器呢? 简单来说:除了 table 和可替换(置换)元素之外的块级元素都是块容器元素: 但是反过来说块容器元素一定是块级元素的吗? 当然也是 NO ,这是因为对于非替换的 in

css之overflow

也说css之overflow:细探之下有意想不到的结果 2016-11-5 滴滴出行·DDFE 作者:dolymood overflow 是一个非常常用的 CSS 属性,一般来说会认为很简单,其实细究之后就会发现他还有很多小特性或者说意想不到的结果: 下面就介绍下(在浏览器环境下)关于 overflow 的小总结. 哪些元素上有效? 首先 overflow 是应用到哪些元素上有效的,任意元素? 当然不是,它只能应用于块容器上. 那什么是块容器呢? 简单来说:除了 table 和可替换(置换)元素

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t

CSS学习总结1

1. 文字的水平居中将一段文字置于容器的水平中点,只需设置text-align特点即可: text-align:center;2. 容器的水平居中先为该容器设置一个清晰宽度,然后将margin的水平值设为auto即可. div#container { width:760px; margin:0 auto; }3. 文字的笔直居中单行文字的笔直居中,只需将行高与容器高设为持平即可.比方,容器中有一行数字. 1234567890然后CSS这么写: div#container {height: 35p

初始化CSS

为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 最简单的初始化方法就是: * {padding: 0; margin: 0;} .有很多人也是这样写的.这确实很简单,但有人就会感到疑问:*号这样一个通用符在编写代码的时候是快,但如果网站很大,CSS样式表文件很大,这样写的话,他会把所有的标

【学习笔记】CSS基础

[学习过程遇到疑问和延伸阅读] 1.文本与字符的概念比较模糊,会导致应用CSS属性(letter-spacing,text-indent,word-spacing)时混乱 文本(Text),是书面语言的表现形式:计算机的一种文档类型.从文学的角度说,通常是具有完整.系统含义(Message)的一个句子或多个句子的组合.一个文本可以是一个句子(Sentence).一个段落(Paragraph)或者一个篇章(Discourse). 字符(character),是指计算机中使用的字母.数字.字和符号,