1.CSS 常用文本属性1.行高属性名line-height可选值1.normal由浏览器根据文字大小决定的一个默认值2.像素px3.数字参考自身font-size的倍数很常用4.百分比参考自身font-size的百分比备注由于字体设计原因文字在一行中并不是绝对垂直居中若一行中都是文字不会太影响观感举例:div {line-height: 60px;line-height: 1.5;line-height: 150%;}2.行高注意事项1.line-height过小会怎样一一文字产生重叠且最小值是0不能为负数。2.line-height是可以继承的且为了能更好的呈现文字最好写数值。3.line-height和height是什么关系?设置了height那么高度就是height的值。不设置height的时候会根据line-height计算高度。应用场景1.对于多行文字控制行与行之间的距离。2.对于单行文字让height等于line-height可以实现文字垂直居中。备注由于字体设计原因靠上述办法实现的居中并不是绝对的垂直居中但如果一行中都是文字不会太影响观感3.文本对齐 垂直1.顶部无需任何属性在垂直方向上默认就是顶部对齐。2.居中对于单行文字让heightline-height即可。问题多行文字垂直居中怎么办—一后面我们用定位去做。3.底部对于单行文字目前一个临时的方式让line-height(height x2- font-size-X。备注x是根据字体族动态决定的一个值。4.vertical-align属性名verticalalign作用用于指定同一行元素之间或表格单元格内文字的垂直对齐方式常用值1.baseline默认值使元素的基线与父元素的基线对齐2.top使元素的顶部与其所在行的顶部对齐3.middle使元素的中部与父元素的基线加上父元素字母x的一半对齐4.bottom使元素的底部与其所在行的底部对齐特别注意vertical-align不能控制块元素5.Css列表属性列表相关的属性可以作用在ul、ol、li元素上6.CSS表格属性1.边框相关属性其他元素也能用2.表格独有属性只有table标签才能使用3.背景属性4.鼠标属性5.CSS 盒子模型1.CSS长度单位:1.px像素2.em相对元素font-size的倍数3.rem相对根字体大小html标签就是根4.%相对父元素计算注意CSS中设置长度必须加单位否则样式无效6.元素的显示模型块元素block)又称块级元素特点1.在页面中独占一行不会与任何元素共用一行是从上到下排列的2默认宽度撑满父元素3.默认高度由内容撑开可以通过CSS设置宽高行内元素inline)又称内联元素特点1.在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列2.默认宽度由内容撑开3.默认高度由内容撑开4.无法通过css设置宽高行内块元素inline-block)又称内联块元素特点:1、在页面中不独占一行一行中不能容纳下的行内元素会在下一行继续从左到右排列2.默认宽度由内容撑开3.默认高度由内容撑开4.可以通过CSS设置宽高注意元素早期只分为行内元素、块级元素区分条件也只有一条“是否独占一行”如果按照这种分类方式行内块元素应该算作行内元素总结块元素(block)1.主体结构标签 html、 body2. 排版标签 h1 h6、 hr、 p、 pre、 div3.列表标签 u1、 o1、 li、 dl 、 dt、 dd4、表格相关标签 table、 tbody、 thead、 tfoot、 tr、 caption5. form与 option行内元素(inline)1.文本标签 br、 em、 strong、 sup、 sub、 de1、 ins2. a与 label行内块元素inline-block)1.图片: img2.单元格 td、 th3.表单控件 input、 textarea、 select、 button4.框架标签 iframe4.修改元素显示模式通过CSS中的display属性可以修改元素的默认显示模式常用值如下5.盒子模型的组成CSS会把所有的HTML元素都看成一个盒子所有的样式也都是基于这个盒子1.margin(外边距盒子与外界的距离2.border边框盒子的边框3.padding内边距紧贴内容的补白区域4.content内容元素中的文本或后代元素都是它的内容图示如下盒子的大小content左右padding左右border注意外边距margin不会影响盒子的大小但会影响盒子的位置6.盒子内容区content注意max-width、 min-width 一般不与width一起使用max-height、min-height 一般不与height一起使用7.关于默认宽度所谓的默认宽度就是不设置width属性时元素所呈现出来的宽度。总宽度父的content一自身的左右margin内容区的宽度父的content一自身的左右margin一自身的左右border一自身的左右padding8.盒子内边距padding复合属性的使用规则1.padding:10px四个方向内边距都是10px。2.padding:10px20px;上10px左右20px。(上下、左右3.padding:10px 20px 30px;上10px左右20px,下30px。(上、左右、下)4.padding:10px 20px 30px 40px;上10px右20px,下30px左40px。(上、右、下、左)注意点1.padding的值不能为负数2.行内元素的左右内边距是没问题的上下内边距不能完美的设置3.块级元素、行内块元素四个方向内边距都可以完美设置9.盒子边距边框相关属性共20个border-style、border-width、border-color其实也是复合属性10.margin的注意事项1.子元素的margin是参考父元素的content计算的。因为是父亲的content中承装着子元素2.上margin、左margin影响自己的位置下margin、右margin影响后面兄弟元素的位置。3.块级元素、行内块元素均可以完美地设置四个方向的margin但行内元素左右margin可以完美设置上下margin设置无效。4.margin的值也可以是auto如果给一个块级元素设置左右margin都为auto该块级元素会在父元素中水平居中。5.margin的值可以是负值。11.margin 塌陷问题什么是margin塌陷第一个子元素的上margin会作用在父元素上最后一个子元素的下margin会作用在父元素上如何解决margin塌陷·方案一给父元素设置不为Q的padding。·方案二给父元素设置宽度不为0的border。·方案三给父元素设置css样式overflowhidden12.margin合并问题什么是margin合并?上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并取一个最大的值而不是相加。如何解决margin塌陷无需解决布局的时候上下的兄弟元素只给一个设置上下外边距就可以了13.处理内容溢出14.隐藏元素的方式方式一visibility属性visibility属性默认值是show如果设置为hidden元素会隐藏。元素看不见了还占有原来的位置元素的大小依然保持。方式二display属性设置display:none就可以让元素隐藏。彻底地隐藏不但看不见也不占用任何位置没有大小宽高。15.样式的继承有些样式会继承元素如果本身设置了某个样式就使用本身设置的样式但如果本身没有设置某个样式会从父元素开始一级一级继承优先继承离得近的祖先元素。会继承的 css属性字体属性、文本属性除了vertical-align、文字颜色等。不会继承的css属性边框、背景、内边距、外边距、宽高、溢出方式等。一个规律能继承的属性都是不影响布局的简单说都是和盒子模型没关系的。16.默认样式元素一般都些默认的样式例如1. a元素下划线、字体颜色、鼠标小手。2. h1 h6元素文字加粗、文字大小、上下外边距。3. p元素上下外边距4. ul、o1元素左内边距5.body元素8px外边距4个方向)…优先级元素的默认样式继承的样式所以如果要重置元素的默认样式选择器一定要直接选择器到该元素17.布局小技巧1行内元素、行内块元素可以被父元素当做文本处理。即可以像处理文本对齐一样去处理行内、行内块在父元素中的对齐。例效口:text-align、line-height、text-indent等。2如何让子元素在父亲中水平居中若子元素为块元素给父元素加上margin:0auto。若子元素为行内元素、行内块元素给父元素加上text-align:center。3.如何让子元素在父亲中垂直居中若子元素为块元素给子元素加上margin-top值为父元素content-子元素盒子总高/2。若子元素为行内元素、行内块元素让父元素的heightline-height每个子元素都加上vertical-align:middle;。补充若想绝对垂直居中父元素font-size设置为018.元素之间的空白问题产生的原因行内元素、行内块元素彼此之间的换行会被浏览器解析为一个空白字符。解决方案1.方案一去掉换行和空格不推荐2.方案二给父元素设置font-size0再给需要显示文字的元素单独设置字体大小推荐19.行内块的幽灵空白问题产生原因行内块元素与文本的基线对齐而文本的基线与文本最底端之间是有一定距离的。解决方案1.方案一给行行内块设置vertical值不为baseline即可设置为middel、bottom、top均可2.方案二若父元素中只有一张图片设置图片为displayblock3.方案三给父元素设置font-sizeo。如果该行内块内部还有文本则需单独设置font-size20.浮动1.浮动的简介在最初浮动是用来实现文字环绕图片效果的现在浮动是主流的页面布局方式之一2.元素浮动的特点3.浮动后会有哪些影响对兄弟元素的影响后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟无影响对父元素的影响不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素4.解决浮动产生的影响清除浮动解决方案1.方案一给父元素指定高度。2.方案二给父元素也设置浮动带来其他影响。3.方案三给父元素设置overflow:hidden。4.方案四在所有浮动元素的最后面添加一个块级元素并给该块级元素设置clearboth。5.方案五给浮动元素的父元素设置伪元素通过伪元素清除浮动原理与方案四相同 推荐使用.parent::after {content:““”;display: block;clear:both;}布局中的一个原则设置浮动的时候兄弟元素要么全都浮动要么全都不浮动1.相对定位1.1如何设置相对定位给元素设置positionrelative即可实现相对定位。可以使用left、right、top、bottom四个属性调整位置。1.2相对定位的参考点在哪里·相对自己原来的位置1.3相对定位的特点1.不会脱离文档流元素位置的变化只是视觉效果上的变化不会对其他元素产生任何影响。2.定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的。默认规则是定位的元素会盖在普通元素之上都发生定位的两个元素后写的元素会盖在先写的元素之上3.left不能和right一起设置top和bottom不能一起设置4.相对定位的元素也能继续浮动但不推荐这样做5.相对行为的元素也能通过margin调整位置但不推荐这样做注意绝大多数情况下相对定位会与绝对定位配合使用2.绝对定位2.1如何设置绝对定位给元素设置positionabsolute即可实现绝对定位可以使用left、right、top、bottom四个属性调整位置2.2绝对定位的参考点在哪里参考它的包含块。什么是包含块1.对于没有脱离文档流的元素包含块就是父元素2.对于脱离文档流的元素包含块是第一个拥有定位属性的祖先元素如果所有祖先都没定位那包含块就是整个页面2.3绝对定位元素的特点1.脱离文档流会对后面的兄弟元素、父元素有影响2.left不能和right一起设置top和bottom不能一起设置3.绝对定位、浮动不能同时设置如果同时设置浮动失效以定位为主4.绝对定位的元素也能通过margin调整位置但不推荐这样做5.无论是什么元素行内、行内块、块级设置为绝对定位之后都变成了定位元素何为定位元素一一默认宽、高都被内容所撑开且能自由设置宽高3.固定定位3.1如何设置为固定定位给元素设置positionfixed即可实现固定定位。可以使用left、right、top、bottom四个属性调整位置。3.2固定定位的参考点在哪里参考它的视口什么是视口—一对于PC浏览器来说视口就是我们看网页的那扇“窗户”。3.3固定定位元素的特点1.脱离文档流会对后面的兄弟元素、父元素有影响。2.left不能和right一起设置top和bottom不能一起设置。3.固定定位和浮动不能同时设置如果同时设置浮动失效以固定定位为主。4固定定位的元素也能通过margin调整位置但不推荐这样做。5.无论是什么元素行内、行内块、块级设置为固定定位之后都变成了定位元素。4.粘性定位4.1如何设置为粘性定位给元素设置positionsticky即可实现粘性定位可以使用left、right、top、bottom四个属性调整位置不过最常用的是top值4.2粘性定位的参考点在哪里离它最近的一个拥有“滚动机制”的祖先元素即便这个祖先不是最近的真实可滚动祖先4.3粘性定位元素的特点不会脱离文档流它是一种专门用于窗口滚动时的新的定位方式最常用的值是top值粘性定位和浮动可以同时设置但不推荐这样做粘性定位的元素也能通过margin调整位置但不推荐这样做粘性定位和相对定位的特点基本一致不同的是粘性定位可以在元素到达某个位置时将其固定5.定位层级1.定位元素的显示层级比普通元素高无论什么定位显示层级都是一样的。2.如果位置发生重叠默认情况是后面的元素会显示在前面元素之上。3.可以通过css属性z-index调整元素的显示层级。4.z-index的属性值是数字没有单位值越大显示层级越高。5.只有定位的元素设置量z-index才有效。6.如果z-index值大的元素依然没有覆盖掉z-index值小的元素那么请检查其包含块的层级6.定位的特殊应用注意1.发生固定定位、绝对定位后元素都变成了定位元素默认宽高被内容撑开且依然可以设置宽高。2.发生相对定位后元素依然是之前的显示模式。3.以下所说的特殊应用只针对绝对定位和固定定位的元素不包括相对定位的元素。让定位元素的宽充满包含块1.块宽想与包含块一致可以给定位元素同时设置1eft和right为02.高度想与包含块一致top和bottom设置为0让定位元素在包含块中居中方案一:left:0;right:0;top:0;bottom:0;margin:auto;方案二:left:50%;top:50%;margin-left负的宽度一半margin-top负的高度一半注意该定位的元素必须设置宽高21.版心在PC端网页中一般都会有一个固定宽度且水平居中的盒子来显示网页的主要内容这是网页的版心版心的宽度一般是960~1200像素之间。版心可以是一个也可以是多个22.常用布局名词23.重置默认样式很多元素都有默认样式比如1.p元素有默认的上下margin2.h1~h6标题也有上下margin且字体加粗3.body元素有默认的8px外边距4.超链接有默认的文字颜色和下划线5.ul元素有默认的左pading6.在早期元素默认样式能够让我们快速的绘制网页但如今网页的设计越来越复杂内容越来越多而且很精细这些默认样式会给我们绘制页面带来麻烦而且这些默认样式在不同的浏览器上呈现出来的效果也不一样所以我们需要重置这些默认样式