红色企业网站模板,网页游戏排行榜2022前十名最新排名图片,网站建设需注意的,大连做网站价格一、CSS盒模型 CSS 盒模型规定了处理元素内容、内边距、边框 和 外边距 的方式。最内部分是元素内容#xff0c;直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。 1.元素的尺寸: height 设置元素的高度。属性值#xff1a;auto直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。 1.元素的尺寸: height 设置元素的高度。属性值auto默认。/px、cm 等单位定义高度。/百分比width 设置元素的宽度属性值auto默认。/px、cm 等单位定义高度。/百分比max-height 设置元素的最大高度。属性值auto默认。/px、cm 等单位定义高度。/百分比max-width 设置元素的最大宽度。属性值auto默认。/px、cm 等单位定义高度。/百分比min-height 设置元素的最小高度。属性值auto默认。/px、cm 等单位定义高度。/百分比min-width 设置元素的最小宽度。属性值auto默认。/px、cm 等单位定义高度。/百分比当属性值用百分比时是相对于父元素的尺寸来说的。最大最小宽高主要用于动态控制缩放等情况下这里暂做了解。 2.padding 属性元素的内边距: padding-top 属性设置元素的上内边距空间。padding-right 属性设置元素右内边距空白。padding-bottom 属性设置元素的下内边距底部空白。padding-left 属性设置元素左内边距空白。padding 属性接受长度值或百分比值但不允许使用负值。 padding * 同时设定四个边距padding ** 分别设定上下、左右边距padding *** 分别设定上、左右、下边距padding **** 分别设定上、右、下、左边距 3.border属性元素的边框是围绕元素内容和内边距的一条或多条线。 border属性 可以按顺序设置如下属性 border-widthborder-style solid 定义实线。/dotted 定义点状边框/double 定义双线......border-color关于元素的边框后边课程还会详细讲解暂时先简单了解。 4.margin 属性元素的外边距: 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin-top 属性设置元素的上外边距空间。margin-right 属性设置元素外内边距空白。margin-bottom 属性设置元素的下外边距底部空白。margin-left 属性设置元素左外边距空白。margin 属性接受长度值或百分比值允许使用负值。 margin * 同时设定四个外边距margin ** 分别设定上下、左右外边距margin *** 分别设定上、左右、下外边距margin **** 分别设定上、右、下、左外边距 5.外边距的合并 外边距合并指的是当两个垂直外边距相遇时它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。 6.两种盒子模型 一种是W3C的标准盒子模型一种是IE的盒子模型。另一种是怪异盒模型 (ie盒模型) box-sizing属性可以为三个值content-boxdefaultborder-boxpadding-box。content-boxborder和padding不计算入width之内 border-boxborder和padding计算入width之内其实就是怪异模式了~inherit 使元素继承父元素的盒模型模式 ### 盒子模型与DOCTYPE​ 那到底该用哪种模型呢当然是W3C标准盒子模型了W3C标准盒子模型兼容所有浏览器。那该怎么确定页面渲染是按照W3C标准盒子模型呢只要在页面顶部加上DOCTYPE 申明[申明说明](http://www.w3school.com.cn/tags/tag_doctype.asp)浏览器就会按照W3C标准渲染如果不加DOCTYPE申明浏览器会按照本身默认标准去渲染页面除IE外所有浏览器按照W3C标准盒子模型渲染页面至于IE吧当然会按照IE盒子模型渲染页面了只要加上DOCTYPE强制IE采用标准盒子模型渲染页面。 我们常见的就是它是指示 web 浏览器关于页面使用 HTML5 版本进行编写的 二、CSS其他属性 1.opacity透明度设定 IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小越透明。E8 以及更早的版本使用滤镜 filter:alpha(opacityx)。x 能够取的值从 0 到 100。值越小越透明。对于滤镜本套课程不作讲解。opacity与通过rgba()设定透明度的区别前者同时作用于元素的标签内容后者只是作用于元素本身。 2.鼠标的样式 cursor 我们可以通过cursor属性改变浏览器默认的鼠标样式可改变的样式很多这里仅仅列出几种相对常用的 hand是手型pointer也是手型推荐使用这种。                                crosshair是十字型text是移动到文本上的那种效果                              wait是等待的那种效果default是默认效果                                              e-resize是向右的箭头ne-resize是向右上的箭头                                          n-resize是向上的箭头nw-resize是向左上的箭头                                              w-resize是向左的箭sw-resize是左下的箭头                                              s-resize是向下的箭头se-resize是向右下的箭头                                             auto是由系统自动给出效果 3.溢出的处理 overflow 如果内容溢出了元素内容区域是否对内容的边缘进行裁剪。overflow-x 如果内容溢出了元素内容区域是否对内容的左/右边缘进行裁剪。overflow-y 如果内容溢出了元素内容区域是否对内容的上/下边缘进行裁剪。 visible 不裁剪内容可能会显示在内容框之外。hidden 裁剪内容-不提供滚动机制。scroll 裁剪内容-提供滚动机制。auto如果溢出框则应该提供滚动机制。 4.rem:根元素字体的大小 浏览器默认字体大小为16px em是以父元素字体为基准的 rem是以根元素字体大小为基准的 5.轮廓outline 轮廓outline是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。 outline 在一个声明中设置所有的轮廓属性 outline-color 设置轮廓的颜色。outline-style 设置轮廓的样式。                                         outline-width 设置轮廓的宽度。 outline-offset 设置轮廓到边框的距离。注css新增属性,不可以写到符合属性里。                    6.display 属性常用属性值 display的属性值很多有些目前支持度不好有些会放到以后课程或综合实例中讲解这里介绍几种常用的情况。 none 此元素不会被显示。block 此元素将显示为块级元素。特征换行可设置宽高尺寸。                                                               inline 行内元素默认。特征:大小自适应不换行。inline-block 行内块元素。特征:可以设置大小但是不可以换行。                                                            其他list-item/table/inline-table/table-cell/table-caption...... 三、CSS3前缀 CSS3目前很多新增属性尚未被W3C列为标准对这些暂时未被公布为标准的属性各家浏览器会在属性前加上前缀词也将其称之为浏览器的私有前缀。W3C官方认为试验阶段的属性仅为了测试未来可能修改或删除。对于CSS3中目前主流浏览器不支持属性本套课程暂不进行讲解. 1.现在主要流行的浏览器内核有 Webkit内核产要代表为Chrome和SafariTrident内核主要代表为IE浏览器Gecko内核主要代表为FirefoxPresto内核主要代表为Opera手机等移动端一般是IOS和安卓系统基本上采用的都是webkit引擎。 2.浏览器的私有前缀: Webkit内核前缀为-webkit-Trident内核前缀为-ms-Gecko内核前缀为-moz-Presto内核前缀为-o- 3.CSS Hack: CSS Hack用来解决浏览器兼容问题为不同浏览器版本编写不同CSS效果使用每个浏览器单独识别的样式代码 控制浏览器的显示样式 Hack分类1、CSS属性前缀法2、选择器前缀法3、IE条件注释法