HTML5与CSS3基础

Posted 2020-06-29

11 用CSS进行布局

11.1 开始布局的注意事项

1 还是要强调的是内容与显示分离

2布局方法：

固定布局：整个页面和每一栏的内容都有基于像素的宽度。

就是说宽度都是固定好了的，不会因为你改变设备就随着你的设备的宽去进行改变。

响应式布局（流式页面）：它使用的是百分数定义宽度，允许页面随着环境的改变来发生相应的改变。

就是现在最流行的响应式布局：bootstrap框架

3浏览器的注意事项：

浏览器之间存在在一些差异性，所以在网站建立好之后需要在不同的网站上进行测试

 

11.2构建页面

构造页面：

恰当的使用语义化元素，将页面划分为不同的逻辑区域块

（2）按照一定的循序进行html的摆放，使在没有css样式的时候也是合理的。

（3）以一致的方式使用标题元素 明确优先级

（4）使用合适的语义标记剩余的内容，如段落，图和列表

（5）进行良好的注释。

11.3在旧版浏览器中为HTML5元素添加样式

针对全部浏览器为HTML5新元素添加样式

有两种方式可以实验在IE9之前的浏览器中为新的HTML5元素设置样式（只能选一种，不能两种都用）

关于HTML5 shiv

和其他浏览器不同的是IE8及之前的版本会忽略他们不原生支持的元素CSS HTML5 shiv是专门用于解决这一问题的一段JS（ Modernizr）

 

11.4 对默认样式进行重置或者标准化

每个浏览器都有内置的样式表 HTML会遵循该样式进行显示，在开发自己的CSS样式之前必须对原有的CSS样式进行抹平。

主要的方法有两种

使用CSS重置（reset）开始主样式。

使用Nicolas Gallagher he Jonathan Neal 创建的normalize.css开始主样式表

11.5盒子模型

Css在处理网页的时候，他认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒子模型，盒子模型由 内容区域（contain）、内容区域周边的距离( 内边距 padding) 内边距的外边缘（边框 border） 和边框外面将元素与相邻元素的不可见区域（外边距 margin）构成

11.6 控制元素的可见性和显示类型

造成块级元素和行内元素显示区别的就是display属性

块级元素被称为（display：block）；

对于li元素 display：list-item。

行内元素display：inline；

1:指定元素的显示方式：

输入display：***；

设置inline-block属性，让元素显示为行内元素，但是具有块级元素的特性及可以设置该的四边设置width height padding margin等属性。或者输入none影藏该元素

2控制元素的可见性

Visibility：hidden和display：hidden

区别：visibility设置：hidden 父元素设置次属性，子元素会消失但是位置位置不会消失，会在内容区域显示一块空白的区域。

Display：hidden：设置次属性，父元素会和子元素一样消失，但是在流布局会给他提供位置，当他被设置显示：display：show 时她还是会在原有的位置上再次出现。

 

11.7设置元素的高度和宽度

1设置元素的高度或宽度的步骤

设置宽度：width：X

设置高度：height：Y

对定宽的浏览器使用像素，对响应式Web设计使用百分数

不能为行级元素设置width  height 除非设置了display：inline-block或者display：block。

还可以对页面的尺寸进行设置：

Max-width,min-width max-height min-height ,

Max-width:是为流式布局设置宽度限制宽度的最佳工具。

width，height是不被继承的。

 

宽度、外边距和auto

Auto的值是由包含块的宽度减去元素的内边距，边框和外边距计算出来。

 

11.8 在元素周围添加内边距

顾名思义，内边距就是内容元素和周围元素（在同一父类里）还有边框之间的距离。可以理解成盒子里面有许多的苹果，内边距就是控制个个苹果和苹果之间，苹果和盒子之间的距离。

  设置为display：inline的元素接受padding的设置，但padding-top和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素的本身空间

 

 11.9设置边框

设置边框border：像素值 边框类型 颜色

定义边框的风格：dotted(点线) dashed(虚线) solid(实线) double(双线) groove(槽线) ridge(脊线) inset(凹边) outside(凸边)

边框可以单独设置：可以设置 left right top bottom 

 

11.11使元素浮动

  浮动最初的目标是实现文字环绕效果，现在过多的使用浮动式因为更加简单的实现多栏布局

提示：记住，你选择的方向是应用于需要浮动的元素的，而不是应用于环绕它的元素的。

11.12 控制元素浮动的位置

设置浮动的元素会不受父元素的限制，摆脱父元素对其的影响，最明显的表示方法就是，父元素高度塌陷

解决方法有两种，在父元素底部添加一个div，给其设置clear：both。不建议使用，给结构上多增加了一个空标签。

2：在样式表文件中引进.clearfix 规则，就可以消除浮动对父元素的影响

 

11.13对元素进行相对定位

Position：relative：

给元素设置该属性，该属性还是保持在标准文档流里，它的位置偏移的位置就是相对于原来的位置进行移动，周围的元素不会收到他的影响。

记住，既要指明采用相对定位，还要给出偏移量。可以设置正直也可以设置负值

11.14对元素进行绝对定位

进行绝对定位的元素，就是已经脱离了绝对文档流，文档流里的元素就会忽略他的存在，他的偏移位置就是以父元素为基准了。

11.15在栈中定位元素

利用z-index：n；N的值越高，元素在堆栈中就越高（好理解的话就是值越大谁就能压着比他小的人。）

不继承

11.16 处理溢出

Overflow:后面可以设置四个值

Visible:默认的选项，让盒子中的所有元素都可见

Hidden:对超出盒子的部分进行影藏

Scroll:添加滚动条

Auto：让滚动条仅在访问者访问溢出内容的时候才会出现

 

11.17 垂直对齐元素

使元素垂直对齐的步骤：

（1）输入vertical-align：

（2）输入：baseline:元素的基准线对齐父元素的基准线

Middle: 使其位于父元素的中央

Sub：使其位于父元素的下标

Super：使其位于父元素的上标

Text-top：顶部对齐父元素的顶部

Text-bottom：顶部对齐父元素的底部

Top：使元素的顶部对齐当前元素最高元素的顶部

Bottom：使元素的底部对齐当前元素最高元素的底部

注意：该属性仅使用于行内元素

11.18修改鼠标指针：

修改指正样式的步骤：

1：输入cursor：

2：pointer:手等。。。

 

12构建响应式网站

12.1响应式WEB设计：概述

响应式页面的组成

他的方法值根于以下三点：

1：灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而可以根据环境进行缩放

2：灵活的，基于网格的布局，也就是流式布局。Width都是用百分数来表示的。其他水平通常使用em

3：媒体查询：这项技术，可以根据媒体的特征对设计进行调整

12.2 创建可伸缩的图像

使用图像伸缩技术，就可以让图想在可用空间内进行缩放

制作可伸缩图像的步骤

1对任何想做成可伸缩图像的图像，在HTML的IMG标签上都要省略width和height的属性

2 对每个可伸缩的图像都需要使用max-width：100%

提示：

图像缩放的可用空间是由父元素建立的内容区域，如果父元素有水平方向上的内边距，可用空间就会变小。

2：不要忘了对图像就行优化，让文件尺寸尽可能的小

3：可以使用video，embed、object{max-width：100%}让HTML5的视屏及其他媒体变成可伸缩的

12.3 创建弹性布局网格：

以下的公式可以计算出需要的使用的百分数：

要指定的宽度（以像素为单位）/容器的宽度(以像素为单位)=值

 

12.4 理解和实现媒体查询

 

 

 

 

 

 

 

 

 

13使用web字体

13.1 什么是web字体

CSS规则@font-face为字体创造了可能

几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是：

@font-face {

  font-family: ‘MyWebFont‘;

  src: url(‘webfont.eot‘); /* IE9 Compat Modes */

  src: url(‘webfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */

       url(‘webfont.woff‘) format(‘woff‘), /* Modern Browsers */

       url(‘webfont.ttf‘)  format(‘truetype‘), /* Safari, android, ios */

       url(‘webfont.svg#svgFontName‘) format(‘svg‘); /* Legacy iOS */}

引用的时候只用 使用font-family：@font-face里 font-family: ‘MyWebFont‘;的值

设置文字的粗细：

font-weight:填写需要填写的值

font-style:italic(斜体)

 

14使用CSS3进行增强

14.1 浏览器兼容性、渐进渐强和polifill

1:渐进增强：简单来说它强调创建所有用户都能访问（无论使用什么样的web浏览器）的基本层面的内容和功能，同时为更强大浏览器提供增强的体验。

2：为不支持某些属性的浏览器使用polyfill（通常又称垫片，shim）。

Polyfill通常使用javascript实现，会产生一定的负面影响 因为较弱的浏览器运行js的速度慢得多。

14.2 理解厂商前缀

-webkit- Chrome

-moz- Firefox

-ms- IE

-o- Opera

14.3 为元素创建圆角

使用border-radius：可以输入四个值，顺时针方向

1为元素创建四个相同的圆角

长度单位和单位：px就是表示pixel，像素。pt全称为point磅

（1）这一步可选，输入-webkit-border-radius：r，这里的r是圆5角的半径大小，表示长度（带单位）。

2：为元素创建一个圆角

（1）输入-wenkit-border-top-left-radius：r 这里指的是左上角的园半径大小（带单位）

3:创建椭圆形圆角

（1）输入-webkit-border-radius：x/y，其中x是圆角在水平方向上的半径大小，y是圆角在垂直方向上的半径大小，均表示为长度（带单位）

4：创建椭圆形圆角

输入-webkit-border-radius：r这里的r是元素半径的大小，（长度单位）

创建圆形可以使用短形式语法，r的值应该等于高度或宽度的一半。

11.4为文本添加阴影

Text-shadow：x-offset(x轴偏移量) y-offset（y轴偏移量）  blur-radius（模糊半径） color（颜色值）

为文本添加多重阴影：再一地组数据输入完成之后加一个“，”号然后再写一个不同的描述

14.5为其他元素添加阴影

使用box-shadow可以为元素本身添加阴影

Box-shadow可以接受6个属性值：带长度单位的x-offset和y-offset可选的带长度单位的blur-radius 可选的关键子inset（收缩）关键字 可带长度单位spread值（扩张）还有一个就是颜色值

添加多个阴影在第一个阴影之间加一个逗号。

14.6应用多重背景

为单个HTML元素指定多个背景是CSS3引入的一个特性

Background-image：url(1),url(2),url(3),url(4)

Background-position:x-offset y-offset,x-offset y-offset,x-offset y-offset,x-offset y-offset.

Background-repeat:no-repeat,no-repeat,no-repeat,no-repeat.

14.7使用渐变背景

渐变背景也是CSS3中新特性，通过它可以在不用图像的的情况下创建从一种颜色到另一种颜色的过渡。

两种线性：

Background：linear-gradient（方向值,color1,color2）

方向值：to top,to right,to left,to bottom。还可以添加角度值

径向渐变

Background：radial-gradient（方向值 color1,color2）