认识达内从这里开始

css样式是我们在网页设计过程中常用的一种网页布局代码类型，下面我们就通过案例分析来了解和学习一下，css网页布局设置需要注意的问题有哪些。

设置table边框时

先设置table的css为{border-collapse:collapse;border:none;}

再设置td的css为{border:1px#aaasolid;}

div自适应高度铺背景色

div{min-height:100px;height:auto!important;height:100px;overflow:hidden!important;overflow:auto;}

宽度根据字数适应后，所有标签左浮动，防止后一个乱掉的css

{word-break:keep-all;white-space:nowrap;}

使文字以大写字母开头

transform:capitalize;/每个词以大写字母开头/

transform:uppercase;/全部大写/

transform:lowercase;/全部小写/

input和文字同行混排时对齐

{vertical-align:middle;margin-top:-2px;margin-bottom:1px;}

为元素设置box-sizing:border-box;表明宽度为内容为：本身宽度+padding+margin(高度一样);

为元素设置box-sizing:content-box;表明width宽度为内容本身宽度，padding，margin另算。

图片宽度不大于500px

{max-width:500px;width:expression_r(width>500?“500”:width);}

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。即该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

表格内部分隔线的属性：起作用的是rules这个参数，它有三个值(cols，rows，none)，当rules=cols时，表格会隐藏横向的分隔线，也就是我们只能看到表格的列;当rules=rows时，就隐藏了纵向的分隔线，也就是我们只能看到表格的行;而当rules=none时，纵向分隔线和横向分隔线将全部隐藏，我们就只能看到一个表格的外框了。

表格外部分隔线的属性：表格外边框的显示与隐藏，是可以用frame参数来控制的。(注意：只对表格的外边框起作用，对内部边、线不起作用)

只显示上边框

只显示下边框

只显示左、右边框

只显示上、下边框

只显示左边框

只显示右边框

不显示任何边框

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益!