`

CSS样式问题集锦(二)

阅读更多
  1. 表格宽度固定,不受内容影响  
    table{table-layout:fixed}
    这样的好处是:据说速度会比较
  2. 高度为1px的单元格或div,一般用来做分隔线
    以div为例:关键的内容要放一个空格的转义符
    .o{height:1px;line-height:1px;height:1px}
    <div class="o">&nbsp;</div>
    这样很巧妙,就不用放一个1宽、高都是的图片了。
  3. 过长内容自动显示省略号
    .dd{
      width:20px;
      text-overflow:  ellipsis; /*有的浏览器不这样写,具体请上网查一下。*/
      overflow:hidden;
      white-space:nowrap;}
    <div class="dd">这是个很长很长很长很长很长的文本</div>
    不知大家有没有想过,对于a也是一样的,只是多个设置display:block
  4. 使用子选择器、并列等方式减少代码数量
    如:div.m表示类为m的div元素
      .m a表示类为m的元素中的a;#m a就表示ID为m的元素中的a
      a,b表示a及b
    灵活的使用这些技巧,可以极大的减少css代码的数量,而且便于维护
  5. 数量为零时,可以不写单位
  6. 如何控制table、div等元素高度为100%,也即占满整个窗口
    html,body{height:100%}
    然后,再对table、div等元素设置高度为100%就可以了。
分享到:
评论

相关推荐

    css样式集锦

    ### CSS样式集锦知识点详解 #### 一、CSS概述 - **定义**:CSS全称为Cascading Style Sheets,即层叠样式表。它是一种用来为HTML文档添加样式的设计工具,能够极大地丰富网页的表现形式。 - **作用**:通过CSS,...

    实用CSS特效精华集锦

    10. **浏览器兼容性**:虽然现代浏览器对CSS3的支持较好,但考虑到老版本浏览器,开发者仍需关注各特性在不同浏览器中的兼容性问题。 这个“实用CSS特效精华集锦”集合了这些关键技巧,旨在帮助网页设计师提升作品...

    超酷css特效代码集锦

    6. **Grid布局**:CSS网格布局(Grid)提供二维布局系统,使开发者能轻松地创建复杂的网格结构。通过`display: grid`定义网格容器,用`grid-template-columns`和`grid-template-rows`设定列和行。 7. **响应式设计*...

    用CSS设计艺术字集锦二.rar

    本压缩包“用CSS设计艺术字集锦二.rar”显然是一个专注于利用CSS来创造艺术化文字效果的资源集合。 在“JS特效-文字特效”的标签下,我们可以推测这个集锦可能不仅包含纯CSS的艺术字设计,还可能结合JavaScript实现...

    HTML5 CSS3 技术资料集锦中(价值上千元)

    CSS3,即层叠样式表第三版,是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。CSS3的新特性包括: 1. 选择器增强:新增了伪类(如:hover, :active, :focus)和伪元素(如::before, ::after)...

    css-html资源集锦

    CSS 2是CSS的第二个主要版本,包含了布局、定位、列表、表格、颜色管理、打印等众多特性。学习这个版本可以帮助理解基本的样式定义和选择器,以及如何实现网页元素的精确控制。 接着,"精通CSS.pdf"是一本深入探讨...

    CSS技术参考手册 CSS技术集锦

    **CSS技术参考手册——CSS技术集锦** CSS(Cascading Style Sheets)是网页设计中的核心技术,用于控制网页的布局和样式。它让开发者能够独立于内容来定义页面的呈现方式,实现页面的美观和易读性。CSS2是CSS的第二...

    HTML5 CSS3 技术资料集锦上(价值上千元)

    CSS3,即层叠样式表第三版,是控制网页样式和布局的标准。CSS3带来了许多革命性的变化,如选择器的增强,允许更精确地定位元素。例如,伪类`:hover`, `:active`, 和`:focus`可实现更丰富的交互效果,而`:nth-child()...

    Css 文档集锦

    《CSS文档集锦》 在Web开发领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它赋予HTML或XML文档以样式和布局。这个“Css 文档集锦”似乎是一个包含有关CSS技术详细信息的资源集合,特别是关于基本配色的...

    超炫CSS3文字特效集锦

    今天我们要来分享十几种样式各异的CSS3文字特效,有些是3D的文字效果,有些是带有立体的文字阴影,而且色彩也都很不错。这几款CSS3文字特效用了很多text-shadow和filter属性,是这些CSS3属性,让枯燥的黑白文字变得...

    网页制作常见问题集锦

    2. CSS样式问题:CSS用于控制网页的样式和布局,常见的问题有选择器优先级理解不透彻、浮动元素导致的父元素高度塌陷、盒模型理解错误等。例如,浮动元素未清除可能会引起后续元素的错位,而box-sizing属性的设置...

    html+css实例

    CSS可以使用选择器(如类选择器 `.class`,ID选择器 `#id` 或元素选择器 `element`)来指定需要应用样式的元素,然后定义相应的属性,如`color`、`font-size`、`background-color`等。此外,CSS还有盒模型(Box ...

    用CSS设计艺术字集锦二特效代码

    在实际应用中,可以将这些CSS样式应用于`&lt;h1&gt;`、`&lt;p&gt;`、`&lt;span&gt;`等元素,或者通过JavaScript动态创建艺术字。配合HTML结构,我们可以创造出各种吸引人的标题、标语或按钮。 总之,CSS艺术字设计涉及多种属性和技巧...

    最全面的CSS3鼠标滑过动画按钮集锦

    这个压缩包文件“texiao8289_1560929568”可能包含了多个示例代码、CSS样式文件和HTML文件,用于展示不同的CSS3滑过动画按钮。开发者可以参考这些实例来学习和应用到自己的项目中,提升网页的用户体验和视觉吸引力。

    各种浏览器下常见css的兼容问题集锦

    当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,...

    蓝色理想经典Html问题集锦.rar

    《蓝色理想经典Html问题集锦》是一个非常宝贵的资源,它汇集了HTML领域的众多经典问题及其解决方案,旨在为开发者提供一个方便、高效的参考工具。HTML,全称HyperText Markup Language,是一种用于创建网页的标准...

Global site tag (gtag.js) - Google Analytics