HTML+CSS学习笔记.5

1关于CSS表格的属性之前说过使用border可以为CSS表格添加边框使用上图的属性还可以进行对边框的一些拓展。border-width可以修改边框宽度border-color可以修改边框颜色,border-style可以修改边框的风格主要用于修改边框的样式如是实现还是虚线。border为边框复合属性后面可跟随边框的所有属性用法类似font这四个边框属性也经常在其他元素使用。但实际上表格有些独有的属性下面将举例以上5个标签只能在table标签中使用table-layout可以设置列宽高当属性为auto或者fixed时高度会默认或者均分使用border-spacing时可以改变单元格间距使用border-collaspe时可以合并或不合并单元格边框若不使用该属性则默认不合并。empty-cells可以隐藏没有内容的单元格caption-side用于设置表格的标题位置但一般很少有位置默认 在表格上方。2关于CSS背景属性之前说过background可用于改变背景颜色但实际上background的功能有很多用法与font和border也类似。bcakground-后加color,image,repeat和position可以设置被禁言是图片重复方式以及背景图的位置当直接使用background时后面也可跟有多个值并且无顺序要求。3cursor可以设置鼠标的光标样式除此处列举出的内容外还可以自定义样式但需要自己另行下载。4关于CSS的盒子模型CSS中的单位其实并不止px一种还有em,rem和%它们大多会受到其他元素的影响。em会受到font-size元素的影响rem则会受到根字体的影响。%会继承父元素的字体的大小父元素即所指定元素对应的上一级元素。下面先补充一下元素的分类元素主要分为三类即块级元素行内元素和行内块级元素。但实际上在早期并不存在行内块元素这一说这是后面补充的所以理论上讲可以说元素分为两类为行内元素和块级元素行内块元素属于行内元素的一种。出了之前说过的是否独占一行有不同之外块级元素默认宽度撑满父元素高度由内容撑开可通过CSS设置宽高。行内元素默认的宽度和高度都由内容撑开无法通过CSS设置宽高。行内块元素默认的宽度和高度可以由内容撑开但仍然可以通过CSS设置宽高。下面将进行对三大元素的总结同时元素对应的样式是可以改变的使用display属性可以修改元素的默认显示模式none可以隐藏元素block可设置成块级元素inline可设置成行内元素inline-block可设置成行内块元素。盒子模型由4部分组成即margin(外边框)border(边框padding(内边框connect(内容)。我们平时看到的内容一般显示在content区域。盒子的大小为connectpaddingborder外边框是不加入计算的。对于盒子的content区域来说有很多能用的CSS属性它们通常用于设置对应的长度。但需要注意的是不论height还是width属性范围值和准确值一般都是不一起使用的。但这些属性不一定使用因为content存在默认宽度。当不设置width值的属性值的时候元素会有一个默认宽度宽度会受到上一级元素的content区域的影响。总宽度会变成上一级的content-自身margincontent的宽度会变成上一级content-自身margin-自身左右border-自身左右padding。盒子的padding区域的大小也是可以控制的可以单独控制上下左右的属性也可以一起控制。当试图一起控制时输入一个值则对应控制上下左右的长度输入两个值则对应控制上下左右的长度输入三个值则控制对应上左右下的长度输入四个值则控制对应上右下左的高度。margin的控制方法也类似下面直接举出关于border的属性其实比前两者稍微复杂一点下面将列举一些属性border可以单独设计style,width和color属性甚至可以设置上下左右各个边上的style,width和color属性。与padding和margin区域不同border-color等属性实际上也属于复合属性它也可以通过再次符合用border单个标签对边框的整体进行修改值的顺序和数量同样也没有特殊要求。5关于margin区域的其他问题刚刚讲述过了 如何对margin进行调整现在说一下margin的其他问题。首先要说的就是margin的塌陷问题第一个子元素的上margin区域会作用在父元素上最后一个子元素会作用在父元素下。一般有三种解决方法分别是给父元素设置一个不为0的padding给父元素设置宽度不为0的border还有给父元素设置CSS样式的overflow:hidden一般来说更推荐最后一种。因为前两种在使用的时候伴随着某些苏左副作用比如会使按下f12后产生的盒子模型的树枝数值产生偏差。关于margin合并问题上面兄弟元素的下外边框和下面兄弟元素的上外边框会产生合并而不是相加。通常这个问题无需解决只要记住遇到这种情况时单独给其中一个兄弟元素设置长度就行了。6关于处理内容溢出内容溢出就指我们输入的文字存在会溢出我们给它设定的区域的情况这种情况可以使用overflow属性来处理溢出内容我们可以使用visible,hidden,scroll和auto四个值让对应文字显示隐藏出现滚动条或自动显示滚动条。我们也可以使用overflow-x和overflow-y单独对任一方向进行修改但这两个属于实验性内容一般不使用。7关于隐藏元素的方法当我们不想让某些元素显现的时候可以用visibility和dispaly:none来对文字进行设置将visibility属性设置为hidden时会隐藏元素但仍然占用原来的位置使用display:none时则不会占用位置。8关于样式的继承CSS的一些属性会沿着父系→子系的规律继承有些则不能能继承的主要有字体属性文本属性和文本颜色等边框背景内边框外边框宽高溢出方式等则不会继承。9关于元素的默认样式大部分元素都有对应的默认样式在前面都已有所介绍详细见上图。10关于布局技巧通过观察子元素的元素特点以及和父元素的关系可以通过对父元素添加某些值从而实现某些效果详细内容见上图。11关于元素之间的空白问题行内元素和块级元素之间换行时会产生一个空白可以通过去掉换行这一动作和给父元素设置font-size:0来解决这个问题。一般推荐第二种方法12关于行内块元素产生空白的问题因为字体设计等问题行内块元素底端会产生空白一般有三种方案解决即设置vertical属性设置图片为display:block,或者给父元素设置成font-size:0。