CSS学习及响应式布局

CSS简介

什么是css?

​

cascading style sheet（层叠样式表）

1.如何修饰网页信息的显示样式

​

• 目前推荐遵循的是w3c发布的css3.0

• 用来表现XHTNL或者XML等样式文件的计算机语言

CSS语法

• 选择器：要修饰的对象

• 属性名：修饰对象的哪一个属性（样式）

• 属性值：样式的取值

  ---

• 每个css样式由两部分组成，及选择符和声明，声明有分为属性和属性值；

• 属性必须放在花括号中，属性与属性值用冒号连接；

• 每条声明用分号结束。

• 当一个属性有多个属性值得时候，属性值与属性值不分先后顺序，用空格隔开；

• 在书写样式过程中，空格，换行等操作不影响属性显示。

link和@import之间的区别？

• ​

  差别1：本质的差别：* link属于XHTML标签，而@import在css中使用表示导入外部样式表。

  ​
• ​

  差别2：加载顺序的差别：当一个页面被加载的时候（或者浏览器浏览的时候），link引用的css会同时被加载，而@import引用的css会等到页面全部被下载完再被加载。所以有时候浏览@import加载css的页面时开始会没有样式，网速慢的时候挺明显。

  ​
• ​

  差别3；兼容性的差别：@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

  ​
• ​

  link方式的样式权重高于@import。

  ​
• ​

  link支持使用javascript改变样式。

  ​

选择器

为什么要用选择器？

要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要到css选择器。

元素选择器/类型选择器

• 语法：元素名称{属性：属性值}

• 说明： a)元素选择符就是一文档语言对象类型作为选择符，即使用结构中的元素作为选择符。 b)所有的页面元素都可以作为选择符；

• 用法 1）如果想改变某个元素的默认样式时，可以使用类型选择符； 2）当统一文档某个元素显示效果时，可以使用类型选择符。

class选择器/类选择器

• 语法：class名{属性：属性值}

• 说明 a)当我们使用class选择符时，应先为每个元素定义一个class名称 b)class选择符的语法格式是：

• ​

  ​

  .top{ width:200px height:100px }

• 用法：class选择器更适合定义一种样式。

id选择器

• 语法：#id{属性：属性值}

• 说明： a)当我们使用id选择器时，应该为每一个元素定义一个id属性 如<div id="box"></div> b)id选择器的语法格式是“#”加上自定义的id名 如：#box{width:300px;height:300px} c):起名时要去英文名，不要用关键字：（所有的标记和属性都是关键字） 如：head标记 d)一个id名称只能对应文档中一个具体的元素对象（唯一性）

通配符/通配选择器

• 语法：*{属性：属性值}

• 说明：统配选择符的写法是“*”，其含义是所有元素。

• ​

  *{margin：0；padding：0；}代表清楚所有元素的默认边距值和填充值。

  ​

群组选择器

• 语法：选择符1，选择符2，选择符3.......{属性：属性值}

• 说明：当有多个选择符应用相同的声明时，可以选择用”，“分隔的方式，合为一组。

• ​

  margin:0 auto实现盒子的水平居中

  ​

包含选择器/后代选择器

• 语法：选择符1 选择符2{属性：属性值}

• 说明：含义就是选择符1中包含所有选择符2；

• 用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不加选择符，直接包含选择器的方式解决。 如：

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#117700"><</span><span style="color:#117700">ul</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"list"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span></span></span>

伪类选择器

• 语法：

  link{属性：属性值}超链接的初始状态； ​ visited{属性：属性值}超链接被访问后的状态； ​ hover{属性：属性值}shu鼠标悬停，及鼠标滑过超链接的状态； ​ active{属性：属性值}超链接被激活的状态，及鼠标按下时超链接的状态；

• 说明：

​

a)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正确顺序为link,visited,hover,active;

​

b)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；

选择器的权重

当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行。 个数,选择器.权重，CSS中用四位数字表示权重，权重的表达方式如：0，0，0，0

1	类型(元素)选择器	0001
2	Class选择器（类选择器）	0010
3	id选择器	0100
4	包含选择符	为包含选择符的权重之和
5	内联样式	1000
6	!important	10000

​

CSS选择器解析规则1： 当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式

CSS选择器解析规则2： 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。

​

文本属性

1. font-size:字体大小；单位是px,浏览器默认是16px，设计图常用字号是12px

2. font-family:字体；当字体是中文字体，英文字体有空格时，需加双引号；多个字体之间用逗号连接，先解析第一个字体，如果没有解析第二个字体，以此类推。

3. color:颜色；color:red;color:rgb(255,0,0);0-255

4. font-weight:加粗；cont-weight:bolder(更粗的)/bold(加粗)、nomal(常规） font-weight:100-900;100-500不加粗 600-900加粗

5. font-style:倾斜；font-style:italic(倾斜字)/oblique(倾斜的文字)/nomal(常规)

6. text-align:文本水平对齐；text-align:left;水平靠左 text-align:right;水平靠右、 text-alogn:center;水平居中 text-align:justify;水平两端对齐，但是只对多行起作用

7. line-height:行高；line-height的数据=height得数据，可以实现单行文本垂直居中

8. text-indent:首行缩进；text-indent可以取负值；text-indent属性只对第一行起作用

9. letter-spacing;字间距；控制文字与文字之间的距离

10. text-decoration:文本修饰；text-decoration:none;没有/underline下划线/overline上划线/line-through删除线

11. .font:文字简写：font是font-weight font-size/line-height font-family的简写 font:italic 800 30px/80px“宋体”；顺序不能改变，必须同时指定font-size和font-family的属性时才起作用。

列表属性

1. line-style-type;定义列表符合样式；

line-style-type:disc(实心圆) /circle(空心圆)/square(实行方块)/none(去掉符号)

1. list-styel-image;将图片设置为列表符合样式；list-style-imag:url();

2. list-style-position;设置列表项标记的放置位置；list-style-position:outside;列表的外面 默认值 list-syle-position:inside;列表的里面

3. list-style:简写；list-style:none;去除列表符号

背景属性

1. background-color:背景颜色；background-color:red;

2. background-image:背景图片；background-image:url();

3. background-repeat:背景图片的平铺；background-repeat:no-repeat/repeat/repeat-x/repeat-y;

4. background-position:背景图片的固定;background-attachment:scroll(滚动)/fixed(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了)；

盒子模型

盒子模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即包含边框，边界，补白，内容区，这就是盒模型。

padding属性

1. padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。 填充：padding,在设定页面中一个元素内容到元素的边缘（边框）之间的距离。也称补白。 用法： （1）用来调整内容在容器中的位置关系 （2）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素或高上减掉后添加的padding属性值.

2. 属性值的4种方式

   • 四个值：上 右 下 左{padding:0px 0px 0px ;}

   • 三个值：上 左右 下{padding:10px 20px 30px;}

   • 二个值：上下 左右{padding:10px 20px;}

   • 一个值：四个方向 padding:2px;/定义元素四周填充为2px/ 说明：可单独设置一方向填充，如：上方向padding-top:10px;；右方向padding-right:10px;下方向 padding-bottom:10px;

Border属性

border:边框宽度，边框风格，边框颜色

1. 边框宽度：border-width;

2. 边框颜色：border-color;

3. 边框样式：border-style:solid(实线)/dashed（点划线）/double(双线) 简写：border：30px solid blue;参数的顺序可以随意调换

4. 单边框设置:

   • 上边框 border-top:30px solid blue;

   • 下边框border-bottom;

   • 左边框border-left;

   • 右边框border-right;

margin属性

1. margin的使用方法 边界：margin,在元素外边的空白区域，被称为边距。

   • margin-left:左边界

   • margin-right:右边界

   • margin-top:上边界

   • margin-bottom:下边界 属性值的4种方式：margin可以给负数 四个值：上 右 下 左 三个值：上 左右 下 二个值：上下 左右 一个值：四个方向 margin:2px;/定义元素四边边界为2px/ margin:0 auto;/一个有宽度的元素在浏览器中横向居中。/

溢出属性

1. 溢出属性 说明：overflow:visble/hidden/scroll/auto/inherit

   • visible:默认值，溢出内容会显示在元素之外；

   • hidden:溢出内容隐藏；

   • scroll:滚动，溢出内容以滚动方式显示；

   • auto:如果有溢出会添加滚动条，没有溢出正常显示；

   • inherit:规定应该遵从父元素继承overflow属性的值；

   • overflow-x:X轴溢出；

   • overflow-y：Y轴溢出；

2. 空余空间 说明： white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白 normal:默认值，空白会被浏览器忽略；

   ​

   nowrap:文本不会换行，文本会在同一行上继续，直到遇到 标签为止；

   ​

3. 省略号显示 说明 text-overflow:clip/ellipsis; clip:默认值，不显示省略号（......); ellipsis:显示省略标记；

当单行文本溢出显示省略号需要同时设置以下声明：

1. 容器宽度：width:200px;

2. 强制文本在一行内显示：white-space:nowrap;

3. 溢出内容为隐藏：overflow:hidden;

4. 溢出文本显示省略号：text-overflow:ellipsis;

元素显示类型

块元素

1. 块状元素在网页中就是以块的元素显示，所谓块状元素就是元素显示为矩形区域；

2. 默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列；

3. 块状元素可以定义自己的宽度和高度；

4. 块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素；

行内元素

1. 内联元素的表现形式是始终以行内逐个进行显示；

2. ​

   内联元素没有自己的形状，不能定义他的宽和高，高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；

   ​
3. ​

   内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效。

   ​

行内块元素内

内联块元素就是同时具备内联元素，块状元素的特点。

• ​

  元素之间的转换display

  ​

1. display:block:把元素转换成块；

2. display:inline:把元素转换成行内；

3. display:inline-block:把元素转换成行内块；

4. display:none:隐藏；

5. display:list-item:li标签默认的display属性值；

定位

书写语法	说明	文档流	偏移位置时的参照物	层次顺序
position:static;	默认值	默认	默认	z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层设置后，数值越大，层越靠上。
position:absolute;	绝对定位	脱离	当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏；有父元素且父元素有定位，父元素	同上
position:relative;	相对定位	不脱离	自己的初始位置	同上
position:fixed	固定定位	脱离	浏览器的当前窗口	同上
position:sticky;	粘性定位	可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好

精灵图

CSS Sprites的原理（图片整合技术）（css精灵）/雪碧图 1.将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。 2.图片整合优势 1）：图片整合来减少对服务器的请求次数，从而提高页面的加载速度. 2）：通过整合图片来减少图片的体积。

宽度自适应

自适应：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适。

1. 宽度自适应：元素宽度的默认值为auto.

2. 高度自适应：元素高度的默认值{height:auto;}

3. 浮动元素的高度自适应 父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷。 方法1：给父元素添加声明overflow:hidden;(缺点：会隐藏溢出的元素) 方法2：在浮动元素下方添加空块元素，并给该元素添加声明：clear:both;height:0;overflow:hidden;(缺点：在结构里增加了空的标签，不利于代码的可读性，且降低了浏览器的性能) 方法3：万能消除浮动法 选择符：after{content:"";clear:both;display:block;height:0;visibility:hidden;/overflow:hidden}

伪元素

1）:after(与content属性一起使用，定义在对象后的内容) 如：div:after{content:url(lodo.jpg)} div:after{content:"文本内容”；} 2）：before:与content属性一起使用，定义在对象前的内容。 如：div:before{content:"在其前放内容“；} 3）：first-letter:定义对象内部第一个字符的样式。 4）：first-line:定义对象内第一行文本样式

窗口自适应

盒子根据窗口的大小进行改变 设置方式：html,body{height：100%；}

​

calc()函数的使用

​

calc()函数：用于动态计算长度值 需要注意的是，运算符前后都需要保留一个空格，例如width:calc(100%-10px); 任何长度值都可以使用calc()函数进行计算； calc()函数支持"+","-","*","/"运算； calc()函数使用标准的数学运算优先级规则；

H5新增

HTML5语法

1. 内容类型 html的文件扩展符与内容类型保持不变，仍然为".html"或".htm"。

2. DOCTYPE声明 不区分大小写

3. 指定字符集编码 meta charset="UTF-8"

4. 可省略标记的元素

• 不允许写结束标记的元素：br,col,embed,hr,img,input,link,meta

• 可以省略结束标记的元素：li,dt,dd,p,option,colgroup,thead,tbody,tfoot,tr,td,th.

• 可以省略全部标记的元素：html,head,body,colgroup,tbody

1. 省略引号 属性值可以使用双引号，也可以使用单引号。

HTML.5新增语义化标签

• section元素：表示页面中的一个内容区块

• article元素：表示一块与上下文无关的独立的内容

• aside元素：在artcile之外，与artcile内容相关的辅助信息

• heade元素：表示页面中一个内容区块或整个页面的标题

• footer元素：表示页面中一个内容区块或整个页面的脚注

• nav元素：表示页面中导航链接部分

• figure元素：表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位

• main元素：表示页面中的主要内容（ie不兼容）

Video和audio的应用

​

file:///D:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/moie.ogg

​

autio元素 定义音频 <autio src="someaduio.wav">Audio元素</audio> controls属性：如果出现该属性，则想用户显示控件，比如播放按钮。 autoplay属性：如果出现该属性，则视频在就绪后马上播放。 loop属性：重复播放属性。 muted属性：静音属性 poster属性：规定视频正在下载是显示的图像，直到用户点击播放按钮。

• Type="color"生成一个颜色选择的表单

• Type="tel"唤起拨号盘表单

• Type="search"产生一个搜索意义的表单

• Type="range"产生一个滑动条表单

• Type="number"产生一个数值表单

• Type="email"限制用户必须输入email类型

• Type="url"限制用户必须输入url类型

• Type="date"限制用户必须输入日期

• Type="month"限制用户必须输入月类型

• Type="week"限制用户必须输入周类型

• Type="time"限制用户必须输入时间类型

• Type="datetime-local" 选取本地时间

Datalist:选项列表

例 <input type="url" list="url-list" name="like"/>

​

​

阴影

1.文本阴影属性语法及应用 text-shaow:2px 2px 2px red 说明：水平，垂直阴影的位置允许负值，可进行多阴影设置

1. box-shadow盒子阴影

• h-shadow:必需的。水平阴影位置。允许负值

• v-shadow:必需的。垂直阴影位置。允许负值

• blur:可选。模糊距离

• spread:可选阴影的大小

• color:可选。阴影的颜色

• inset:可选，从外侧的阴影改变阴影内侧阴影

字体引入

@font-face{ font-family<YourWebFontFName>; src:<source><format>]*; [font-weight:<weight>]; [font-style:<style>]; } 说明：source：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径。

怪异盒模型

含义：更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改。

1. 属性：box-sizing box-sizing属性允许您以待定的方式匹配某个区域的特定元素

2. 属性值：content-box 这是由css2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距的边框。

3. 属性值：border-box 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距的边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框的内边距才能得到内容的宽度和高度。

多列布局

1. column-count 说明： 属性规定元素应该被分隔的列数 适用于：除table外的非替换块级元素，table cells,inline-clock元素

2. column-gap 说明 属性规定列之间的间隔大小

3. column-rule 说明 设置或检索对象的列与列之间的边框。符合属性。 column-rule-color规定列之间规则的颜色 column-rule-syle规定之间规则的样式 column-rule-width规定列之间规则的宽度

4. column-fill 说明 设置检索对象所有列的高度是否统一 auto：列宽自适应内容 balance：所有列的高度以其中最高的一列统一

5. column-span 说明： 设置或检索对象元素是否横跨所有列 none:不跨列 all:横跨所有列

6. column-width 说明 设置或检索对象每列的宽度

响应式布局

1. 常见的布局方案

• 固定布局 以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，致设计一套尺寸；

• 可切换的固定布局 同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别屏幕尺寸或浏览宽度，选择最合适的那套宽度布局；

• 弹性布局 以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度；并能完美理由有效空间展现最佳效果；

• 混合布局 同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美里拥有效空间展现最佳效果；知识混合像素，和百分比作为页面单位。

• 布局响应 对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先，移动优先； 无论基于那种模式的设计，要兼容所有的设备，布局响应式不可避免地需要对模块布局做一些变化。

  1. （1）模块中内容：挤压-拉（布局不变） （2）模块中内容：换行-平铺（布局不变） （3）模块中内容：删减-增加（布局不变） （4）模块位置变换（布局改变） （5）模块展示方式改变：隐藏-展开（布局改变)

      

  2. 响应式布局的特点