页面制作-笔记5.css

CSS（四盒模

《前端开发工程师学习

CSSwidthheight 结构1从上图中可以得出盒子模型的属性如下1盒子模型4属属 说 盒模型--宽度(width)和高度 。盒模型div{padding:20px10px15px}div{padding:10pxCSS内边距属性CSS内边距属性属描padding-padding-padding-padding-盒模型--边框如下面代码为div来设置边框粗细为2pxborder:2pxsolid} （虚线）|dotted（点线）|solid（实线）border-width（边框宽度）中的宽度也可以设置为：thin|medium|thick（但不是CSS边框属性CSS边框属性属描border-border-border-4border-border-bottom-border-bottom-border-bottom-border-border-left-border-left-border-left-border-border-right-border-right-border-right-border-border-top-border-top-border-top-盒模型margin-margin-margin-margin-div{margin:20px10px15pxCSS外边距合 简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。高高度等于两个发生合并的外边距的高度中的较大者参考资料margin合并（塌陷）， /kb/006/Border-radius---出了常用的CSS3边框属性：属 说属 说 语法：border-radius:长度值说明：长度值可以是px、百分比、emBorder- 属性设置长度值顺序：“左上角、右上角、右下角和左下角实心半圆分为：实心上半圆、实心下半圆、实心左半圆、实心右半圆。只要掌握0border:1pxsolidred;border-radius:100px100px0border:1pxsolidred;（border:1pxsolidred;边框阴影box- 可以放在开头位置。影outset与内阴影值有2种：CSS轮廓 CSSoutline2outline-2outline-2outline-2Overflowoverflow属性规定当内容溢出元素框时发生的事情值描overflowBox-sizingbox-sizing:content-box|border-加上元素内容宽度或高度（contentwidth/height），也就是elementwidth/height=border+padding+contentwidth/height重新定义CSS2.1IE（IE6下版本和IE6-7），也就是说元素的宽度或高度等于元素内容的宽度其中最为关键的是box-sizing其中最为关键的是box-sizing中content-box和border-box参考资料box-sizing理解： CSS（五背background值11313311background11、背景颜ackground-在CSS中，使用background-color属性来控制元素的背景颜默认值 ，即背景是透明的2、背景图像-background-属属 说 background-repeatbackground-repeat属属 说

background- background-语法background-repeat：<repeat-style>[,<repeat-style><repeat-style>=repeat-x|repeat-y|[repeat|no-repeat|space|默认值属性属性 说 设置或检索对象的背景图像如何铺排填充。必须先指定<'background-image'>属性repeat-xrepeatno-repeat，repeat-yno-repeatrepeat，即其实repeat-xrepeat-y2个参数值.background-position语法background-position：<position>[,<position><position>=[left|center|right|top|bottom|<percentage>|<length>]|[|center|right|<percentage>|<length>][top|center|bottom|<percentage><length>]|[center|[left|right][<percentage>|<length>]?]&&[center|[|bottom][<percentage>|<length>]?默认值：0%0%，效果等同于left设置设置 说 background-position:80pxbackground-position:80px 属性属性 说top toptop left topleft center rightright bottom bottombottom bottom background- 属语法background-attaent：<attaent>[,<attaent><attaent>=fixed|scroll|默认值background-size在不同的环境中重复使用背景。语法：background-size:auto|<长度值>|<百分比>|cover| 对于背景，不是可以使用width和height属性来设置吗？为什么还要增加一background-size属性呢记住，背景不同于img的，对于img的，可以使用width和height属性来设置，但是这两个属性不能用于设置背景的大小。因此，在CSS3中，引入了background-size属性来设置背景的大小。这里大家要清楚一点，背景 background-origin语法：background-originborder-box|padding-box|content- 总结：background-origin属性往往都是配合background-position属性来使用，其中background-origin属性规定background-position属性相对于什么位置来定位。浏览器默background-clip语法：background-clipborder-box|padding-box|content-box|no-属性属性 说 不裁切，和参数border-box显示同样的效background-clip属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置（即于背景被不显示背景的区域裁剪了一部分一样。clipsizebackground的多次叠加，缩写时为用逗号隔开的每组值； background：[background-color]|[background-image]|[background-background-size]|[background-repeat]|[background-attaent]|clip]|[background-background-repeat:backround-position:background-size:ent:background-clip:background-origin:background-color:background如果size，需position开如如果有多个背 ，而其他属性只有一个（例如background-repeat只有一个表表明所有背 应用该属性值background-color只能设置一个。CSS3渐变共有2种：（1）线性渐变（linear-gradient）；（2）径向渐（radial-gradient）1、线性渐变-linear-background:background:linear-gradient(direction,color-stop1,color-stop2,语法属性属性 说to toto to toto totop tototop也可以定义多种颜色的线性渐变效果，如background-image:linear-gradient(tobackground-image:linear-gradient(toleft,red, 效果图2、径向渐变-radial-径向渐变，是一种从起点到终点颜色从内到行圆形渐变（从中间向外拉，像一样）。 径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线渐变，而是从个起点向所有方向渐语法：background:radial-gradient(position size,start-color,…,stop-说明标；如果只提供一个，第二值默认为50%，即center. size都是可选参数，如果省略，则表示该项参数采用默认值有2种情况：（1）长度值，如px、em或百分比等；（2）关键字。属性 说属性 说 toptop top toptop left bottomrightcenterbottom bottombottom 定义形状属性属性 说 定义大小属性属性 说 #div2{background:-webkit-radial-gradient(red5%,green30%,blue案例（图一radial-gradient(circle,#f00,#ff0,radial-gradient(circleatcenter,#f00,#ff0,radial-gradient(circleat50%,#f00,#ff0,radial-gradient(circlefarthest-corner,#f00,#ff0, ><size>错误代码：radial-gradient(circle50px50px,#f00,#ff0,circle<size>错误代码：radial-gradient(circle50%,#f00,#ff0,#080);circle不接受<size>的值是<percentage>。不通过<sh >来表示圆和椭圆的方法：以下2行代码都可以表示一个圆：radial-gradient(100px,#f00,#ff0,#080);/*1*/radial-gradient(100px100px,#f00,#ff0,#080);/*2*/radial-gradient(50px100px,#f00,#ff0,#080);/*3*/3、渐变重复：repeating-*-repeating-linear-repeating-linear-gradient(#f00,#ff010%,#f00repeating-linear-gradient(tobottom,#f00,#ff010%,#f00repeating-linear-gradient(180deg,#f00,#ff010%,#f00repeating-linear-gradient(totop,#f00,#ff010%,#f00linear-gradient()repeating-linear-gradient()40%,#f0045%,#ff055%,#f0060%,#ff070%,#f0075%,#ff085%,#f0090%,利用background-size实现上述（图一）的效果：background:linear-gradient(#f00,#ff067%,#f00);background-size:100%15%;background-sizebackground-repeatrepeating-radial-repeating-radial-gradient(circleclosest-side,#f00,#ff010%,#f00CSS（六布内容包括Display:设置元素的显示方语法display：none|inline|block|list-item|inline-block|table|inline-|table-caption|table-cell|table-row|table-row-group|table-column|table-column-group|table-footer-group|table-header-group|run-in|box|inline-box|flexbox|inline-flexbox|flex|inline-flex取值inline：block：list-item：inline-block：指定对象为内联块元素。run-in：根据上下文决定对象是内联对象还是块级对象。box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本inline-box：（伸缩盒最老版本flexbox：（伸缩盒过渡版本inline-flexbox：（伸缩盒过渡版本flex：将对象作为弹性伸缩盒显示。（伸缩盒版本inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒版本 Block（块级元素 inline（行内元素 inline-block（行内元素Display:display:none或隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中。Display相关布局块级元素水平居居中导元素分、<img>、元素分类--块级元块级元素特点元素分类--内联元html<span>、<a>、<label<strong>em>就是典型的内联元素（行内元素如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。div{display:inline;}内联元素特点解决内联元素（行内元素）间隙bug 解决方法div{font->>>>元素分类--内联块状元 display:inline- display:inline-inline-block如何实现浏览器兼容版的inline-block然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：div{display:inline-*display:*zoom:}定位CSS定位(Positioning)框和外边距不影响行内框的高度。由一行形成的水平框称为行框（LineBox），行框的高度总是足以容框和外边距不影响行内框的高度。由一行形成的水平框称为行框（LineBox），行框的高度总是足以容CSS定位属CSS定位机(X)HTML中CSS定位属性允许你对元素进行定位 属描vertical-z-CSSCSSposition属性通过使用position属性 可以选择4种不同类型的定位，这会影响元素框生成的方式 positionabsolute 如下代码实现相对于以前位置向下移动50px，向右移动100px;border:2pxredsolid;}<div绝对绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置对于最初的包含块position:absolute(表示绝对定位)，这条语句的作用的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。对对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档中的初始位是位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”向下移动border:2pxredsolid;}<divPosition:absolute-应用：轮播头 fixed：absolute（屏幕内的网页窗口）border:2pxredsolid;}1.Z-index-设置元素在z轴上的排 indexindex属性设置元素的堆叠顺序。z-indexZ-index仅能在定位元素上奏效（值描z-indexZ-index语法float：none|left|Float浮动基本特征对元素，脱离文档流；对内容，在文档Clear-清除浮动语法clear：none|left|right|使用方式增加空白元代码 Float应用-两列布FlexTerms-基本概Flex项目（flexitem）容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）。主轴的置叫做crossstart，结束位置叫做crossend。crosssize。flexcontainerFlexitems（flex项目弹性布局特性与方向有flex-Flex-Flex-与弹性有Flex-Flex-Flex-与对齐有Flex-决定主轴的方向（即项目的排列方向Flex-direction:row|row-reverse|column|column-Flex-Flex-wrap:nowrap|wrap|wrap-Flex-Flex-flow:：<'flex-direction'>||<'flex-wrap'>Flex-根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex-basis:<length>|auto;/*defaultautoFlex-Flex-4.计算方法：flex-basisflow-grow/sum(flow-grow)*示例：b,c1:3比率分配剩余空间HTMLCode：<ulCSS.flexli:nth-.flexli:nth-child(2){flex-.flexli:nth-child(3){flex-b:50+(300/4*1)=125pxa:50+(300/4*3)=275pxFlex-Flex-的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。计算方法：flex-basisflow-shrink/sum(flow-shrink)*示例：a,b,c1:1:3的比率来收缩空间HTMLCode：<ulCSS.flex.flexli:nth-child(3){flex-5a1，b1，c31:1:3200px。那么这么超出的200pxa,b,c消化于是可以计算a,b,c将被移除的溢出量是多少：Flex:[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>Initial:01该属性有两个快捷值：auto(11auto